How do pug/jade manage smart indentation inside

?

                      
                      
                    

                        I am writing project documentation, which is a simple HTML file with markup examples and source code for each example. Since both the source code and the example are the same code, the HTML file is compiled from pug (jade), where there is one mixin for this code (the mixin is wrapped in <pre><code> to show the source code). 

But there is a problem with the output of the source code, which concerns usability and aesthetics. Due to the nesting that occurs in compiled HTML, the source code has very large indents from the left margin. 

Demo: codepen.io/anon/pen/rjeBWL?editors=1010 
Hence the question:is there any way to get rid of the extra indentation while keeping the internal nesting of the source code and the ability to use a pre-processor (mainly for mixins)? Perhaps there are alternative pre-processors where it can be implemented "out of the box"? 

For clarity, here is the desired output: codepen.io/anon/pen/MJyWxX?editors=1010
                    
                    
                    
 
                        

                            
                          
                             Reply 
                          
                          
                          
                             
                        
                        

                          
                             
                          
                             
                        
                        
                           Answer the question