Merge pull request #12 from vloth/main

feat: Support syntax highlighting
rafaeldelboni · Dec 3, 2021 · 37f68a0 · 37f68a0
2 parents 5ded45a + 9d45f78
commit 37f68a0
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 4 deletions.
diff --git a/resources/public/posts/gfm-syntax.md b/resources/public/posts/gfm-syntax.md
@@ -69,6 +69,7 @@ function fancyAlert(arg) {
   }
 }
 ```
+*(syntax is hilighted using [PrismJs](https://prismjs.com/))*
 
 You can also simply indent your code by four spaces:
 
@@ -78,6 +79,8 @@ You can also simply indent your code by four spaces:
       }
     }
 
+*(Be aware the code won't be highlighted because the language cannot be identified by prism)*
+
 ## Task Lists
 
 - [x] @mentions, #refs, [links](), **formatting**, and <del>tags</del> supported

diff --git a/src/nota/hooks/index.clj b/src/nota/hooks/index.clj
@@ -28,8 +28,9 @@
      [:meta {:charset "utf-8"}]
      [:meta {:http-equiv "x-ua-compatible" :content "ie=edge"}]
      [:meta {:name "viewport" :content "width=device-width, initial-scale=1, maximum-scale=1"}]
-     (for [{:keys [href rel htype]} links]
-       [:link {:rel rel
+     (for [{:keys [id href rel htype]} links]
+       [:link {:id id
+               :rel rel
                :type htype
                :href href}])]
     [:body
@@ -53,10 +54,14 @@
                        :rel "stylesheet"}
                       {:href "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"
                        :rel "stylesheet"}
+                      {:id "prism-theme"
+                       :href "https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-okaidia.min.css"
+                       :rel "stylesheet"}
                       {:href "./css/nota.min.css"
                        :rel "stylesheet"
                        :htype "text/css"}]
-          :scripts   []
+          :scripts   ["https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-core.min.js"
+                      "https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/autoloader/prism-autoloader.min.js"]
           :lang      "en"
           :app-mount :div#app}
          options))

diff --git a/src/nota/ui.cljs b/src/nota/ui.cljs
@@ -3,6 +3,7 @@
             [com.fulcrologic.fulcro.dom :as dom]
             [com.fulcrologic.fulcro.react.hooks :as hooks]
             [com.fulcrologic.fulcro.routing.dynamic-routing :as dr :refer [defrouter]]
+            [goog.string :refer [format]]
             [nota.routing :as routing]
             [nota.ui.icons :as ui.icons]
             [nota.ui.pages :as ui.pages]
@@ -21,9 +22,21 @@
 
 (def ui-top-router (comp/factory TopRouter))
 
+(defn load-prism-theme
+  [theme]
+  (let [prism-theme (.getElementById js/document "prism-theme")
+        new-theme   (if (= theme "dark") "prism-okaidia" "prism")]
+    (.setAttribute
+      prism-theme
+      "href"
+      (format
+        "https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/%s.min.css"
+        new-theme))))
+
 (defn toggle-theme [current-theme hook-change-theme-fn]
   (let [toggled-theme (if (= current-theme "dark") "light" "dark")]
     #(do (hook-change-theme-fn toggled-theme)
+         (load-prism-theme toggled-theme)
          (set! (.. js/document -documentElement -className) toggled-theme))))
 
 (defsc Header [_this {:keys [list-pages]}]

diff --git a/src/nota/ui/posts.cljs b/src/nota/ui/posts.cljs
@@ -2,6 +2,7 @@
   (:require [com.fulcrologic.fulcro.components :as comp :refer [defsc]]
             [com.fulcrologic.fulcro.data-fetch :as df]
             [com.fulcrologic.fulcro.dom :as dom]
+            [com.fulcrologic.fulcro.react.hooks :as hooks]
             [com.fulcrologic.fulcro.routing.dynamic-routing :as dr]
             [nota.adapters :as adapters]
             [nota.routing :as routing]
@@ -34,7 +35,9 @@
                                          #(df/load! app [:post/id id] Post
                                                     {:post-mutation `dr/target-ready
                                                      :post-mutation-params
-                                                     {:target [:post/id id]}})))}
+                                                     {:target [:post/id id]}})))
+   :use-hooks?      true}
+  (hooks/use-effect #(.highlightAll js/window.Prism))
   (if body
     (dom/div
      (dom/div :.inline