Add highlight.js, Accordion, Tabs example.

Author: dmjio

app/Main.hs

@@ -56,9 +56,12 @@ main = run $ withJS $ startComponent app
 #ifndef WASM
   { styles =
       [ Href "/assets/styles.css"
+      , Href "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css"
       ]
   , scripts =
-      [ Src "https://cdn.jsdelivr.net/npm/basecoat-css@0.3.5/dist/js/basecoat.min.js"
+      [ Src "https://cdn.jsdelivr.net/npm/basecoat-css@0.3.6/dist/js/basecoat.min.js"
+      , Src "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"
+      , Src "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/haskell.min.js"
       , Script
         """
         (() => {
@@ -109,6 +112,10 @@ app = component emptyModel update_ homeView
           dispatchEvent (Event event)
       ToggleDarkMode ->
         io_ toggleDarkMode
+      Highlight domRef -> io_ $ void $ do
+        consoleLog "I'm in here highlighting stuff"
+        hljs <- global ! ("hljs" :: MisoString)
+        hljs # ("highlightElement" :: MisoString) $ [domRef]
       ChangeTheme theme -> do
         io_ $ do
           void $ eval ("""
@@ -295,7 +302,6 @@ topSection = div_
                     ]
                 ]
         ]
-
 -----------------------------------------------------------------------------
 mainContent :: View Model Action
 mainContent = div_