Add line numbers

templates/file-view.html

@@ -10,8 +10,47 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            10  
                                            <br>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            11  
                                            {{ detailedtype }}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            12  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        13 +
                                        <style>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        14 +
                                            .code-view {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        15 +
                                                white-space: normal;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        16 +
                                                padding: 0;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        17 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        18 +
                                            .code-view::before {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        19 +
                                                counter-reset: line-number;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        20 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        21 +
                                            .code-view > code {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        22 +
                                                white-space: pre-wrap;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        23 +
                                                font: inherit;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        24 +
                                                color: inherit;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        25 +
                                                background: inherit;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        26 +
                                                display: block;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        27 +
                                                padding: 0;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        28 +
                                                margin: 0;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        29 +
                                                counter-increment: line-number;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        30 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        31 +
                                            .code-view > code::before {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        32 +
                                                display: inline-block;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        33 +
                                                width: var(--line-chars) * 1ch;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        34 +
                                                background: var(--color-callout);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        35 +
                                                content: counter(line-number);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        36 +
                                                padding: 0 1ch;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        37 +
                                                text-align: end;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        38 +
                                                margin-right: 1ch;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        39 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        40 +
                                            .code-view > code:first-child::before {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        41 +
                                                padding-top: 1em;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        42 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        43 +
                                            .code-view > code:last-child::before {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        44 +
                                                padding-bottom: 1em;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        45 +
                                            }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        46 +
                                        </style>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        47 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            48  
                                            {% if mode == "text" %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        14 -
                                            <pre>{{ contents }}</pre>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        49 +
                                            <pre class="code-view" style="--line-chars: {{ contents | split('\n') | length | string | length }}">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        50 +
                                                {% for i in contents | split("\n") %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        51 +
                                                    <code>{{ i }}</code>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        52 +
                                                {% endfor %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        53 +
                                            </pre>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            54  
                                            {% elif mode == "image" %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            55  
                                                <img src="{{ file }}">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            56  
                                            {% elif mode == "audio" %}