Skip to content

Commit e7751df

Browse files
NetdocsCopilot
andcommitted
Improve code-block highlighting: legible hl_lines + more languages
- hl_lines rows used the SOLID --md-code-hl-color as their background, washing out the syntax-colored tokens. Switch to Material's approach: the translucent --md-code-hl-color--light tint plus a solid left accent bar (inset box-shadow), keeping token text fully readable. - highlight.min.js only bundles the "common" language set, so infra languages rendered as plain text. Register the major extras a homelab docs audience needs: powershell, dockerfile, nginx, apache, http, dns, properties, dart, scala, x86asm. - Give the title/filename bar a subtle contrast tint against the code bg. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent c6f6474 commit e7751df

1 file changed

Lines changed: 22 additions & 3 deletions

File tree

src/Netdocs.Theme.Material/templates/partials/highlight.html

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
.md-typeset .highlight code.hljs { background: transparent; padding: 0; }
44
.md-typeset .highlight > .filename {
55
display: block; font-size: .85em; font-weight: 700; padding: .5em 1em;
6-
background: var(--md-code-bg-color); border-bottom: .05rem solid var(--md-default-fg-color--lightest);
6+
background: color-mix(in srgb, var(--md-code-bg-color) 100%, var(--md-default-fg-color) 6%);
7+
border-bottom: .05rem solid var(--md-default-fg-color--lightest);
78
}
89
/* Line numbers (highlightjs-line-numbers.js) styled to match Material. */
910
.md-typeset .hljs-ln { border-collapse: collapse; }
@@ -19,8 +20,13 @@
1920
anchor row highlighting, but the gutter itself must stay hidden. */
2021
.md-typeset code.nd-hide-linenums .hljs-ln-numbers { display: none; }
2122
.md-typeset code.nd-hide-linenums .hljs-ln-code { padding-left: 0 !important; }
22-
/* hl_lines highlight */
23-
.md-typeset .hljs-ln tr.hl-line { background: var(--md-code-hl-color, rgba(255, 235, 59, .18)); }
23+
/* hl_lines highlight — a faint tinted background plus a solid left accent bar,
24+
matching Material's own `.hll`. Using the SOLID accent as the row background
25+
washed out the syntax-colored tokens, so use the translucent `--light` tint. */
26+
.md-typeset .hljs-ln tr.hl-line {
27+
background: var(--md-code-hl-color--light, rgba(66, 135, 255, .1));
28+
box-shadow: 2px 0 0 0 var(--md-code-hl-color, #4287ff) inset;
29+
}
2430
/* Inline code highlighting is colored by hljs like block code. */
2531
.md-typeset code.hljs { padding: 0 .2941176471em; }
2632

@@ -66,6 +72,19 @@
6672
.md-typeset .hljs-strong { font-weight: 700; }
6773
</style>
6874
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.10.0/build/highlight.min.js"></script>
75+
<!-- highlight.min.js only bundles the "common" language set. Register the extra
76+
major languages a homelab/infra docs site relies on so nothing renders as
77+
plain text (PowerShell, Dockerfile, nginx, HTTP, YAML frontmatter, etc.). -->
78+
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.10.0/build/languages/powershell.min.js"></script>
79+
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.10.0/build/languages/dockerfile.min.js"></script>
80+
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.10.0/build/languages/nginx.min.js"></script>
81+
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.10.0/build/languages/apache.min.js"></script>
82+
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.10.0/build/languages/http.min.js"></script>
83+
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.10.0/build/languages/dns.min.js"></script>
84+
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.10.0/build/languages/properties.min.js"></script>
85+
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.10.0/build/languages/dart.min.js"></script>
86+
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.10.0/build/languages/scala.min.js"></script>
87+
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.10.0/build/languages/x86asm.min.js"></script>
6988
<script src="https://cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.9.0/dist/highlightjs-line-numbers.min.js"></script>
7089
<script>
7190
(function () {

0 commit comments

Comments
 (0)