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 tags supported 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