diff --git a/deps.edn b/deps.edn index dd46636..5facd90 100644 --- 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 new file mode 100644 index 0000000..728a3ab --- /dev/null +++ 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 index 17be598..44d8644 100644 --- 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 { diff --git a/resources/public/index.html b/resources/public/index.html index f6b32a0..344be84 100644 --- a/resources/public/index.html +++ b/resources/public/index.html @@ -1,43 +1,49 @@ -
-