codemirror css

base/mar/hoon.hoon

@@ -8,8 +8,23 @@
 ++  grow                                                ::  convert to
   |%
   ++  mime  `^mime`[/text/hoon (taco own)]              ::  convert to %mime
-  ++  psal  ;div:(pre:"{(trip own)}")                   ::  convert to %html
-  ++  hymn  ;html:(head:title:"Source" "+{psal}")
+  ++  psal  ;div:pre(urb_codemirror ""):"{(trip own)}"  ::  convert to %html
+  ++  hymn
+    :: ;html:(head:title:"Source" "+{psal}")
+    ;html
+      ;head
+        ;title:"Source"
+        ;script@"//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/codemirror.js";
+        ;script@"/{(trip &2:%)}/lib/syntax/hoon.js";
+        ;link(rel "stylesheet", href "//cdnjs.cloudflare.com/ajax/libs/".
+          "codemirror/4.3.0/codemirror.min.css");
+        ;link/"/{(trip &2:%)}/lib/syntax/codemirror.css"(rel "stylesheet");
+      == 
+      ;body
+        ;textarea#src:"{(trip own)}"
+        ;script:'CodeMirror.fromTextArea(src, {lineNumbers:true, readOnly:true})'
+      ==
+    ==
   ++  txt
     (lore (cat 3 own '\0a'))
   --

base/pub/tree/src/css/main.css

@@ -357,6 +357,21 @@ li:before {
 .list h1 {
   font-size: 0.7rem;
 }
+#body .CodeMirror {
+  font-size: 0.8rem;
+  line-height: 1rem;
+}
+#body .CodeMirror .cm-header {
+  font-weight: 200;
+}
+#body .CodeMirror-gutters {
+  background-color: #fff;
+  padding-right: 1rem;
+  margin-left: -1rem;
+}
+#body .CodeMirror-linenumber.CodeMirror-gutter-elt {
+  margin-left: -1.2rem;
+}
 @media only screen and (max-width: 1170px) {
   #nav,
   #nav > div,

base/pub/tree/src/css/main.styl

@@ -282,4 +282,19 @@ li:before
 .list h1
   font-size .7rem
 
+#body .CodeMirror
+  font-size .8rem
+  line-height 1rem
+
+#body .CodeMirror .cm-header
+  font-weight 200
+
+#body .CodeMirror-gutters
+  background-color #fff
+  padding-right 1rem
+  margin-left -1rem
+
+#body .CodeMirror-linenumber.CodeMirror-gutter-elt
+  margin-left -1.2rem
+
 @import 'mobile'