Edit markdown (#91)

* Use custom elements for highlight.js

* Remove extraneous highlight call

Author: joshuanianji

index.ts

@@ -38,15 +38,46 @@ const config: ElmPagesInit = {
             })
             console.log('Added event listener for mousemove homepage')
         }
-
-        app.ports.highlightJS.subscribe(function (message) {
-            console.log('Highlighting code blocks')
-            hljs.highlightAll();
-        });
     },
     flags: function () {
         return "You can decode this in Shared.elm using Json.Decode.string!";
     },
 };
 
+// Highlight.js editing the DOM doesn't work well with Elm
+// custom elements work better since it is not managed by Elm
+// I tried using web components (custom elements with Shadow DOM)
+// but it was too tricky getting the shadow DOM to import the highlight.js CSS from the main DOM
+customElements.define('highlightjs-code',
+    class extends HTMLElement {
+        codeElem: HTMLElement;
+
+        constructor() {
+            super();
+            console.log('highlightjs-code created', this.codeElem)
+        }
+        connectedCallback() { this.setTextContent(); }
+        attributeChangedCallback() { this.setTextContent(); }
+        static get observedAttributes() { return ['lang', 'code']; }
+
+        // Our function to set the textContent based on attributes.
+        setTextContent() {
+            const lang = this.getAttribute('lang') || 'plaintext';
+            const code = this.getAttribute('code') || '';
+            const hljsVal = hljs.highlight(code, { language: lang });
+            console.log(hljsVal)
+            this.innerHTML = `
+            <style>
+                code {
+                    border-radius: 0.5em;
+                    font-size: 0.75em;
+                }
+            </style>
+            <pre><code class="hljs language-${lang}">${hljsVal.value}</code></pre>
+            `
+        }
+    }
+);
+
+
 export default config;

src/MarkdownRenderer.elm

@@ -1,6 +1,7 @@
 module MarkdownRenderer exposing (renderer)
 
 import Css exposing (..)
+import Html.Attributes
 import Html.Styled as Html
 import Html.Styled.Attributes as Attr exposing (css)
 import Markdown.Block as Block
@@ -242,16 +243,48 @@ codeBlock details =
     let
         lang =
             details.language
-                |> Maybe.map (\l -> "lang-" ++ String.toLower l)
                 |> Maybe.withDefault "nohighlight"
     in
-    Html.pre []
-        [ Html.code
-            [ Attr.class lang
-            , css
-                [ borderRadius (em 0.5)
-                , fontSize (em 0.75)
-                ]
-            ]
-            [ Html.text details.body ]
+    Html.node
+        "highlightjs-code"
+        [ Attr.attribute "lang" lang
+        , Attr.attribute "code" details.body
         ]
+        []
+
+
+
+-- Html.pre
+--     []
+--     [ Html.code
+--         [ Attr.class lang
+--         , css
+--             [ borderRadius (em 0.5)
+--             , fontSize (em 0.75)
+--             ]
+--         ]
+--         [ Html.node
+--             "highlightjs-code"
+--             [ Attr.attribute "lang" lang
+--             , Attr.attribute "code" details.body
+--             ]
+--             []
+--         ]
+--     ]
+-- Html.node
+--     "highlightjs-code"
+--     [ Attr.attribute "lang" lang
+--     , Attr.attribute "code" details.body
+--     ]
+--     []
+-- Html.pre
+--     []
+--     [ Html.code
+--         [ Attr.class lang
+--         , css
+--             [ borderRadius (em 0.5)
+--             , fontSize (em 0.75)
+--             ]
+--         ]
+--         [ Html.text details.body ]
+--     ]