Skip to content

Commit 3eab4ff

Browse files
isomorphemeTauOmicronMu
isomorpheme
and
TauOmicronMu
committed
Replace highlight.js with static highlighting using Pandoc
Co-authored-by: tauomicronmu <[email protected]>
1 parent c0e1b7b commit 3eab4ff

File tree

5 files changed

+55
-80
lines changed

5 files changed

+55
-80
lines changed

‎message-index/css/highlight.css

Lines changed: 37 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,41 @@
1-
pre code.hljs {
2-
display: block;
3-
overflow-x: auto;
4-
padding: 1em
5-
}
6-
7-
code.hljs {
8-
padding: 3px 5px
9-
}
10-
11-
.hljs {
1+
/* This is based on the output of running Pandoc with the `--standalone` flag and
2+
* `--highlight-style pygments`, with hardcoded colors replaced with CSS
3+
* variables.
4+
*
5+
* The names referred to in the comments are from: https://docs.kde.org/trunk5/en/kate/katepart/highlight.html
6+
* (See header "Available Default Styles".)
7+
*/
8+
div.sourceCode {
129
color: var(--code-color);
1310
background: var(--code-bg-color);
1411
}
1512

16-
.hljs-comment, .hljs-quote {
17-
color: var(--code-comment-color);
18-
font-style: italic
19-
}
20-
21-
.hljs-doctag, .hljs-formula, .hljs-keyword {
22-
color: var(--code-kw-color);
23-
}
24-
25-
.hljs-deletion, .hljs-name, .hljs-section, .hljs-selector-tag, .hljs-subst {
26-
color: var(--code-name-color);
27-
}
28-
29-
.hljs-literal, .hljs-number {
30-
color: var(--code-literal-color);
31-
}
32-
33-
.hljs-addition, .hljs-attribute, .hljs-meta .hljs-string, .hljs-regexp, .hljs-string {
34-
color: var(--code-string-color);
35-
}
36-
37-
.hljs-type {
38-
color: var(--code-constructor-color);
39-
}
40-
41-
.hljs-attr, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-pseudo, .hljs-template-variable, .hljs-variable {
42-
color: var(--code-attr-color);
43-
}
44-
45-
.hljs-meta {
46-
color: var(--code-pragma-color);
47-
}
48-
49-
.hljs-bullet, .hljs-link, .hljs-selector-id, .hljs-symbol, .hljs-title {
50-
color: var(--code-symbol-color);
51-
}
52-
53-
.hljs-built_in, .hljs-class .hljs-title, .hljs-title.class_ {
54-
color: var(--record-field-color);
55-
}
56-
57-
.hljs-emphasis {
58-
font-style: italic
59-
}
60-
61-
.hljs-strong {
62-
font-weight: 700
63-
}
64-
65-
.hljs-link {
66-
text-decoration: underline
67-
}
13+
code span.al { color: var(); font-weight: bold; } /* Alert */
14+
code span.an { color: var(--code-comment-color); font-weight: bold; font-style: italic; } /* Annotation */
15+
code span.at { color: var(--code-pragma-color); } /* Attribute */
16+
code span.bn { color: var(--code-literal-color); } /* BaseN */
17+
code span.bu { color: var(--code-name-color); } /* BuiltIn */
18+
code span.cf { color: var(--code-kw-color); font-weight: bold; } /* ControlFlow */
19+
code span.ch { color: var(--code-literal-color); } /* Char */
20+
code span.cn { color: var(--code-symbol-color); } /* Constant */
21+
code span.co { color: var(--code-comment-color); font-style: italic; } /* Comment */
22+
code span.cv { color: var(--code-comment-color); font-weight: bold; font-style: italic; } /* CommentVar */
23+
code span.do { color: var(--code-comment-color); font-style: italic; } /* Documentation */
24+
code span.dt { color: var(--code-constructor-color); } /* DataType */
25+
code span.dv { color: var(--code-literal-color); } /* DecVal */
26+
code span.er { color: var(); font-weight: bold; } /* Error */
27+
code span.ex { } /* Extension */
28+
code span.fl { color: var(--code-literal-color); } /* Float */
29+
code span.fu { color: var(--code-color); } /* Function */
30+
code span.im { color: var(--code-kw-color); font-weight: bold; } /* Import */
31+
code span.in { color: var(); font-weight: bold; font-style: italic; } /* Information */
32+
code span.kw { color: var(--code-kw-color); font-weight: bold; } /* Keyword */
33+
code span.op { color: var(--code-symbol-color); } /* Operator */
34+
code span.ot { color: var(--code-color); } /* Other */
35+
code span.pp { color: var(--code-comment-color); } /* Preprocessor */
36+
code span.sc { color: var(--code-literal-color); } /* SpecialChar */
37+
code span.ss { color: var(--code-string-color); } /* SpecialString */
38+
code span.st { color: var(--code-string-color); } /* String */
39+
code span.va { color: var(--code-attr-color); } /* Variable */
40+
code span.vs { color: var(--code-string-color); } /* VerbatimString */
41+
code span.wa { color: var(); font-weight: bold; font-style: italic; } /* Warning */

‎message-index/message-index.cabal

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ executable site
1212
, microlens ^>= 0.4.12
1313
, binary ^>= 0.8.8
1414
, aeson ^>= 2.0.3 || ^>= 2.1
15+
, pandoc ^>= 3.1.3
1516
, pandoc-types ^>= 1.22 || ^>= 1.23
1617
, containers ^>= 0.6
1718
, text ^>= 1.2 || ^>= 2.0

‎message-index/site.hs

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ import Hakyll
2222
import Lens.Micro (_1, _2, _3)
2323
import Lens.Micro.Extras (view)
2424
import System.FilePath
25-
import Text.Pandoc.Definition (Meta (..), MetaValue (..), Pandoc (..))
25+
import qualified Text.Pandoc as Pandoc
26+
import qualified Text.Pandoc.Definition as Pandoc
2627

2728
main :: IO ()
2829
main = hakyll $ do
@@ -76,13 +77,9 @@ main = hakyll $ do
7677
( mconcat
7778
[ indexlessUrlField "url",
7879
field "name" (pure . view _1 . itemBody),
79-
-- Set the language that highlight.js should use for syntax highlighting
80-
field "language" $ \(itemBody -> (filename, _, _)) ->
81-
pure $ case dropWhile (== '.') $ takeExtension filename of
82-
"hs" -> "haskell"
83-
other -> other,
84-
field "before" (maybe (pure "<not present>") (fmap itemBody . load . itemIdentifier) . view _2 . itemBody),
85-
field "after" (maybe (pure "<not present>") (fmap itemBody . load . itemIdentifier) . view _3 . itemBody)
80+
-- TODO: pick the right language
81+
field "beforeHighlighted" (maybe (pure "<not present>") (fmap (T.unpack . highlight "haskell" . T.pack) . fmap itemBody . load . itemIdentifier) . view _2 . itemBody),
82+
field "afterHighlighted" (maybe (pure "<not present>") (fmap (T.unpack . highlight "haskell" . T.pack) . fmap itemBody . load . itemIdentifier) . view _3 . itemBody)
8683
]
8784
)
8885
(return files),
@@ -287,3 +284,13 @@ indexless url
287284
where
288285
lru = reverse url
289286
toDrop = "index.html"
287+
288+
highlight :: T.Text -> T.Text -> T.Text
289+
highlight language code =
290+
let writerOptions = Pandoc.def
291+
-- We make a fake Pandoc document that's just the code embedded in a code block.
292+
document =
293+
Pandoc.Pandoc mempty [Pandoc.CodeBlock ("", [language], []) code]
294+
in case Pandoc.runPure $ Pandoc.writeHtml5String writerOptions document of
295+
Left err -> error $ "Unexpected Pandoc error: " ++ show err
296+
Right html -> html

‎message-index/templates/default.html

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
<meta name="robots" content="noindex">
99
<title>$title$ — Haskell Error Index</title>
1010
<link rel="stylesheet" href="/css/highlight.css">
11-
<script src="/js/highlight.min.js"></script>
1211
<link rel="stylesheet" href="/css/default.css" />
1312
<link rel="stylesheet" href="/css/theme.css" />
1413
</head>
@@ -35,10 +34,6 @@ <h1>$title$</h1>
3534
<a href="http://jaspervdj.be/hakyll" target="_blank" rel="noopener noreferrer">Hakyll</a>
3635
</p>
3736
</footer>
38-
39-
<script>document.querySelectorAll('code.language-haskell').forEach(el => {
40-
hljs.highlightElement(el);
41-
});</script>
4237
</body>
4338

4439
</html>

‎message-index/templates/example.html

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,13 @@
55
<div class="example">
66
<div class="example-inner">
77
<div class="example-title">Before</div>
8-
<!-- keep next line as is, i.e., on one line, or the code will not format properly -->
9-
<pre class="example-pre"><code class="language-$language$">$before$</code></pre>
8+
$beforeHighlighted$
109
</div>
1110
</div>
1211
<div class="example">
1312
<div class="example-inner">
1413
<div class="example-title">After</div>
15-
<!-- keep next line as is, i.e., on one line, or the code will not format propertly -->
16-
<pre class="example-pre"><code class="language-$language$">$after$</code></pre>
14+
$afterHighlighted$
1715
</div>
1816
</div>
1917
</div>

0 commit comments

Comments
 (0)