Markdown rendering

Client-side markdown rendering

Install marked lib from NPM

npm i -D marked

Require the library

(ns uix.recipes
  (:require [marked]
            [uix.core :as uix :refer [defui defhook $]]))

Define React hook (optional)

The hook caches generated HTML string until input markdown is updated

(defhook use-markdown [s]
  (uix/use-memo #(marked/parse s) [s]))

Insert generated HTML into DOM via React's :dangerouslySetInnerHTML prop

(defui md [{:keys [children]}]
  (let [html (use-markdown children)]
    ($ :div {:dangerouslySetInnerHTML {:__html html}})))

($ md "# UIx recipes")