user0/rust
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add new setting to wrap source code lines when too long

Browse source
This commit is contained in:
Guillaume Gomez 2025-02-13 17:39:05 +01:00
parent 905b1bf1cc
commit 599f88d771
4 changed files with 99 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

107
src/librustdoc/html/static/css/rustdoc.css
View file

@ -41,6 +41,7 @@ xmlns="http://www.w3.org/2000/svg" fill="black" height="18px">\
--font-family: "Source Serif 4", NanumBarunGothic, serif;
--font-family-code: "Source Code Pro", monospace;
--line-number-padding: 4px;
--line-number-right-margin: 20px;
/* scraped examples icons (34x33px) */
--prev-arrow-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" \
enable-background="new 0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill="none" \
@ -848,22 +849,6 @@ ul.block, .block li, .block ul {
border-radius: 6px;
}
/*
If the code example line numbers are displayed, there will be a weird radius in the middle from
both the code example and the line numbers, so we need to remove the radius in this case.
*/
.rustdoc .example-wrap > .example-line-numbers,
.rustdoc .scraped-example .src-line-numbers,
.rustdoc .scraped-example .src-line-numbers > pre {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.rustdoc .example-wrap > .example-line-numbers + pre,
.rustdoc .scraped-example .rust {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.rustdoc .scraped-example {
position: relative;
}
@ -908,45 +893,31 @@ both the code example and the line numbers, so we need to remove the radius in t
overflow: auto;
}
.rustdoc .example-wrap pre.example-line-numbers,
.rustdoc .example-wrap .src-line-numbers {
min-width: fit-content; /* prevent collapsing into nothing in truncated scraped examples */
flex-grow: 0;
text-align: right;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 14px 8px;
padding-right: 2px;
color: var(--src-line-numbers-span-color);
}
.example-wrap.digits-1 [data-nosnippet] {
.example-wrap.digits-1:not(.hide-lines) [data-nosnippet] {
width: calc(1ch + var(--line-number-padding) * 2);
}
.example-wrap.digits-2 [data-nosnippet] {
.example-wrap.digits-2:not(.hide-lines) [data-nosnippet] {
width: calc(2ch + var(--line-number-padding) * 2);
}
.example-wrap.digits-3 [data-nosnippet] {
.example-wrap.digits-3:not(.hide-lines) [data-nosnippet] {
width: calc(3ch + var(--line-number-padding) * 2);
}
.example-wrap.digits-4 [data-nosnippet] {
.example-wrap.digits-4:not(.hide-lines) [data-nosnippet] {
width: calc(4ch + var(--line-number-padding) * 2);
}
.example-wrap.digits-5 [data-nosnippet] {
.example-wrap.digits-5:not(.hide-lines) [data-nosnippet] {
width: calc(5ch + var(--line-number-padding) * 2);
}
.example-wrap.digits-6 [data-nosnippet] {
.example-wrap.digits-6:not(.hide-lines) [data-nosnippet] {
width: calc(6ch + var(--line-number-padding) * 2);
}
.example-wrap.digits-7 [data-nosnippet] {
.example-wrap.digits-7:not(.hide-lines) [data-nosnippet] {
width: calc(7ch + var(--line-number-padding) * 2);
}
.example-wrap.digits-8 [data-nosnippet] {
.example-wrap.digits-8:not(.hide-lines) [data-nosnippet] {
width: calc(8ch + var(--line-number-padding) * 2);
}
.example-wrap.digits-9 [data-nosnippet] {
.example-wrap.digits-9:not(.hide-lines) [data-nosnippet] {
width: calc(9ch + var(--line-number-padding) * 2);
}
@ -954,12 +925,12 @@ both the code example and the line numbers, so we need to remove the radius in t
color: var(--src-line-numbers-span-color);
text-align: right;
display: inline-block;
margin-right: 20px;
margin-right: var(--line-number-right-margin);
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 0 4px;
padding: 0 var(--line-number-padding);
}
.example-wrap [data-nosnippet]:target {
border-right: none;
@ -967,6 +938,60 @@ both the code example and the line numbers, so we need to remove the radius in t
.example-wrap .line-highlighted[data-nosnippet] {
background-color: var(--src-line-number-highlighted-background-color);
}
:root.wrap-source-code .example-wrap [data-nosnippet] {
position: absolute;
left: 0;
}
.wrap-source-code .example-wrap pre > code {
position: relative;
word-break: break-all;
}
:root.wrap-source-code .example-wrap pre > code {
display: block;
white-space: pre-wrap;
}
:root.wrap-source-code .example-wrap pre > code * {
word-break: break-all;
}
:root.wrap-source-code .example-wrap.digits-1 pre > code {
padding-left: calc(
1ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
}
:root.wrap-source-code .example-wrap.digits-2 pre > code {
padding-left: calc(
2ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
}
:root.wrap-source-code .example-wrap.digits-3 pre > code {
padding-left: calc(
3ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
}
:root.wrap-source-code .example-wrap.digits-4 pre > code {
padding-left: calc(
4ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
}
:root.wrap-source-code .example-wrap.digits-5 pre > code {
padding-left: calc(
5ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
}
:root.wrap-source-code .example-wrap.digits-6 pre > code {
padding-left: calc(
6ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
}
:root.wrap-source-code .example-wrap.digits-7 pre > code {
padding-left: calc(
7ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
}
:root.wrap-source-code .example-wrap.digits-8 pre > code {
padding-left: calc(
8ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
}
:root.wrap-source-code .example-wrap.digits-9 pre > code {
padding-left: calc(
9ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
}
.example-wrap.hide-lines [data-nosnippet] {
display: none;
}
.search-loading {
text-align: center;

37
src/librustdoc/html/static/js/main.js
View file

@ -1112,35 +1112,32 @@ function preLoadCss(cssUrl) {
// @ts-expect-error
window.rustdoc_add_line_numbers_to_examples = () => {
if (document.querySelector(".rustdoc.src")) {
// We are in the source code page, nothing to be done here!
return;
// @ts-expect-error
function generateLine(nb) {
return `<span data-nosnippet>${nb}</span>`;
}
onEachLazy(document.querySelectorAll(
":not(.scraped-example) > .example-wrap > pre:not(.example-line-numbers)",
), x => {
const parent = x.parentNode;
const line_numbers = parent.querySelectorAll(".example-line-numbers");
if (line_numbers.length > 0) {
".rustdoc:not(.src) :not(.scraped-example) > .example-wrap > pre > code",
), code => {
if (hasClass(code.parentElement.parentElement, "hide-lines")) {
removeClass(code.parentElement.parentElement, "hide-lines");
return;
}
const count = x.textContent.split("\n").length;
const elems = [];
for (let i = 0; i < count; ++i) {
elems.push(i + 1);
}
const node = document.createElement("pre");
addClass(node, "example-line-numbers");
node.innerHTML = elems.join("\n");
parent.insertBefore(node, x);
const lines = code.innerHTML.split("\n");
const digits = (lines.length + "").length;
// @ts-expect-error
code.innerHTML = lines.map((line, index) => generateLine(index + 1) + line).join("\n");
addClass(code.parentElement.parentElement, `digits-${digits}`);
});
};
// @ts-expect-error
window.rustdoc_remove_line_numbers_from_examples = () => {
onEachLazy(document.querySelectorAll(".example-wrap > .example-line-numbers"), x => {
x.parentNode.removeChild(x);
});
onEachLazy(
document.querySelectorAll(".rustdoc:not(.src) :not(.scraped-example) > .example-wrap"),
x => addClass(x, "hide-lines"),
);
};
if (getSettingValue("line-numbers") === "true") {

13
src/librustdoc/html/static/js/settings.js
View file

@ -59,6 +59,14 @@
} else {
removeClass(document.documentElement, "sans-serif");
}
break;
case "wrap-source-code":
if (value === true) {
addClass(document.documentElement, "wrap-source-code");
} else {
removeClass(document.documentElement, "wrap-source-code");
}
break;
}
}
@ -246,6 +254,11 @@
"js_name": "sans-serif-fonts",
"default": false,
},
{
"name": "Wrap source codes",
"js_name": "wrap-source-code",
"default": false,
},
];
// Then we build the DOM.

3
src/librustdoc/html/static/js/storage.js
View file

@ -286,6 +286,9 @@ if (getSettingValue("hide-modnav") === "true") {
if (getSettingValue("sans-serif-fonts") === "true") {
addClass(document.documentElement, "sans-serif");
}
if (getSettingValue("wrap-source-code") === "true") {
addClass(document.documentElement, "wrap-source-code");
}
function updateSidebarWidth() {
const desktopSidebarWidth = getSettingValue("desktop-sidebar-width");
if (desktopSidebarWidth && desktopSidebarWidth !== "null") {