3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-15 20:25:13 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Add code highlight dark and light modes

Browse source
This commit is contained in:
alonso.torres 2023-11-30 16:43:49 +01:00
parent c601cca288
commit 668f443149
8 changed files with 223 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/app/main/ui/components/code_block.cljs
View file

@ -10,16 +10,20 @@
["highlight.js" :as hljs]
[app.common.data.macros :as dm]
[app.main.ui.context :as ctx]
[cuerdas.core :as str]
[rumext.v2 :as mf]))
(mf/defc code-block
{::mf/wrap-props false}
[{:keys [code type]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system)
block-ref (mf/use-ref)]
block-ref (mf/use-ref)
code (str/trim code)]
(mf/with-effect [code type]
(when-let [node (mf/ref-val block-ref)]
(hljs/highlightElement node)))
[:pre {:class (dm/str type " " (stl/css new-css-system :code-display)) :ref block-ref} code]))
(if new-css-system
[:pre {:class (dm/str type " " (stl/css :code-display)) :ref block-ref} code]
[:pre {:class (dm/str type " " "code-display") :ref block-ref} code])))