Add line numbers to crate/**/source/

Author: xFrednet

static/source.js

@@ -38,4 +38,95 @@
             toggleSource(toggleSourceButton);
         });
     });
+
+    // This code has been adapted from the rustdoc implementation here:
+    // https://github.com/rust-lang/rust/blob/5c848860/src/librustdoc/html/static/js/src-script.js#L152-L204
+    function highlightLineNumbers() {
+        const match = window.location.hash.match(/^#?(\d+)(?:-(\d+))?$/);
+        if (!match) {
+            return;
+        }
+        let from = parseInt(match[1], 10);
+        let to = from;
+        if (typeof match[2] !== "undefined") {
+            to = parseInt(match[2], 10);
+        }
+        if (to < from) {
+            const tmp = to;
+            to = from;
+            from = tmp;
+        }
+        let elem = document.getElementById(from);
+        if (!elem) {
+            return;
+        }
+        const x = document.getElementById(from);
+        if (x) {
+            x.scrollIntoView();
+        }
+        Array.from(document.getElementsByClassName("line-number-highlighted")).forEach(e => {
+            e.classList.remove("line-number-highlighted");
+        });
+        for (let i = from; i <= to; ++i) {
+            elem = document.getElementById(i);
+            if (!elem) {
+                break;
+            }
+            elem.classList.add("line-number-highlighted");
+        }
+    }
+
+    const handleLineNumbers = (function () {
+        let prev_line_id = 0;
+
+        const set_fragment = name => {
+            const x = window.scrollX,
+                y = window.scrollY;
+            if (window.history && typeof window.history.pushState === "function") {
+                history.replaceState(null, null, "#" + name);
+                highlightLineNumbers();
+            } else {
+                location.replace("#" + name);
+            }
+            // Prevent jumps when selecting one or many lines
+            window.scrollTo(x, y);
+        };
+
+        return ev => {
+            let cur_line_id = parseInt(ev.target.id, 10);
+            // This event handler is attached to the entire line number column, but it should only
+            // be run if one of the anchors is clicked. It also shouldn't do anything if the anchor
+            // is clicked with a modifier key (to open a new browser tab).
+            if (isNaN(cur_line_id) ||
+                ev.ctrlKey ||
+                ev.altKey ||
+                ev.metaKey) {
+                return;
+            }
+            ev.preventDefault();
+
+            if (ev.shiftKey && prev_line_id) {
+                // Swap selection if needed
+                if (prev_line_id > cur_line_id) {
+                    const tmp = prev_line_id;
+                    prev_line_id = cur_line_id;
+                    cur_line_id = tmp;
+                }
+
+                set_fragment(prev_line_id + "-" + cur_line_id);
+            } else {
+                prev_line_id = cur_line_id;
+
+                set_fragment(cur_line_id);
+            }
+        };
+    }());
+
+    window.addEventListener("hashchange", highlightLineNumbers)
+
+    Array.from(document.getElementById("line-numbers").children[0].children).forEach(el => {
+        el.addEventListener("click", handleLineNumbers);
+    });
+
+    highlightLineNumbers();
 })();

templates/crate/source.html

@@ -127,8 +127,15 @@
                 {% else %}
                     {% set file_name = "" %}
                 {% endif %}
-                <div id="source-code" class="pure-u-1 pure-u-sm-17-24 pure-u-md-19-24">
-                    {{- file_content|highlight(file_name)|safe -}}
+                <div id="source-code-container" class="pure-u-1 pure-u-sm-17-24 pure-u-md-19-24">
+                    <div data-nosnippet class="source-code"><pre id="line-numbers"><code>
+                        {%- for line in 1..=file_content.lines().count() -%}
+                            <a href="#{{line|safe}}" id="{{line|safe}}">{{line|safe}}</a>
+                        {%~ endfor -%}
+                    </code></pre></div>
+                    <div id="source-code" class="source-code">
+                        {{- file_content|highlight(file_name)|safe -}}
+                    </div>
                 </div>
             {%- endif -%}
         </div>

templates/style/_syntax-themes.scss

@@ -15,6 +15,8 @@ html {
   --color-syntax-question-mark: #ff9011;
   --color-syntax-self: #c82829;
   --color-syntax-string: #718c00;
+  --color-line-number: #c67e2d;
+  --color-line-number-highlighted: #fdffd3;
 }
 
 // To add a new theme, copy the above theme into a new `html[data-docs-rs-theme="name"]`
@@ -37,6 +39,8 @@ html[data-docs-rs-theme="dark"] {
   --color-syntax-question-mark: #ff9011;
   --color-syntax-self: #ee6868;
   --color-syntax-string: #83a300;
+  --color-line-number: #3b91e2;
+  --color-line-number-highlighted: #0a042f;
 }
 
 html[data-docs-rs-theme="ayu"] {
@@ -56,4 +60,6 @@ html[data-docs-rs-theme="ayu"] {
   --color-syntax-question-mark: #ff9011;
   --color-syntax-self: #36a3d9;
   --color-syntax-string: #b8cc52;
+  --color-line-number: #708090;
+  --color-line-number-highlighted: #272b2e;
 }

templates/style/_syntax.scss

@@ -1,5 +1,13 @@
 @import "syntax-themes";
 
+#line-numbers > code > a, #line-numbers > code > a:visited  {
+  color: var(--color-line-number);
+}
+
+.line-number-highlighted {
+  background-color: var(--color-line-number-highlighted);
+}
+
 pre > code {
   color: var(--color-syntax-foreground);
   background-color: var(--color-syntax-background);

templates/style/style.scss

@@ -886,23 +886,40 @@ ul.pure-menu-list {
         }
     }
 
-    #source-code {
-        pre {
-            margin-top: 0;
-            margin-bottom: 0;
-            height: 100%;
+    #source-warning {
+        height: 100%;
+    }
+}
 
-            code {
-                height: 100%;
-            }
-        }
+#source-code-container {
+    display: inline-flex;
+    overflow: scroll;
+}
+#line-numbers {
+    text-align: right;
+    letter-spacing: normal;
+}
+#line-numbers > code > a  {
+    padding: 0 8px;
+}
+// This class is used to the source code and the line number container in the
+// `crate/**/source/*` view
+.source-code {
+    pre {
+        margin-top: 0;
+        margin-bottom: 0;
+        height: 100%;
 
-        &.expanded {
-            width: calc(100% - 46px);
+        code {
+            height: 100%;
         }
     }
 
-    #source-warning {
-        height: 100%;
+    &.expanded {
+        width: calc(100% - 46px);
     }
 }
+#source-code {
+    overflow: scroll;
+    width: 100%;
+}