thomas
/
website
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

add automatic line numbers to source-highlighted pre code blocks.

Thomas Buck 2 years ago
parent
12713e0e14
commit
138a8a7b40
3 changed files with 61 additions and 8 deletions
Unified View Show Diff Stats
  1. 1
    1
      input/projects/giessomat.md
  2. 28
    2
      page.html
  3. 32
    5
      static/css/style.css

+ 1
- 1
input/projects/giessomat.md View File

204 
          ---    ---                                  ---    ---
 204 
          ---    ---                                  ---    ---
205 
           |      |                                    |      |
 205 
           |      |                                    |      |
206 
         +3.3V ---                                   +3.3V ---
 206 
         +3.3V ---                                   +3.3V ---
207 
-</pre><pre class="ascii gallery">
207 
+</pre><pre class="ascii">
208 
 Giess-o-mat User Interface Schematic
 208 
 Giess-o-mat User Interface Schematic
209
209
210 
             -------|USB|-------
 210 
             -------|USB|-------

+ 28
- 2
page.html View File

18 
     <link type="text/css" rel="stylesheet" href="css/print.css" media="print" />
 18 
     <link type="text/css" rel="stylesheet" href="css/print.css" media="print" />
19 
     <link type="text/css" rel="stylesheet" href="css/gh-fork-ribbon.css" />
 19 
     <link type="text/css" rel="stylesheet" href="css/gh-fork-ribbon.css" />
20 
     <link type="text/css" rel="stylesheet" href="css/lightgallery.min.css" />
 20 
     <link type="text/css" rel="stylesheet" href="css/lightgallery.min.css" />
21 
-    <script type="text/javascript" src="js/sh_main.js"></script>
22 
 </head>
 21 
 </head>
23 
-<body onload="sh_highlightDocument('/js/sh/', '.min.js');">
22 
+<body onload="loadPage()">
24 
     <!--%
 23 
     <!--%
25 
         link = ""
 24 
         link = ""
26
25
145 
         &middot;
 144 
         &middot;
146 
         <a href="https://www.paypal.com/us/cgi-bin/webscr?cmd=_send-money&nav=1&email=xythobuz@me.com">PayPal</a>
 145 
         <a href="https://www.paypal.com/us/cgi-bin/webscr?cmd=_send-money&nav=1&email=xythobuz@me.com">PayPal</a>
147 
     </div>
 146 
     </div>
147 
+    <script type="text/javascript">
148 
+        function loadPage() {
149 
+            // adapted from https://sourceforge.net/p/shjs/feature-requests/5/#0940
150 
+            $("pre[class^='sh_']").each(function() {
151 
+                // wrap pre with div._sh
152 
+                $('<div class="_sh"><div class="_sh_lines"></div></div>').insertBefore($(this));
153 
+                $(this).appendTo($(this).prev('._sh'));
154 
+
155 
+                // split content of pre with linebreaks so we can get total line number
156 
+                var content = $.trim($(this).html());
157 
+                var lines = content.split('\n');
158 
+
159 
+                // append line number to span._sh_lines
160 
+                for(var line = 1; line < lines.length + 1; line++) {
161 
+                    $(this).prev('._sh_lines').append('<span data-line="' + line + '">' + line + '</span>');
162 
+                }
163 
+            });
164 
+            $("pre:not([class^='sh_']):not([class='ascii'])").each(function() {
165 
+                // wrap pre with div._sh
166 
+                $('<div class="_sh"></div>').insertBefore($(this));
167 
+                $(this).appendTo($(this).prev('._sh'));
168 
+            });
169 
+
170 
+            sh_highlightDocument('/js/sh/', '.min.js');
171 
+        }
172 
+    </script>
173 
+    <script type="text/javascript" src="js/sh_main.js"></script>
148 
     <script type="text/javascript" src="js/jquery.min.js"></script>
 174 
     <script type="text/javascript" src="js/jquery.min.js"></script>
149 
     <!--%
 175 
     <!--%
150 
         if page.get("comments", "false") == "true":
 176 
         if page.get("comments", "false") == "true":

+ 32
- 5
static/css/style.css View File

66 
     }
 66 
     }
67 
 }
 67 
 }
68
68
69 
-pre {
69 
+._sh {
70 
     max-height: 300px;
 70 
     max-height: 300px;
71 
     overflow: auto;
 71 
     overflow: auto;
72 
     font-size: 0.9em;
 72 
     font-size: 0.9em;
78 
     resize: vertical;
 78 
     resize: vertical;
79 
 }
 79 
 }
80
80
81 
+.sh_sourceCode, pre {
82 
+    margin: 0 0;
83 
+}
84 
+
81 
 /* allow resizing larger than max-height */
 85 
 /* allow resizing larger than max-height */
82 
-pre[style*="height"] {
86 
+._sh[style*="height"] {
83 
     max-height: unset;
 87 
     max-height: unset;
84 
 }
 88 
 }
85
89
90 
+._sh_lines {
91 
+    text-align: right;
92 
+    float: left;
93 
+    margin: 0 0.5em 0 0;
94 
+    padding: 0 0.5em 0 0;
95 
+    border-right-width: 1px;
96 
+    border-right-style: solid;
97 
+}
98 
+
99 
+._sh_lines span {
100 
+    display: block;
101 
+    font-family: monospace;
102 
+}
103 
+
86 
 .ascii {
 104 
 .ascii {
105 
+    overflow: auto;
106 
+    padding: 10px;
107 
+    margin: 1em;
108 
+    border-width: 2px;
109 
+    border-style: solid;
110 
+    border-radius: 10px;
87 
     font-size: 0.7em;
 111 
     font-size: 0.7em;
88 
     line-height: 1;
 112 
     line-height: 1;
89 
     max-height: max-content;
 113 
     max-height: max-content;
90 
-    overflow-y: auto;
91 
     font-weight: bold;
 114 
     font-weight: bold;
92 
     width: max-content;
 115 
     width: max-content;
93 
 }
 116 
 }
261 
     border-bottom-color: #32CD32;
 284 
     border-bottom-color: #32CD32;
262 
 }
 285 
 }
263
286
287 
+._sh_lines {
288 
+    border-right-color: #32CD32;
289 
+}
290 
+
264 
 hr {
 291 
 hr {
265 
     color: #32CD32;
 292 
     color: #32CD32;
266 
 }
 293 
 }
267
294
268 
-table, th, td, pre, .border, .releasecard, #index-avatar, .collapsecontent {
295 
+table, th, td, ._sh, .ascii, .border, .releasecard, #index-avatar, .collapsecontent {
269 
     border-color: #32CD32;
 296 
     border-color: #32CD32;
270 
 }
 297 
 }
271
298
316 
         color: #B0B0B0;
 343 
         color: #B0B0B0;
317 
     }
 344 
     }
318
345
319 
-    pre {
346 
+    .ascii, ._sh {
320 
         background-color: #000000;
 347 
         background-color: #000000;
321 
     }
 348 
     }
322
349

Write Preview
Loading…
Cancel
Save