From ddd74eac41408f7dc76426566b4cbf89006e0c68 Mon Sep 17 00:00:00 2001
From: Francisco Berrocal <fran.fhb@gmail.com>
Date: Thu, 2 Dec 2021 06:42:03 +0100
Subject: [PATCH 1/2] feat: Support syntax highlighting

Integrated Prism.Js to highlight code block in post pages.
The code must have a language defined for the hilight to work.
Prism styles and scripts are loaded from cdnjs.
---
 src/nota/hooks/index.clj | 11 ++++++++---
 src/nota/ui.cljs         | 13 +++++++++++++
 src/nota/ui/posts.cljs   |  5 ++++-
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/nota/hooks/index.clj b/src/nota/hooks/index.clj
index 7da2c4a..591c2bf 100644
--- 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
index baeb8a0..56d328d 100644
--- 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
index 270176f..8213ea6 100644
--- 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

From 9d45f7889d5c4c060931882229f7450f7447f119 Mon Sep 17 00:00:00 2001
From: Francisco Berrocal <fran.fhb@gmail.com>
Date: Fri, 3 Dec 2021 12:31:13 +0100
Subject: [PATCH 2/2] feat: Update gfm post to add syntax highlight explanation

---
 resources/public/posts/gfm-syntax.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/resources/public/posts/gfm-syntax.md b/resources/public/posts/gfm-syntax.md
index c955aa8..5c383b9 100644
--- 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