solarized highlighting theme added to the docs build

book.json

@@ -3,6 +3,9 @@
   "description": "Documentation of re-frame framework",
   "language": "en",
   "root": "./docs/",
+  "styles": {
+    "website": "styles/website.css"
+  },
   "structure": {
     "readme": "INTRO.md",
     "summary": "README.md"

docs/CodeWalkthrough.md

@@ -60,7 +60,7 @@ here, to minimise cognitive load, we'll cut that corner.
 But ... we can't cut it completely. You'll still need an
 informal description, and here it is ... for this app `app-db` will contain
 a two-key map like this:
-```cljs
+```clj
 {:time       (js/Date.)  ;; current time for display
  :time-color "#f88"}     ;; the colour in which the time should be shown
 ```

docs/Debugging.md

@@ -89,16 +89,16 @@ It is the functions within these namespaces that we wish to trace.
 
 1. At the top of each add these namespaces, add these requires:
 
-   ```cljs
+```clojure
  [clairvoyant.core :refer-macros [trace-forms]]
  [re-frame-tracer.core :refer [tracer]]
-   ```
+```
 
 2. Then, immediately after the `ns` form add (if you want a green colour):
 
-   ```cljs
+```clojure
  (trace-forms {:tracer (tracer :color "green")}
-   ```
+```
 
 3. Finally, put in a closing `)` at the end of the file. Now all functions within the 
 `ns` will be traced.  It that is too noisy -- perhaps you won't want to trace all the helper functions --
@@ -107,15 +107,15 @@ around to suit your needs.
 
 4. Colour choice
 
-   We have sauntered in the direction of the following colours
+We have sauntered in the direction of the following colours
 
-   |    file      | colour|
-   |--------------|-------|
-   |`handlers.clj`| green |
-   |`subs.cljs`   | brown |
-   |`views.clj`   | gold  |
+|    file      | colour|
+|--------------|-------|
+|`handlers.clj`| green |
+|`subs.cljs`   | brown |
+|`views.clj`   | gold  |
 
-   But I still think orange, flared pants are a good look.  So, yeah.  You may end up choosing others. 
+But I still think orange, flared pants are a good look.  So, yeah.  You may end up choosing others. 
 
 
 ## Say No To Anonymous
@@ -124,7 +124,8 @@ To get good quality tracing, you need to provide names for all
 your functions.  So, don't let handlers be anonymous when registering them. 
 
 For example, make sure you name the renderer in a Form2 component:
-```clj
+
+```clojure
 (defn my-view
   []
   (let [name   (subscribe [:name])]
@@ -133,6 +134,7 @@ For example, make sure you name the renderer in a Form2 component:
 ```
 
 And name those event handlers:
+
 ```clj
 (reg-event-db
   :blah
@@ -209,7 +211,7 @@ you need to replace the macro `reaction` with the function `make-reaction`.
 
 Do the following code:
 
-```cljs
+```clj
 (ns my.ns
  (:require-macros [reagent.ratom :refer [reaction]]))
 
@@ -224,7 +226,7 @@ Do the following code:
 
 needs to become
 
-```cljs
+```clj
 (ns my.ns
  (:require [reagent.ratom :refer [make-reaction]]))
 

docs/Effects.md

@@ -49,7 +49,7 @@ the particular side effect required, and the `value` for that `key` provides
 further data. The structure of `value` is different for each side-effect.
 
 Here's the two instructions from the example above:
-```cljs
+```clj
 {:db       (assoc db :flag  a)         ;; side effect on app-db
  :dispatch [:do-something-else 3]}     ;; dispatch this event
 ```

docs/MentalModelOmnibus.md

@@ -103,7 +103,7 @@ into a collection, the events caused by that user's actions
 (button clicks, drags, key presses, etc).
  
 The collection of events might look like this:  
-```cljs
+```clj
 (def collected-events
   [
      [:clear]

docs/SubscriptionsCleanup.md

@@ -96,7 +96,7 @@ AND there's less chance of us forgetting an `@` (which can lead to odd problems)
 I've ended up quite liking [the alternative names](https://lambdaisland.com/blog/11-02-2017-re-frame-form-1-subscriptions) 
 suggested by [Lambda Island Videos](https://lambdaisland.com/):
 
-```cljs
+```clj
 (def <sub (comp deref re-frame.core/subscribe))   ;; aka listen (above)
 (def >evt re-frame.core/dispatch)
 ```

docs/Testing.md

@@ -39,6 +39,7 @@ tutorial.  Every unittest has 3 steps:
 Event Handlers are pure functions which should make them easy to test, right?
 
 First, create a named event handler using `defn` like this:
+
 ```clj
 (defn select-triangle
   [db [_ triangle-id]
@@ -46,6 +47,7 @@ First, create a named event handler using `defn` like this:
 ```
 
 You'd register this handler in a separate step:
+
 ```clj
 (re-frame.core/reg-event-db     ;; this is a "-db" event handler, not "-fx"
   :select-triangle
@@ -67,7 +69,7 @@ But how to create a useful `db` value?
 into a map at certain paths to simulate a real-world `db` value or, even easier, just use
 a map literal, like this:
 
-```cljs
+```clj
 ;; a test
 (let [
       ;; setup - create db and event
@@ -108,6 +110,7 @@ which cumulatively create the required initial state.  Tests then need
 know nothing about the internal structure of that `db`.
 
 Like this:
+
 ```clj
 (let [
       ;; setup - cummulatively build up db
@@ -123,6 +126,7 @@ Like this:
 
       ;; validate that db' is correct
       (is ...)
+
 ```
 
 This approach works so long as all the event handlers are
@@ -144,16 +148,16 @@ Except, we'd have to use `dispatch-sysnc` rather `dispatch` to
 force immediate handling of events, rather than queuing.
 
 ```clj
-  ;; setup - cummulatively build up db 
-  (dispatch-sync [:initialise-db])
-  (dispatch-sync [:clear-panel])
-  (dispatch-sync [:draw-triangle 1 2 3]))
+;; setup - cummulatively build up db
+(dispatch-sync [:initialise-db])
+(dispatch-sync [:clear-panel])
+(dispatch-sync [:draw-triangle 1 2 3])
 
-  ;; execute
-  (dispatch-sync  [:select-triange :other :stuff])
+;; execute
+(dispatch-sync  [:select-triange :other :stuff])
 
-  ;; validate that the valuein `app-db` is correct
-  ;; perhaps with subscriptions
+;; validate that the valuein 'app-db' is correct
+;; perhaps with subscriptions
 ```
 
 Notes:
@@ -241,7 +245,7 @@ A trivial example:
 ```
 
 So, here, testing involves passing values into the function and checking the data structure returned
-for correctness. 
+for correctness.p
 
 What's returned is hiccup, of course. So how do you test hiccup for correctness?
 
@@ -256,8 +260,8 @@ But what if the View Function has a subscription?
 ```clj
 (defn my-view
   [something]
-   (let [val  (subscribe [:query-id])]     <-- reactive subscription
-     [:div .... using @val in here])))
+  (let [val  (subscribe [:query-id])]     ;; <-- reactive subscription
+    [:div .... using @val in here]))
 ```
 
 The use of `subscribe` makes the function impure (it obtains data from places other than its args).
@@ -279,6 +283,7 @@ Which is all possible, if a little messy.
 
 There is a pragmatic method available to handle the impurity: use `with-redefs`
 to stub out `subscribe`.  Like this:
+
 ```clj
 (defn subscription-stub [x]
   (atom

docs/Using-Stateful-JS-Components.md

@@ -23,7 +23,7 @@ The pattern involves the outer component, which sources data, supplying this dat
 
 ### Example Using Google Maps
 
-```cljs
+```clj
 (defn gmap-inner []
   (let [gmap    (atom nil)
         options (clj->js {"zoom" 9})

docs/styles/website.css

@@ -0,0 +1,93 @@
+/* .hljs-symbol { */
+/*     color: #AD81FF !important; */
+/* } */
+
+/* .hljs-name { */
+/*     color: #67D8EE !important; */
+/* } */
+
+/* .hljs-builtin-name { */
+/*     color: #A6E131; */
+/* } */
+.markdown-section > pre {
+  color: #657b83 !important;
+  background: #fdf6e3 !important;
+}
+.hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 0.5em;
+    background: #fdf6e3;
+    color: #657b83;
+}
+
+.hljs-comment,
+.hljs-quote {
+    color: #93a1a1;
+}
+
+/* Solarized Green */
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-addition {
+    color: #859900;
+}
+
+/* Solarized Cyan */
+.hljs-number,
+.hljs-string,
+.hljs-meta .hljs-meta-string,
+.hljs-literal,
+.hljs-doctag,
+.hljs-regexp {
+    color: #2aa198;
+}
+
+/* Solarized Blue */
+.hljs-title,
+.hljs-section,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+    color: #268bd2;
+}
+
+/* Solarized Yellow */
+.hljs-attribute,
+.hljs-attr,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-class .hljs-title,
+.hljs-type {
+    color: #b58900;
+}
+
+/* Solarized Orange */
+.hljs-symbol,
+.hljs-bullet,
+.hljs-subst,
+.hljs-meta,
+.hljs-meta .hljs-keyword,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-link {
+    color: #cb4b16;
+}
+
+/* Solarized Red */
+.hljs-built_in,
+.hljs-deletion {
+    color: #dc322f;
+}
+
+.hljs-formula {
+    background: #eee8d5;
+}
+
+.hljs-emphasis {
+    font-style: italic;
+}
+
+.hljs-strong {
+    font-weight: bold;
+}