Skip to content

Commit b01ca42

Browse files
GuillaumeGomezGuillaumeGomez
committed
Add new setting to wrap source code lines when too long
1 parent 54cdc75 commit b01ca42

File tree

4 files changed

+97
-61
lines changed

4 files changed

+97
-61
lines changed

‎src/librustdoc/html/static/css/rustdoc.css

+66-41
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ xmlns="http://www.w3.org/2000/svg" fill="black" height="18px">\
4141
--font-family: "Source Serif 4", NanumBarunGothic, serif;
4242
--font-family-code: "Source Code Pro", monospace;
4343
--line-number-padding: 4px;
44+
--line-number-right-margin: 20px;
4445
}
4546

4647
:root.sans-serif {
@@ -835,22 +836,6 @@ ul.block, .block li, .block ul {
835836
border-radius: 6px;
836837
}
837838

838-
/*
839-
If the code example line numbers are displayed, there will be a weird radius in the middle from
840-
both the code example and the line numbers, so we need to remove the radius in this case.
841-
*/
842-
.rustdoc .example-wrap > .example-line-numbers,
843-
.rustdoc .scraped-example .src-line-numbers,
844-
.rustdoc .scraped-example .src-line-numbers > pre {
845-
border-top-right-radius: 0;
846-
border-bottom-right-radius: 0;
847-
}
848-
.rustdoc .example-wrap > .example-line-numbers + pre,
849-
.rustdoc .scraped-example .rust {
850-
border-top-left-radius: 0;
851-
border-bottom-left-radius: 0;
852-
}
853-
854839
.rustdoc .scraped-example {
855840
position: relative;
856841
}
@@ -895,65 +880,105 @@ both the code example and the line numbers, so we need to remove the radius in t
895880
overflow: auto;
896881
}
897882

898-
.rustdoc .example-wrap pre.example-line-numbers,
899-
.rustdoc .example-wrap .src-line-numbers {
900-
min-width: fit-content; /* prevent collapsing into nothing in truncated scraped examples */
901-
flex-grow: 0;
902-
text-align: right;
903-
-moz-user-select: none;
904-
-webkit-user-select: none;
905-
-ms-user-select: none;
906-
user-select: none;
907-
padding: 14px 8px;
908-
padding-right: 2px;
909-
color: var(--src-line-numbers-span-color);
910-
}
911-
912-
.example-wrap.digits-1 [data-nosnippet] {
883+
.example-wrap.digits-1:not(.hide-lines) [data-nosnippet] {
913884
width: calc(1ch + var(--line-number-padding) * 2);
914885
}
915-
.example-wrap.digits-2 [data-nosnippet] {
886+
.example-wrap.digits-2:not(.hide-lines) [data-nosnippet] {
916887
width: calc(2ch + var(--line-number-padding) * 2);
917888
}
918-
.example-wrap.digits-3 [data-nosnippet] {
889+
.example-wrap.digits-3:not(.hide-lines) [data-nosnippet] {
919890
width: calc(3ch + var(--line-number-padding) * 2);
920891
}
921-
.example-wrap.digits-4 [data-nosnippet] {
892+
.example-wrap.digits-4:not(.hide-lines) [data-nosnippet] {
922893
width: calc(4ch + var(--line-number-padding) * 2);
923894
}
924-
.example-wrap.digits-5 [data-nosnippet] {
895+
.example-wrap.digits-5:not(.hide-lines) [data-nosnippet] {
925896
width: calc(5ch + var(--line-number-padding) * 2);
926897
}
927-
.example-wrap.digits-6 [data-nosnippet] {
898+
.example-wrap.digits-6:not(.hide-lines) [data-nosnippet] {
928899
width: calc(6ch + var(--line-number-padding) * 2);
929900
}
930-
.example-wrap.digits-7 [data-nosnippet] {
901+
.example-wrap.digits-7:not(.hide-lines) [data-nosnippet] {
931902
width: calc(7ch + var(--line-number-padding) * 2);
932903
}
933-
.example-wrap.digits-8 [data-nosnippet] {
904+
.example-wrap.digits-8:not(.hide-lines) [data-nosnippet] {
934905
width: calc(8ch + var(--line-number-padding) * 2);
935906
}
936-
.example-wrap.digits-9 [data-nosnippet] {
907+
.example-wrap.digits-9:not(.hide-lines) [data-nosnippet] {
937908
width: calc(9ch + var(--line-number-padding) * 2);
938909
}
939910

940911
.example-wrap [data-nosnippet] {
941912
color: var(--src-line-numbers-span-color);
942913
text-align: right;
943914
display: inline-block;
944-
margin-right: 20px;
915+
margin-right: var(--line-number-right-margin);
945916
-moz-user-select: none;
946917
-webkit-user-select: none;
947918
-ms-user-select: none;
948919
user-select: none;
949-
padding: 0 4px;
920+
padding: 0 var(--line-number-padding);
950921
}
951922
.example-wrap [data-nosnippet]:target {
952923
border-right: none;
953924
}
954925
.example-wrap .line-highlighted[data-nosnippet] {
955926
background-color: var(--src-line-number-highlighted-background-color);
956927
}
928+
:root.wrap-source-code .example-wrap [data-nosnippet] {
929+
position: absolute;
930+
left: 0;
931+
}
932+
.wrap-source-code .example-wrap pre > code {
933+
position: relative;
934+
word-break: break-all;
935+
}
936+
:root.wrap-source-code .example-wrap pre > code {
937+
display: block;
938+
white-space: pre-wrap;
939+
}
940+
:root.wrap-source-code .example-wrap pre > code * {
941+
word-break: break-all;
942+
}
943+
:root.wrap-source-code .example-wrap.digits-1 pre > code {
944+
padding-left: calc(
945+
1ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
946+
}
947+
:root.wrap-source-code .example-wrap.digits-2 pre > code {
948+
padding-left: calc(
949+
2ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
950+
}
951+
:root.wrap-source-code .example-wrap.digits-3 pre > code {
952+
padding-left: calc(
953+
3ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
954+
}
955+
:root.wrap-source-code .example-wrap.digits-4 pre > code {
956+
padding-left: calc(
957+
4ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
958+
}
959+
:root.wrap-source-code .example-wrap.digits-5 pre > code {
960+
padding-left: calc(
961+
5ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
962+
}
963+
:root.wrap-source-code .example-wrap.digits-6 pre > code {
964+
padding-left: calc(
965+
6ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
966+
}
967+
:root.wrap-source-code .example-wrap.digits-7 pre > code {
968+
padding-left: calc(
969+
7ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
970+
}
971+
:root.wrap-source-code .example-wrap.digits-8 pre > code {
972+
padding-left: calc(
973+
8ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
974+
}
975+
:root.wrap-source-code .example-wrap.digits-9 pre > code {
976+
padding-left: calc(
977+
9ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
978+
}
979+
.example-wrap.hide-lines [data-nosnippet] {
980+
display: none;
981+
}
957982

958983
.search-loading {
959984
text-align: center;

‎src/librustdoc/html/static/js/main.js

+15-20
Original file line numberDiff line numberDiff line change
@@ -1112,35 +1112,30 @@ function preLoadCss(cssUrl) {
11121112

11131113
// @ts-expect-error
11141114
window.rustdoc_add_line_numbers_to_examples = () => {
1115-
if (document.querySelector(".rustdoc.src")) {
1116-
// We are in the source code page, nothing to be done here!
1117-
return;
1115+
function generateLine(nb) {
1116+
return `<span data-nosnippet>${nb}</span>`;
11181117
}
1118+
11191119
onEachLazy(document.querySelectorAll(
1120-
":not(.scraped-example) > .example-wrap > pre:not(.example-line-numbers)",
1121-
), x => {
1122-
const parent = x.parentNode;
1123-
const line_numbers = parent.querySelectorAll(".example-line-numbers");
1124-
if (line_numbers.length > 0) {
1120+
".rustdoc:not(.src) :not(.scraped-example) > .example-wrap > pre > code",
1121+
), code => {
1122+
if (hasClass(code.parentElement.parentElement, "hide-lines")) {
1123+
removeClass(code.parentElement.parentElement, "hide-lines");
11251124
return;
11261125
}
1127-
const count = x.textContent.split("\n").length;
1128-
const elems = [];
1129-
for (let i = 0; i < count; ++i) {
1130-
elems.push(i + 1);
1131-
}
1132-
const node = document.createElement("pre");
1133-
addClass(node, "example-line-numbers");
1134-
node.innerHTML = elems.join("\n");
1135-
parent.insertBefore(node, x);
1126+
const lines = code.innerHTML.split("\n");
1127+
const digits = (lines.length + "").length;
1128+
code.innerHTML = lines.map((line, index) => generateLine(index + 1) + line).join("\n");
1129+
addClass(code.parentElement.parentElement, `digits-${digits}`);
11361130
});
11371131
};
11381132

11391133
// @ts-expect-error
11401134
window.rustdoc_remove_line_numbers_from_examples = () => {
1141-
onEachLazy(document.querySelectorAll(".example-wrap > .example-line-numbers"), x => {
1142-
x.parentNode.removeChild(x);
1143-
});
1135+
onEachLazy(
1136+
document.querySelectorAll(".rustdoc:not(.src) :not(.scraped-example) > .example-wrap"),
1137+
x => addClass(x, "hide-lines"),
1138+
);
11441139
};
11451140

11461141
if (getSettingValue("line-numbers") === "true") {

‎src/librustdoc/html/static/js/settings.js

+13
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,14 @@
5959
} else {
6060
removeClass(document.documentElement, "sans-serif");
6161
}
62+
break;
63+
case "wrap-source-code":
64+
if (value === true) {
65+
addClass(document.documentElement, "wrap-source-code");
66+
} else {
67+
removeClass(document.documentElement, "wrap-source-code");
68+
}
69+
break;
6270
}
6371
}
6472

@@ -246,6 +254,11 @@
246254
"js_name": "sans-serif-fonts",
247255
"default": false,
248256
},
257+
{
258+
"name": "Wrap source codes",
259+
"js_name": "wrap-source-code",
260+
"default": false,
261+
},
249262
];
250263

251264
// Then we build the DOM.

‎src/librustdoc/html/static/js/storage.js

+3
Original file line numberDiff line numberDiff line change
@@ -286,6 +286,9 @@ if (getSettingValue("hide-modnav") === "true") {
286286
if (getSettingValue("sans-serif-fonts") === "true") {
287287
addClass(document.documentElement, "sans-serif");
288288
}
289+
if (getSettingValue("wrap-source-code") === "true") {
290+
addClass(document.documentElement, "wrap-source-code");
291+
}
289292
function updateSidebarWidth() {
290293
const desktopSidebarWidth = getSettingValue("desktop-sidebar-width");
291294
if (desktopSidebarWidth && desktopSidebarWidth !== "null") {

0 commit comments

Comments
 (0)