Use viewer api to to enable customization of markdown nodes

deps.edn

@@ -8,7 +8,7 @@
 
         com.nextjournal/beholder {:mvn/version "1.0.0"}
 
-        io.github.nextjournal/markdown {:mvn/version "0.2.44"}
+        io.github.nextjournal/markdown {:mvn/version "0.3.69"}
 
         com.taoensso/nippy {:mvn/version "3.1.1"}
         mvxcvi/multihash {:mvn/version "2.0.3"}
@@ -25,7 +25,9 @@
                               org.babashka/sci {:mvn/version "0.3.2"}
                               reagent/reagent {:mvn/version "1.1.0"}
                               io.github.babashka/sci-configs {:git/sha "fd6a3332f358e56b96b5a791f75f97573e018580"}
-                              io.github.nextjournal/viewers {:git/sha "d88a9abd1f2bfd28ff2d3983407a9319c6f04501"}
+                              io.github.nextjournal/viewers {:git/sha "d88a9abd1f2bfd28ff2d3983407a9319c6f04501"
+                                                             :exclusions [io.github.nextjournal/markdown
+                                                                          io.github.nextjournal/clerk]}
                               metosin/reitit-frontend {:mvn/version "0.5.15"}}}
 
            :dev {:extra-deps {arrowic/arrowic {:mvn/version "0.1.1"}

notebooks/described_markdown.clj

@@ -0,0 +1,89 @@
+;; # ✍️ Described Markdown
+^{:nextjournal.clerk/visibility #{:hide-ns}}
+(ns ^:nextjournal.clerk/no-cache described-markdown
+  (:require [nextjournal.clerk :as clerk]
+            [nextjournal.clerk.viewer :as v]
+            [nextjournal.markdown :as md]
+            [nextjournal.markdown.parser :as md.parser]
+            [nextjournal.markdown.transform :as md.transform]))
+
+^{::clerk/viewer :hide-result}
+(defn parse [text]
+  (md.parser/parse (update md.parser/empty-doc :text-tokenizers conj
+                           {:regex #"\{\{([^{]+)\}\}"
+                            :handler (fn [m] {:type :inline :text (m 1)})})
+                   (md/tokenize text)))
+
+;; This notebook contains preparatory work to make markdown node customizable in clerk.
+
+;; Due to the recursive nature of [[v/describe]] it is sufficien to wrap a node at a time:
+
+(defn with-md-viewer [{:as node :keys [type]}]
+  (v/wrap-value node (keyword "nextjournal.markdown" (name type))))
+
+;; We define a generic `transform-fn` with 2 purposes:
+;; * produces the desired hiccup representation at each node and
+;; * delegates to describe the representation of the child nodes:
+
+(defn into-markup [mkup]
+  (let [mkup-fn (if (fn? mkup) mkup (constantly mkup))]
+    (fn [{:as node :keys [text content]}]
+      (v/html (into (mkup-fn node) (cond text [text] content (map with-md-viewer content)))))))
+
+^{::clerk/viewer :hide-result}
+(def md-viewers
+  [{:name :nextjournal.markdown/doc
+    :transform-fn (into-markup [:div.viewer-markdown])}
+
+   {:name :nextjournal.markdown/heading
+    :transform-fn (into-markup #(vector (str "h" (:heading-level %))))}
+
+   {:name :nextjournal.markdown/paragraph
+    :transform-fn (into-markup [:p])}
+
+   {:name :nextjournal.markdown/em
+    :transform-fn (into-markup [:em])}
+
+   {:name :nextjournal.markdown/strong
+    :transform-fn (into-markup [:strong])}
+
+   {:name :nextjournal.markdown/monospace
+    :transform-fn (into-markup [:code])}
+
+   {:name :nextjournal.markdown/internal-link
+    :transform-fn (into-markup #(vector :a {:href (str "#" (:text %))}))}
+
+   {:name :nextjournal.markdown/text
+    ;; TODO: find a way to drop wrapping [:span]
+    :transform-fn (into-markup [:span.text])}
+
+   {:name :nextjournal.markdown/inline
+    ;; TODO: use clerk/read+eval-cached
+    :transform-fn (comp eval read-string :text)}
+
+   {:name :nextjournal.markdown/formula
+    :transform-fn :text
+    :render-fn 'v/mathjax-viewer}])
+
+(defn marine [text] (clerk/html [:span {:style {:font-weight 800 :color "#0284c7"}} (str "⚓️" text)]))
+
+(def text "# Hello
+
+This is not _really_ a **strong** formula $\\alpha$.
+
+## Section 3
+
+with inline wiki [[link]] and inline eval {{ (marine \"Ahoi\") }}.
+")
+
+^{::clerk/viewers md-viewers}
+(with-md-viewer (parse text))
+
+^{::clerk/visibility :hide}
+(comment
+  (v/describe
+   (v/with-viewers md-viewers
+     (with-md-viewer (parse text))))
+
+  (reset! nextjournal.clerk.webserver/!doc nextjournal.clerk.webserver/help-doc)
+  (reset! v/!viewers (v/get-all-viewers)))

notebooks/how_clerk_works.clj

@@ -1,5 +1,5 @@
 ;; # How Clerk Works 🕵🏻‍♀️
-^{:nextjournal.clerk/toc? true}
+^{:nextjournal.clerk/toc true}
 (ns how-clerk-works
   (:require [next.jdbc :as jdbc]
             [nextjournal.clerk :as clerk]

notebooks/viewers/custom_markdown.md

@@ -0,0 +1,55 @@
+# Customizable Markdown
+
+Playground for overriding markdown nodes
+
+```clojure
+^{:nextjournal.clerk/visibility #{:hide-ns}}
+(ns ^:nextjournal.clerk/no-cache viewers.custom-markdown
+  (:require [nextjournal.clerk :as clerk]
+            [nextjournal.clerk.viewer :as v]))
+```
+
+```clojure
+(clerk/set-viewers! [{:name :nextjournal.markdown/text 
+                      :transform-fn (v/into-markup [:span {:style {:color "#64748b"}}])}
+                     {:name :nextjournal.markdown/ruler
+                      :transform-fn (constantly 
+                                     (v/html [:div {:style {:width "100%" :height "80px" :background-position "center" :background-size "cover"
+                                                            :background-image "url(https://www.maxpixel.net/static/photo/1x/Ornamental-Separator-Decorative-Line-Art-Divider-4715969.png)"}}]))}])
+```
+
+## Sections
+
+with some _more_ text and a ruler.
+
+---
+
+Clerk parses all _consecutive_ `;;`-led _clojure comment lines_ as [Markdown](https://daringfireball.net/projects/markdown). All of markdown syntax should be supported:
+
+### Lists
+
+- one **strong** hashtag like #nomarkdownforoldcountry
+- two ~~strikethrough~~
+
+and bullet lists
+
+- [x] what 
+- [ ] the
+
+### Code
+
+    (assoc {:this "should get"} :clojure "syntax highlighting")
+
+---
+
+### Tables
+
+Tables with specific alignment.
+
+| feature |    |
+|:-------:|:---|
+|   One   |✅  |
+|   Two   |✅  |
+|  Three  |❌  |
+
+---

notebooks/viewers/in_text_eval.clj

@@ -0,0 +1,35 @@
+;; #  📝 _In-Text_ Evaluation
+^{:nextjournal.clerk/visibility #{:hide-ns :hide} :nextjournal.clerk/toc true}
+(ns ^{:nextjournal.clerk/no-cache true} viewers.in-text-eval
+  (:require [nextjournal.clerk :as clerk]
+            [nextjournal.clerk.viewer :as v]
+            [nextjournal.markdown.transform :as markdown.transform]))
+
+;; Being able to override markdown viewers allows we get in-text evaluation for free:
+
+^{::clerk/viewer clerk/hide-result}
+(defonce num★ (atom 3))
+#_(reset! num★ 3)
+
+^{::clerk/visibility :show}
+(clerk/set-viewers! [{:name :nextjournal.markdown/monospace
+                      :transform-fn (comp eval read-string markdown.transform/->text)}
+                     {:name :nextjournal.markdown/ruler
+                      :transform-fn (constantly
+                                     (v/with-viewer :html [:div.text-center (repeat @num★ "★")]))}])
+;; ---
+^{::clerk/viewer clerk/hide-result}
+(defn slider [var {:keys [min max]}]
+  (clerk/with-viewer
+    {:fetch-fn (fn [_ x] x)
+     :transform-fn (fn [var] {:var-name (symbol var) :value @@var})
+     :render-fn `(fn [{:as x :keys [var-name value]}]
+                   (v/html [:input {:type :range
+                                    :min ~min :max ~max
+                                    :value value
+                                    :on-change #(v/clerk-eval `(reset! ~var-name (Integer/parseInt ~(.. % -target -value))))}]))}
+    var))
+
+;; Drag the following slider `(slider #'num★ {:min 1 :max 40})` to control the number of stars (currently **`(deref num★)`**) in our custom horizontal rules.
+
+;; ---

notebooks/viewers/markdown.clj

@@ -1,5 +1,5 @@
 ;; # Markdown ✍️
 (ns markdown (:require [nextjournal.clerk :as clerk]))
 
-(clerk/md "### Text can be\n * **bold**\n * *italic\n * ~~Strikethrough~~\n
+(clerk/md "### Text can be\n * **bold**\n * *italic*\n * ~~Strikethrough~~\n
 It's [Markdown](https://daringfireball.net/projects/markdown/), like you know it.")

resources/viewer-js-hash

@@ -1 +1 @@
-vN7eLXAmyRrUvHLvw2ZzvSqPyTH
+3oPQaaq3te999AVUnqPnMeNwg2jV

src/nextjournal/clerk.clj

@@ -361,7 +361,8 @@
 
 (def clerk-docs
   (into ["notebooks/markdown.md"
-         "notebooks/onwards.md"]
+         "notebooks/onwards.md"
+         "notebooks/viewers/custom_markdown.md"]
         (map #(str "notebooks/" % ".clj"))
         ["hello"
          "how_clerk_works"
@@ -378,6 +379,7 @@
          "viewers/html"
          "viewers/image"
          "viewers/image_layouts"
+         "viewers/in_text_eval"
          "viewers/markdown"
          "viewers/plotly"
          "viewers/table"

src/nextjournal/clerk/hashing.clj

@@ -198,16 +198,18 @@
                 (and doc? (n/comment? node))
                 (-> state
                     (assoc :nodes (drop-while n/comment? nodes))
-                    (update :blocks conj {:type :markdown :text (apply str (map (comp remove-leading-semicolons n/string)
-                                                                                (take-while n/comment? nodes)))}))
+                    (update :blocks conj {:type :markdown
+                                          :doc (-> (apply str (map (comp remove-leading-semicolons n/string)
+                                                                   (take-while n/comment? nodes)))
+                                                   markdown/parse
+                                                   (select-keys [:type :content]))}))
                 :else
                 (update state :nodes rest)))
        (merge (select-keys state [:blocks :visibility])
               (when doc?
                 (-> {:content (into []
                                     (comp (filter (comp #{:markdown} :type))
-                                          (map (comp markdown/parse :text))
-                                          (mapcat :content))
+                                          (mapcat (comp :content :doc)))
                                     blocks)}
                     markdown.parser/add-title+toc
                     (select-keys #{:title :toc})

src/nextjournal/clerk/sci_viewer.cljs

@@ -80,7 +80,7 @@
   (reduce
     (fn [acc {:as item :keys [content children]}]
       (if content
-        (let [title (-> content first :text)]
+        (let [title (md.transform/->text item)]
           (->> {:title title
                 :path (str "#" (uri.normalize/normalize-fragment title))
                 :items (toc-items children)}
@@ -1027,9 +1027,10 @@ black")}]))}
   (html (katex/to-html-string tex-string)))
 
 (defn html-viewer [markup]
-  (if (string? markup)
-    (html [:div {:dangerouslySetInnerHTML {:__html markup}}])
-    (r/as-element markup)))
+  (r/as-element
+   (if (string? markup)
+     [:span {:dangerouslySetInnerHTML {:__html markup}}]
+     markup)))
 
 (defn reagent-viewer [x]
   (r/as-element (cond-> x (fn? x) vector)))
@@ -1039,15 +1040,6 @@ black")}]))}
 (def plotly-viewer (comp normalize-viewer plotly/viewer))
 (def vega-lite-viewer (comp normalize-viewer vega-lite/viewer))
 
-(defn markdown-viewer
-  "Accept a markdown string or a structure from parsed markdown."
-  [data]
-  (cond
-    (string? data)
-    (markdown/viewer data)
-    (and (map? data) (contains? data :content) (contains? data :type))
-    (with-viewer :hiccup (md.transform/->hiccup markdown/default-renderers data))))
-
 (def expand-icon
   [:svg {:xmlns "http://www.w3.org/2000/svg" :viewBox "0 0 20 20" :fill "currentColor" :width 12 :height 12}
    [:path {:fill-rule "evenodd" :d "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" :clip-rule "evenodd"}]])
@@ -1101,7 +1093,6 @@ black")}]))}
    'notebook-viewer notebook
    'katex-viewer katex-viewer
    'mathjax-viewer mathjax-viewer
-   'markdown-viewer markdown-viewer
    'code-viewer code-viewer
    'foldable-code-viewer foldable-code-viewer
    'plotly-viewer plotly-viewer

src/nextjournal/clerk/view.clj

@@ -152,7 +152,10 @@
 
 (defn describe-block [{:keys [inline-results?] :or {inline-results? false}} {:keys [ns]} {:as cell :keys [type text doc]}]
   (case type
-    :markdown [(v/md (or doc text))]
+    :markdown [(binding [*ns* ns]
+                 (v/describe (cond
+                               text (v/md text)
+                               doc (v/with-md-viewer doc))))]
     :code (let [{:as cell :keys [result]} (update cell :result apply-viewer-unwrapping-var-from-def)
                 {:keys [code? fold? result?]} (->display cell)]
             (cond-> []