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
Split 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,7 +204,7 @@ ESP_SCL <---|x P22          SP  |                        -------
204 204 
          ---    ---                                  ---    ---
205 205 
           |      |                                    |      |
206 206 
         +3.3V ---                                   +3.3V ---
207 
-</pre><pre class="ascii gallery">
207 
+</pre><pre class="ascii">
208 208 
 Giess-o-mat User Interface Schematic
209 209
210 210 
             -------|USB|-------

+ 28
- 2
page.html View File 

@@ -18,9 +18,8 @@ else:
18 18 
     <link type="text/css" rel="stylesheet" href="css/print.css" media="print" />
19 19 
     <link type="text/css" rel="stylesheet" href="css/gh-fork-ribbon.css" />
20 20 
     <link type="text/css" rel="stylesheet" href="css/lightgallery.min.css" />
21 
-    <script type="text/javascript" src="js/sh_main.js"></script>
22 21 
 </head>
23 
-<body onload="sh_highlightDocument('/js/sh/', '.min.js');">
22 
+<body onload="loadPage()">
24 23 
     <!--%
25 24 
         link = ""
26 25 
 
@@ -145,6 +144,33 @@ else:
145 144 
         &middot;
146 145 
         <a href="https://www.paypal.com/us/cgi-bin/webscr?cmd=_send-money&nav=1&email=xythobuz@me.com">PayPal</a>
147 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 174 
     <script type="text/javascript" src="js/jquery.min.js"></script>
149 175 
     <!--%
150 176 
         if page.get("comments", "false") == "true":

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

@@ -66,7 +66,7 @@ a.anchor {
66 66 
     }
67 67 
 }
68 68
69 
-pre {
69 
+._sh {
70 70 
     max-height: 300px;
71 71 
     overflow: auto;
72 72 
     font-size: 0.9em;
 
@@ -78,16 +78,39 @@ pre {
78 78 
     resize: vertical;
79 79 
 }
80 80
81 
+.sh_sourceCode, pre {
82 
+    margin: 0 0;
83 
+}
84 
+
81 85 
 /* allow resizing larger than max-height */
82 
-pre[style*="height"] {
86 
+._sh[style*="height"] {
83 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 104 
 .ascii {
105 
+    overflow: auto;
106 
+    padding: 10px;
107 
+    margin: 1em;
108 
+    border-width: 2px;
109 
+    border-style: solid;
110 
+    border-radius: 10px;
87 111 
     font-size: 0.7em;
88 112 
     line-height: 1;
89 113 
     max-height: max-content;
90 
-    overflow-y: auto;
91 114 
     font-weight: bold;
92 115 
     width: max-content;
93 116 
 }
 
@@ -261,11 +284,15 @@ body, #nav, #nav a:link, #nav a:visited {
261 284 
     border-bottom-color: #32CD32;
262 285 
 }
263 286
287 
+._sh_lines {
288 
+    border-right-color: #32CD32;
289 
+}
290 
+
264 291 
 hr {
265 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 296 
     border-color: #32CD32;
270 297 
 }
271 298 
 
@@ -316,7 +343,7 @@ table, th, td, pre, .border, .releasecard, #index-avatar, .collapsecontent {
316 343 
         color: #B0B0B0;
317 344 
     }
318 345
319 
-    pre {
346 
+    .ascii, ._sh {
320 347 
         background-color: #000000;
321 348 
     }
322 349

Write Preview
Loading…
Cancel
Save