Add code block syntax highlighting (#50)

* Add code block syntax highlighting * Compiled the cljs to the js bundle: main.js * Add highlight css in html * Add color for code tag not in pre tag
skydread1 · Dec 19, 2023 · d729eba · d729eba
1 parent 90bec97
commit d729eba
Show file tree

Hide file tree

Showing 8 changed files with 2,666 additions and 812 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,18 @@ p {
     margin: 1rem 0rem;
 }
 
-pre {
-    overflow-x: scroll;
-    white-space-collapse: preserve;
-    text-wrap: nowrap;
-    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 {
+    color: var(--text-primary-color);
 }
 
-code {
+pre code {
     font-size: 1rem;
-    color: var(--text-primary-color);
+}
+
+@media (max-width: 1024px) {
+    pre code {
+        font-size: 0.8rem;
+    }
 }
 
 a {