Markdown edit demo for dynamic css reload with reagent & garden.

core.cljs

(ns mkd.core
  (:require [reagent.core :as r :refer [atom]]
            cljsjs.marked
            [goog.style :as style]
            [goog.dom :as dom]
            [garden.core :refer [css]]
            [garden.units :refer [percent px vh em]]))

(enable-console-print!)

(println "Edits to this text should show up in your developer console.")

;; define your app data so that it doesn't get over-written on reload

;; CSS
(style/installStyles
 (css
  [:.input-panel
   {:float :left
    :overflow :scroll
    :width (percent 50)
    :height (vh 100)
    :margin 0
    :border [[(px 2) :solid :green]]
    :padding (em 1)
    :box-sizing :border-box}]
  [:.textarea
   {:width "100%"
    :border-width 0
    :outline :none
    :padding 0
    :margin 0}]
  [:.mkd-panel
   {:margin 0
    :padding "1em"
    :width "50%"
    :height "100vh"
    :overflow :scroll
    :box-sizing :border-box
    :border "2px solid blue"
    :float :left}]
  [:container
   {:width "100%"
    :margin 0
    :padding 0
    :top 0
    :left 0
    :height :auto
    :position :absolut}]))

(.setOptions js/marked
             (clj->js
              {:table true
               :highlight #(.-value (.highlightAuto js/hljs %))}))

(defonce app-state (atom {:text ""}))

;; Run this function before figwheel reload to clear all style tag
(defn on-js-reload []
  (let [nodelist (dom/getElementsByTagNameAndClass "style")]
    (doseq [idx (range (.-length nodelist))]
      (dom/removeNode (.item nodelist idx)))))

(defn mk-mkd [s]
  (js/marked s))

(defn input-panel []
  [:div.input-panel
   [:textarea.textarea
    {:rows "500"
     :on-change #(swap! app-state assoc :text (-> % .-target .-value))}]])

(defn mkd-panel []
  [:div.mkd-panel
   [:div {:contentEditable  true
          :style {:margin 0 :padding 0 :outline :none}
          :on-input #(.log js/console %)
          :dangerouslySetInnerHTML {:__html (mk-mkd (:text @app-state))}}]])

(defn app
  []
  [:div.container
   [input-panel]
   [mkd-panel]])

(r/render-component
 [app]
 (dom/getElement "app"))

project.clj

(defproject mkd "0.1.0-SNAPSHOT"
  :description "FIXME: write this!"
  :url "http://example.com/FIXME"
  :license {:name "Eclipse Public License"
            :url "http://www.eclipse.org/legal/epl-v10.html"}

  :dependencies [[org.clojure/clojure "1.7.0"]
                 [org.clojure/clojurescript "1.7.170"]
                 [org.clojure/core.async "0.2.374"]
                 [garden "1.3.0"]
                 [reagent "0.6.0-alpha"]
                 [cljsjs/marked "0.3.5-0"]
                 [cljsjs/highlight "8.4-0"]]

  :plugins [[lein-cljsbuild "1.1.1"]]

  :source-paths ["src" "script"]

  :clean-targets ^{:protect false} ["resources/public/js/compiled" "target"]

  :repl-options {:init-ns repl}
  
  :cljsbuild {:builds
              [{:id "dev"
                :source-paths ["src"]

                :figwheel {:before-jsload "mkd.core/on-js-reload"}

                :compiler {:main mkd.core
                           :asset-path "js/compiled/out"
                           :output-to "resources/public/js/compiled/mkd.js"
                           :output-dir "resources/public/js/compiled/out"
                           :source-map-timestamp true}}
               ;; This next build is an compressed minified build for
               ;; production. You can build this with:
               ;; lein cljsbuild once min
               {:id "min"
                :source-paths ["src"]
                :compiler {:output-to "resources/public/js/compiled/mkd.js"
                           :main mkd.core
                           :optimizations :advanced
                           :pretty-print false}}]}

  :figwheel {:http-server-root "public"
             :server-port 3449
             :nrepl-port 7888
             })