Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add line numbers to crate/**/source/ #2560

Merged
merged 2 commits into from
Jul 30, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 90 additions & 0 deletions static/source.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,4 +38,94 @@
toggleSource(toggleSourceButton);
});
});

// This code has been adapted from the rustdoc implementation
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();
})();
11 changes: 9 additions & 2 deletions templates/crate/source.html
Original file line number Diff line number Diff line change
Expand Up @@ -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}}" id="{{line}}">{{line}}</a>
{%~ endfor -%}
xFrednet marked this conversation as resolved.
Show resolved Hide resolved
</code></pre></div>
<div id="source-code" class="source-code">
{{- file_content|highlight(file_name)|safe -}}
</div>
</div>
{%- endif -%}
</div>
Expand Down
6 changes: 6 additions & 0 deletions templates/style/_syntax-themes.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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"]`
Expand All @@ -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"] {
Expand All @@ -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;
}
8 changes: 8 additions & 0 deletions templates/style/_syntax.scss
Original file line number Diff line number Diff line change
@@ -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);
Expand Down
43 changes: 30 additions & 13 deletions templates/style/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
}
Loading