feat: syntax highlight in Example block

frontend/elm-srcs.nix

@@ -55,6 +55,11 @@
         version = "1.0.1";
       };
 
+      "pablohirafuji/elm-syntax-highlight" = {
+        sha256 = "0yadpqbq9nbmhzaasvcdcn4c1yak1v0xalx4126akvffic531gq9";
+        version = "3.6.0";
+      };
+
       "truqu/elm-base64" = {
         sha256 = "12w68b4idbs2vn0gm0lj354pm745jb7n0fj69408mpvh5r1z4m1b";
         version = "2.0.4";

frontend/elm.json

@@ -17,6 +17,7 @@
             "hecrj/html-parser": "2.3.4",
             "krisajenkins/remotedata": "6.0.1",
             "leojpod/elm-keyboard-shortcut": "1.0.1",
+            "pablohirafuji/elm-syntax-highlight": "3.6.0",
             "truqu/elm-base64": "2.0.4"
         },
         "indirect": {

frontend/src/Page/Options.elm

@@ -50,6 +50,7 @@ import Search
         , decodeResolvedFlake
         )
 import Utils
+import SyntaxHighlight exposing (useTheme, oneDark, elm, toBlockHtml)
 
 
 
@@ -189,6 +190,15 @@ viewResultItem nixosChannels channel _ show item =
 
         asPreCode value =
             div [] [ pre [] [ code [ class "code-block" ] [ text value ] ] ]
+
+        asHighlightPreCode value =
+            div [] 
+                [ useTheme oneDark
+                , elm value
+                    |> Result.map (toBlockHtml (Just 1))
+                    |> Result.withDefault
+                    (pre [] [ code [ class "code-block" ] [ text value ]])
+                ]
 
         showDetails =
             if Just item.source.name == show then
@@ -229,7 +239,7 @@ viewResultItem nixosChannels channel _ show item =
                                     |> Maybe.map
                                         (\example ->
                                             [ div [] [ text "Example" ]
-                                            , div [] <| Maybe.withDefault [ asPreCode example ] (Utils.showHtml example)
+                                            , div [] <| Maybe.withDefault [ asHighlightPreCode example ] (Utils.showHtml example)
                                             ]
                                         )
                                     |> Maybe.withDefault []

frontend/src/index.scss

@@ -414,7 +414,7 @@ body {
   }
 }
 
-.code-block,.sourceCode {
+.code-block,.sourceCode,.elmsh > code {
   display: block;
   cursor: text;
 }