Add code block syntax highlighting

skydread1 · Dec 19, 2023 · 54fce92 · 54fce92
1 parent 90bec97
commit 54fce92
Show file tree

Hide file tree

Showing 6 changed files with 314 additions and 18 deletions.
diff --git a/deps.edn b/deps.edn
@@ -6,10 +6,11 @@
         com.bhauman/figwheel-main             {:mvn/version "0.2.18"}
         org.clojure/clojurescript             {:mvn/version "1.11.121"}
         reagent/reagent                       {:mvn/version "1.2.0"}
+        cljsjs/highlight                      {:mvn/version "11.7.0-0"}
         cljsjs/react                          {:mvn/version "18.2.0-1"}
         cljsjs/react-dom                      {:mvn/version "18.2.0-1"}
         markdown-to-hiccup/markdown-to-hiccup {:mvn/version "0.6.2"}
-        re-frame/re-frame                     {:mvn/version "1.4.0"}
+        re-frame/re-frame                     {:mvn/version "1.4.2"}
         day8.re-frame/test                    {:mvn/version "0.1.5"}}
  :paths ["src" "resources" "target" "test"]
  :aliases
@@ -29,7 +30,7 @@
   ;; build the optimised js bundle
   :web/prod {:main-opts ["--main"       "figwheel.main"
                          "--build-once" "prod"]}
-  
+
   ;; Run the cljs tests
   :web/test {:main-opts ["-m" "figwheel.main"
                          "-m" "loicb.client.test-runner"]}

diff --git a/resources/public/css/highlight.css b/resources/public/css/highlight.css
@@ -0,0 +1,273 @@
+/*
+  Themes are obtained from the highlight.js repository at
+  https://github.com/highlightjs/highlight.js/tree/main/src/styles
+ */
+
+pre code.hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 1rem;
+    border-style: groove;
+    border-width: 1px;
+    border-color: var(--border-primary-color);
+}
+
+code.hljs {
+    padding: 3px 5px;
+}
+
+/* ------------------------------------------------------------------------- */
+
+/*!
+    Theme: GitHub
+    Description: Light theme as seen on github.com
+    Author: github.com
+    Maintainer: @Hirse
+    Updated: 2021-05-15
+  
+    Outdated base version: https://github.com/primer/github-syntax-light
+    Current colors taken from GitHub's CSS
+  */
+
+.hljs {
+    color: #24292e;
+    background: #ffffff;
+}
+
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+    /* prettylights-syntax-keyword */
+    color: #d73a49;
+}
+
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+    /* prettylights-syntax-entity */
+    color: #6f42c1;
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-variable,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+    /* prettylights-syntax-constant */
+    color: #005cc5;
+}
+
+.hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string {
+    /* prettylights-syntax-string */
+    color: #032f62;
+}
+
+.hljs-built_in,
+.hljs-symbol {
+    /* prettylights-syntax-variable */
+    color: #e36209;
+}
+
+.hljs-comment,
+.hljs-code,
+.hljs-formula {
+    /* prettylights-syntax-comment */
+    color: #6a737d;
+}
+
+.hljs-name,
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+    /* prettylights-syntax-entity-tag */
+    color: #22863a;
+}
+
+.hljs-subst {
+    /* prettylights-syntax-storage-modifier-import */
+    color: #24292e;
+}
+
+.hljs-section {
+    /* prettylights-syntax-markup-heading */
+    color: #005cc5;
+    font-weight: bold;
+}
+
+.hljs-bullet {
+    /* prettylights-syntax-markup-list */
+    color: #735c0f;
+}
+
+.hljs-emphasis {
+    /* prettylights-syntax-markup-italic */
+    color: #24292e;
+    font-style: italic;
+}
+
+.hljs-strong {
+    /* prettylights-syntax-markup-bold */
+    color: #24292e;
+    font-weight: bold;
+}
+
+.hljs-addition {
+    /* prettylights-syntax-markup-inserted */
+    color: #22863a;
+    background-color: #f0fff4;
+}
+
+.hljs-deletion {
+    /* prettylights-syntax-markup-deleted */
+    color: #b31d28;
+    background-color: #ffeef0;
+}
+
+.hljs-char.escape_,
+.hljs-link,
+.hljs-params,
+.hljs-property,
+.hljs-punctuation,
+.hljs-tag {
+    /* purposely ignored */
+}
+
+/* ------------------------------------------------------------------------- */
+
+/*!
+    Theme: GitHub Dark
+    Description: Dark theme as seen on github.com
+    Author: github.com
+    Maintainer: @Hirse
+    Updated: 2021-05-15
+  
+    Outdated base version: https://github.com/primer/github-syntax-dark
+    Current colors taken from GitHub's CSS
+  */
+
+.dark .hljs {
+    color: #c9d1d9;
+    background: #0d1117;
+}
+
+.dark .hljs-doctag,
+.dark .hljs-keyword,
+.dark .hljs-meta .hljs-keyword,
+.dark .hljs-template-tag,
+.dark .hljs-template-variable,
+.dark .hljs-type,
+.dark .hljs-variable.language_ {
+    /* prettylights-syntax-keyword */
+    color: #ff7b72;
+}
+
+.dark .hljs-title,
+.dark .hljs-title.class_,
+.dark .hljs-title.class_.inherited__,
+.dark .hljs-title.function_ {
+    /* prettylights-syntax-entity */
+    color: #d2a8ff;
+}
+
+.dark .hljs-attr,
+.dark .hljs-attribute,
+.dark .hljs-literal,
+.dark .hljs-meta,
+.dark .hljs-number,
+.dark .hljs-operator,
+.dark .hljs-variable,
+.dark .hljs-selector-attr,
+.dark .hljs-selector-class,
+.dark .hljs-selector-id {
+    /* prettylights-syntax-constant */
+    color: #79c0ff;
+}
+
+.dark .hljs-regexp,
+.dark .hljs-string,
+.dark .hljs-meta .hljs-string {
+    /* prettylights-syntax-string */
+    color: #a5d6ff;
+}
+
+.dark .hljs-built_in,
+.dark .hljs-symbol {
+    /* prettylights-syntax-variable */
+    color: #ffa657;
+}
+
+.dark .hljs-comment,
+.dark .hljs-code,
+.dark .hljs-formula {
+    /* prettylights-syntax-comment */
+    color: #8b949e;
+}
+
+.dark .hljs-name,
+.dark .hljs-quote,
+.dark .hljs-selector-tag,
+.dark .hljs-selector-pseudo {
+    /* prettylights-syntax-entity-tag */
+    color: #7ee787;
+}
+
+.dark .hljs-subst {
+    /* prettylights-syntax-storage-modifier-import */
+    color: #c9d1d9;
+}
+
+.dark .hljs-section {
+    /* prettylights-syntax-markup-heading */
+    color: #1f6feb;
+    font-weight: bold;
+}
+
+.dark .hljs-bullet {
+    /* prettylights-syntax-markup-list */
+    color: #f2cc60;
+}
+
+.dark .hljs-emphasis {
+    /* prettylights-syntax-markup-italic */
+    color: #c9d1d9;
+    font-style: italic;
+}
+
+.dark .hljs-strong {
+    /* prettylights-syntax-markup-bold */
+    color: #c9d1d9;
+    font-weight: bold;
+}
+
+.dark .hljs-addition {
+    /* prettylights-syntax-markup-inserted */
+    color: #aff5b4;
+    background-color: #033a16;
+}
+
+.dark .hljs-deletion {
+    /* prettylights-syntax-markup-deleted */
+    color: #ffdcd7;
+    background-color: #67060c;
+}
+
+.dark .hljs-char.escape_,
+.dark .hljs-link,
+.dark .hljs-params,
+.dark .hljs-property,
+.dark .hljs-punctuation,
+.dark .hljs-tag {
+    /* purposely ignored */
+}
diff --git a/resources/public/css/style.css b/resources/public/css/style.css
@@ -145,22 +145,14 @@ p {
     margin: 1rem 0rem;
 }
 
-pre {
-    overflow-x: scroll;
-    white-space-collapse: preserve;
-    text-wrap: nowrap;
+code {
     font-size: 1rem;
-    margin: 1rem 0rem;
-    padding: 1rem;
-    background-color: var(--bg-secondary-color);
-    border-style: solid;
-    border-width: 1px;
-    border-color: var(--border-primary-color);
 }
 
-code {
-    font-size: 1rem;
-    color: var(--text-primary-color);
+@media (max-width: 1024px) {
+    code {
+        font-size: 0.8rem;
+    }
 }
 
 a {

diff --git a/src/loicb/client/core/db/event.cljs b/src/loicb/client/core/db/event.cljs
@@ -43,6 +43,13 @@
    {:db (assoc db :app/current-view new-match)
     :fx [[:fx.app/scroll-to (:fragment new-match)]]}))
 
+;; ---------- Syntax Highlighting ----------
+
+(rf/reg-event-fx
+ :evt.app/highlight-code
+ (fn [_ [_ html-id]]
+   {:fx [[:fx.app/highlight-code html-id]]}))
+
 ;; ---------- Navbars ----------
 
 (rf/reg-event-db

diff --git a/src/loicb/client/core/db/fx.cljs b/src/loicb/client/core/db/fx.cljs
@@ -1,7 +1,19 @@
 (ns loicb.client.core.db.fx
-  (:require [loicb.client.core.db.class-utils :as cu]
-            [loicb.client.core.db.localstorage :as l-storage]
+  (:require [cljsjs.highlight]
+            [cljsjs.highlight.langs.asciidoc]
+            [cljsjs.highlight.langs.bash]
+            [cljsjs.highlight.langs.clojure]
+            [cljsjs.highlight.langs.clojure-repl]
+            [cljsjs.highlight.langs.cpp]
+            [cljsjs.highlight.langs.dockerfile]
+            [cljsjs.highlight.langs.java]
+            [cljsjs.highlight.langs.javascript]
+            [cljsjs.highlight.langs.lisp]
+            [cljsjs.highlight.langs.markdown]
+            [cljsjs.highlight.langs.python]
             [clojure.edn :as edn]
+            [loicb.client.core.db.class-utils :as cu]
+            [loicb.client.core.db.localstorage :as l-storage]
             [re-frame.core :as rf]
             [reagent.core :as reagent]))
 
@@ -31,6 +43,16 @@
                                        (.getElementById js/document "app"))]
                             (.scrollIntoView el)))))
 
+;; ---------- Syntax Highlighting ----------
+
+(rf/reg-fx
+ :fx.app/highlight-code
+ (fn [id]
+   (reagent/after-render
+    #(do (.configure js/hljs #js {:cssSelector (str "#" id " pre code")
+                                  :ignoreUnescapedHTML true})
+         (.highlightAll js/hljs)))))
+
 ;; ---------- Local Storage ----------
 
 (rf/reg-cofx
@@ -43,4 +65,4 @@
 (rf/reg-fx
  :fx.app/set-theme-local-store
  (fn [next-theme]
-   (l-storage/set-item :theme next-theme)))
+   (l-storage/set-item :theme next-theme)))
diff --git a/src/loicb/client/core/dom/page.cljs b/src/loicb/client/core/dom/page.cljs
@@ -58,6 +58,7 @@
   (let [{:image/keys [src src-dark alt]} image
         src (if (= :dark @(rf/subscribe [:subs/pattern '{:app/theme ?x}]))
               src-dark src)]
+    (rf/dispatch [:evt.app/highlight-code id])
     [:div.post
      {:key id
       :id id}