FossilRepo
Fix per-line hljs background boxes in code browser
Commit
1f367243b5a57fb1518814d5f5c035889c68c6e27e6292a659d2325c8c1afc88
Parent
10e3c53ae044b0a…
1 file changed
+4
-2
+4
-2
| --- templates/base.html | ||
| +++ templates/base.html | ||
| @@ -133,12 +133,14 @@ | ||
| 133 | 133 | /* Selected/hover rows — matches admin --selected-bg */ |
| 134 | 134 | html:not(.dark) main .group:hover { border-color: #DC394C !important; } |
| 135 | 135 | </style> |
| 136 | 136 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css"> |
| 137 | 137 | <style> |
| 138 | - /* highlight.js github-dark adds backgrounds to some token types (e.g. Makefile | |
| 139 | - targets via hljs-section) that create unwanted boxes on our dark background. */ | |
| 138 | + /* highlight.js github-dark sets a dark background on .hljs code blocks. Since | |
| 139 | + our code viewer renders each line as its own <code class="hljs"> element, | |
| 140 | + this creates individual dark boxes per line. We own the background already. */ | |
| 141 | + .hljs { background: transparent !important; } | |
| 140 | 142 | .hljs-section, .hljs-keyword { background: transparent !important; } |
| 141 | 143 | </style> |
| 142 | 144 | <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> |
| 143 | 145 | <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.1.6/purify.min.js"></script> |
| 144 | 146 | <script src="https://unpkg.com/[email protected]"></script> |
| 145 | 147 |
| --- templates/base.html | |
| +++ templates/base.html | |
| @@ -133,12 +133,14 @@ | |
| 133 | /* Selected/hover rows — matches admin --selected-bg */ |
| 134 | html:not(.dark) main .group:hover { border-color: #DC394C !important; } |
| 135 | </style> |
| 136 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css"> |
| 137 | <style> |
| 138 | /* highlight.js github-dark adds backgrounds to some token types (e.g. Makefile |
| 139 | targets via hljs-section) that create unwanted boxes on our dark background. */ |
| 140 | .hljs-section, .hljs-keyword { background: transparent !important; } |
| 141 | </style> |
| 142 | <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> |
| 143 | <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.1.6/purify.min.js"></script> |
| 144 | <script src="https://unpkg.com/[email protected]"></script> |
| 145 |
| --- templates/base.html | |
| +++ templates/base.html | |
| @@ -133,12 +133,14 @@ | |
| 133 | /* Selected/hover rows — matches admin --selected-bg */ |
| 134 | html:not(.dark) main .group:hover { border-color: #DC394C !important; } |
| 135 | </style> |
| 136 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css"> |
| 137 | <style> |
| 138 | /* highlight.js github-dark sets a dark background on .hljs code blocks. Since |
| 139 | our code viewer renders each line as its own <code class="hljs"> element, |
| 140 | this creates individual dark boxes per line. We own the background already. */ |
| 141 | .hljs { background: transparent !important; } |
| 142 | .hljs-section, .hljs-keyword { background: transparent !important; } |
| 143 | </style> |
| 144 | <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> |
| 145 | <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.1.6/purify.min.js"></script> |
| 146 | <script src="https://unpkg.com/[email protected]"></script> |
| 147 |