Replace highlight.js with static highlighting using Pandoc

Co-authored-by: tauomicronmu <[email protected]>

Author: isomorpheme

message-index/css/highlight.css

@@ -1,13 +1,46 @@
-pre code.hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 1em
+/* This is based on the output of running Pandoc with the `--standalone` flag and
+ * `--highlight-style pygments`, with hardcoded colors replaced with CSS
+ * variables.
+ *
+ * The names referred to in the comments are from: https://docs.kde.org/trunk5/en/kate/katepart/highlight.html
+ * (See header "Available Default Styles".)
+ */
+div.sourceCode {
+  color: var(--code-color);
+  background: var(--code-bg-color);
 }
 
-code.hljs {
-  padding: 3px 5px
-}
+code span.al { color: var(); font-weight: bold; } /* Alert */
+code span.an { color: var(--code-comment-color); font-weight: bold; font-style: italic; } /* Annotation */
+code span.at { color: var(--code-pragma-color); } /* Attribute */
+code span.bn { color: var(--code-literal-color); } /* BaseN */
+code span.bu { color: var(--code-name-color); } /* BuiltIn */
+code span.cf { color: var(--code-kw-color); font-weight: bold; } /* ControlFlow */
+code span.ch { color: var(--code-literal-color); } /* Char */
+code span.cn { color: var(--code-symbol-color); } /* Constant */
+code span.co { color: var(--code-comment-color); font-style: italic; } /* Comment */
+code span.cv { color: var(--code-comment-color); font-weight: bold; font-style: italic; } /* CommentVar */
+code span.do { color: var(--code-comment-color); font-style: italic; } /* Documentation */
+code span.dt { color: var(--code-constructor-color); } /* DataType */
+code span.dv { color: var(--code-literal-color); } /* DecVal */
+code span.er { color: var(); font-weight: bold; } /* Error */
+code span.ex { } /* Extension */
+code span.fl { color: var(--code-literal-color); } /* Float */
+code span.fu { color: var(--code-color); } /* Function */
+code span.im { color: var(--code-kw-color); font-weight: bold; } /* Import */
+code span.in { color: var(); font-weight: bold; font-style: italic; } /* Information */
+code span.kw { color: var(--code-kw-color); font-weight: bold; } /* Keyword */
+code span.op { color: var(--code-symbol-color); } /* Operator */
+code span.ot { color: var(--code-color); } /* Other */
+code span.pp { color: var(--code-comment-color); } /* Preprocessor */
+code span.sc { color: var(--code-literal-color); } /* SpecialChar */
+code span.ss { color: var(--code-string-color); } /* SpecialString */
+code span.st { color: var(--code-string-color); } /* String */
+code span.va { color: var(--code-attr-color); } /* Variable */
+code span.vs { color: var(--code-string-color); } /* VerbatimString */
+code span.wa { color: var(); font-weight: bold; font-style: italic; } /* Warning */
 
+/*
 .hljs {
   color: var(--code-color);
   background: var(--code-bg-color);
@@ -65,3 +98,5 @@ code.hljs {
 .hljs-link {
   text-decoration: underline
 }
+
+*/

message-index/message-index.cabal

@@ -12,6 +12,7 @@ executable site
                   , microlens ^>= 0.4.12
                   , binary ^>= 0.8.8
                   , aeson ^>= 2.0.3 || ^>= 2.1
+                  , pandoc ^>= 3.1.3
                   , pandoc-types ^>= 1.22 || ^>= 1.23
                   , containers ^>= 0.6
                   , text ^>= 1.2 || ^>= 2.0

message-index/site.hs

@@ -22,7 +22,8 @@ import Hakyll
 import Lens.Micro (_1, _2, _3)
 import Lens.Micro.Extras (view)
 import System.FilePath
-import Text.Pandoc.Definition (Meta (..), MetaValue (..), Pandoc (..))
+import qualified Text.Pandoc as Pandoc
+import qualified Text.Pandoc.Definition as Pandoc
 
 main :: IO ()
 main = hakyll $ do
@@ -76,13 +77,9 @@ main = hakyll $ do
                   ( mconcat
                       [ indexlessUrlField "url",
                         field "name" (pure . view _1 . itemBody),
-                        -- Set the language that highlight.js should use for syntax highlighting
-                        field "language" $ \(itemBody -> (filename, _, _)) ->
-                          pure $ case dropWhile (== '.') $ takeExtension filename of
-                            "hs" -> "haskell"
-                            other -> other,
-                        field "before" (maybe (pure "<not present>") (fmap itemBody . load . itemIdentifier) . view _2 . itemBody),
-                        field "after" (maybe (pure "<not present>") (fmap itemBody . load . itemIdentifier) . view _3 . itemBody)
+                        -- TODO: pick the right language
+                        field "beforeHighlighted" (maybe (pure "<not present>") (fmap (T.unpack . highlight "haskell" . T.pack) . fmap itemBody . load . itemIdentifier) . view _2 . itemBody),
+                        field "afterHighlighted" (maybe (pure "<not present>") (fmap (T.unpack . highlight "haskell" . T.pack) . fmap itemBody . load . itemIdentifier) . view _3 . itemBody)
                       ]
                   )
                   (return files),
@@ -287,3 +284,13 @@ indexless url
   where
     lru = reverse url
     toDrop = "index.html"
+
+highlight :: T.Text -> T.Text -> T.Text
+highlight language code =
+  let writerOptions = Pandoc.def
+      -- We make a fake Pandoc document that's just the code embedded in a code block.
+      document =
+        Pandoc.Pandoc mempty [Pandoc.CodeBlock ("", [language], []) code]
+   in case Pandoc.runPure $ Pandoc.writeHtml5String writerOptions document of
+        Left err -> error $ "Unexpected Pandoc error: " ++ show err
+        Right html -> html

message-index/templates/default.html

@@ -8,7 +8,6 @@
   <meta name="robots" content="noindex">
   <title>$title$ — Haskell Error Index</title>
   <link rel="stylesheet" href="/css/highlight.css">
-  <script src="/js/highlight.min.js"></script>
   <link rel="stylesheet" href="/css/default.css" />
   <link rel="stylesheet" href="/css/theme.css" />
 </head>
@@ -35,10 +34,6 @@ <h1>$title$</h1>
       <a href="http://jaspervdj.be/hakyll" target="_blank" rel="noopener noreferrer">Hakyll</a>
     </p>
   </footer>
-
-  <script>document.querySelectorAll('code.language-haskell').forEach(el => {
-      hljs.highlightElement(el);
-    });</script>
 </body>
 
 </html>

message-index/templates/example.html

@@ -5,15 +5,13 @@
   <div class="example">
     <div class="example-inner">
       <div class="example-title">Before</div>
-      <!-- keep next line as is, i.e., on one line, or the code will not format properly -->
-      <pre class="example-pre"><code class="language-$language$">$before$</code></pre>
+      $beforeHighlighted$
     </div>
   </div>
   <div class="example">
     <div class="example-inner">
       <div class="example-title">After</div>
-      <!-- keep next line as is, i.e., on one line, or the code will not format propertly -->
-      <pre class="example-pre"><code class="language-$language$">$after$</code></pre>
+      $afterHighlighted$
     </div>
   </div>
 </div>