Code blocks with syntax highlight

Author: MarcoDaniels

elm.json

@@ -17,7 +17,9 @@
       "elm/core": "1.0.5",
       "elm/html": "1.0.0",
       "elm/json": "1.1.3",
+      "elm/time": "1.0.0",
       "elm/url": "1.0.0",
+      "pablohirafuji/elm-syntax-highlight": "3.4.1",
       "rtfeldman/elm-css": "17.0.5"
     },
     "indirect": {
@@ -34,7 +36,6 @@
       "elm/project-metadata-utils": "1.0.2",
       "elm/random": "1.0.0",
       "elm/regex": "1.0.0",
-      "elm/time": "1.0.0",
       "elm/virtual-dom": "1.0.2",
       "elm-community/dict-extra": "2.4.0",
       "elm-community/list-extra": "8.5.2",

public/style.css

@@ -0,0 +1,17 @@
+pre.elmsh {
+    padding: 10px 2px;
+    margin: 0;
+    text-align: left;
+    overflow-x: scroll;
+}
+code.elmsh {
+    padding: 0;
+}
+.elmsh-line:before {
+    content: attr(data-elmsh-lc);
+    display: inline-block;
+    text-align: right;
+    width: 15px;
+    padding: 0 15px 0 0;
+    opacity: 0.3;
+}

src/Comic.elm

@@ -43,8 +43,8 @@ shelf =
         , Css.margin <| Css.px 0
         , Css.fontFamilies [ "Verdana, sans-serif" ]
         , Css.lineHeight <| Css.rem 1.5
-        , Css.maxWidth <| Css.px 900
-        , Css.width <| Css.pct 100
+        , Css.maxWidth <| Css.pct 100
+        , Css.width <| Css.px 900
         , Css.margin2 (Css.px 0) Css.auto
         ]
 
@@ -65,8 +65,8 @@ book =
                 ]
     in
     Css.batch
-        [ Css.maxWidth <| Css.px 800
-        , Css.width <| Css.pct 100
+        [ Css.maxWidth <| Css.pct 100
+        , Css.width <| Css.px 800
         , Css.position Css.relative
         , Css.margin3 (Css.px 40) Css.auto (Css.px 0)
         , Css.boxShadow5 (Css.px 0) (Css.px 6) (Css.px 6) (Css.px -6) color.shadow
@@ -139,6 +139,7 @@ panel =
         , Css.backgroundColor color.page
         , Css.color color.ink
         , font.small
+        , Css.maxWidth <| Css.vw 83
         ]
 
 

src/Data.elm

@@ -5,7 +5,7 @@ import Cockpit exposing (Cockpit(..), fetchData)
 import Comic
 import Css
 import DataSource exposing (DataSource)
-import Html.Styled as Html
+import Html.Styled as Html exposing (fromUnstyled)
 import Html.Styled.Attributes as Html
 import Markdown.Block as Block
 import Markdown.Html
@@ -15,6 +15,7 @@ import OptimizedDecoder as Decoder exposing (Decoder)
 import OptimizedDecoder.Pipeline as Decoder
 import Render
 import SPLAT exposing (fromURL, toURL)
+import SyntaxHighlight
 
 
 type alias Entries =
@@ -222,7 +223,11 @@ markdownToHTML raw =
             , strong = \children -> Html.strong [] children
             , emphasis = \children -> Html.em [] children
             , strikethrough = \children -> Html.del [] children
-            , codeSpan = \content -> Html.code [ Html.css [ Comic.font.extraSmall ] ] [ Html.text content ]
+            , codeSpan =
+                \content ->
+                    Html.code
+                        [ Html.css [ Comic.font.extraSmall ] ]
+                        [ Html.text content ]
             , image = \_ -> Html.div [] []
             , text = Html.text
             , orderedList =
@@ -241,7 +246,17 @@ markdownToHTML raw =
                                 )
                         )
             , html = Markdown.Html.oneOf []
-            , codeBlock = \_ -> Html.div [] []
+            , codeBlock =
+                \{ body } ->
+                    Html.div [ Html.css [ Comic.font.extraSmall ] ]
+                        [ SyntaxHighlight.useTheme SyntaxHighlight.oneDark
+                            |> fromUnstyled
+                        , SyntaxHighlight.elm body
+                            |> Result.map (SyntaxHighlight.toBlockHtml (Just 1))
+                            |> Result.map fromUnstyled
+                            |> Result.withDefault
+                                (Html.pre [] [ Html.code [] [ Html.text body ] ])
+                        ]
             , thematicBreak = Html.hr [] []
             , table = Html.table []
             , tableHeader = Html.thead []