style inspector code

5 files changed, 52 insertions, 29 deletions

diff --git a/mmm/highlighting.moon b/mmm/highlighting.moon
new file mode 100644
index 0000000..04ff603
--- /dev/null
+++ b/mmm/highlighting.moon
@@ -0,0 +1,24 @@
+import code from require 'mmm.dom'
+local highlight
+
+trim = (str) -> str\match '^ *(..-) *$'
+
+if MODE == 'SERVER'
+  highlight = (lang, str) ->
+    assert str, 'no string to highlight'
+    code (trim str), class: "hljs lang-#{lang}"
+else
+  highlight = (lang, str) ->
+    assert str, 'no string to highlight'
+    result = window.hljs\highlight lang, (trim str), true
+    with code class: "hljs lang-#{lang}"
+      .innerHTML = result.value
+
+languages = setmetatable {}, __index: (name) =>
+  with val = (str) -> highlight name, str
+    @[name] = val
+
+{
+  :highlight
+  :languages
+}
diff --git a/mmm/mmmfs/browser.moon b/mmm/mmmfs/browser.moon
index 9bcf294..a40b5cf 100644
--- a/mmm/mmmfs/browser.moon
+++ b/mmm/mmmfs/browser.moon
@@ -2,12 +2,14 @@ require = relative ..., 1
 import Key from require '.fileder'
 import converts, get_conversions, apply_conversions from require '.conversion'
 import ReactiveVar, get_or_create, text, elements from require 'mmm.component'
-import pre, code, div, nav, span, button, a, select, option from elements
+import pre, div, nav, span, button, a, select, option from elements
+import languages from require 'mmm.highlighting'
 
-code_cast = (lang) -> {
+code_cast = (lang) ->
+  {
     inp: "text/#{lang}.*",
     out: 'mmm/dom',
-    transform: (val) -> pre code val
+    transform: (val) -> languages[lang] val
   }
 
 casts = {
@@ -117,7 +119,7 @@ class Browser
 
   -- render #browser-content
   get_content: (prop, convert=default_convert) =>
-    disp_error = (msg) -> span msg, style: { color: '#f00' }
+    disp_error = (msg) -> pre msg, style: { color: '#f00' }
     active = @active\get!
 
     return disp_error "fileder not found!" unless active
@@ -132,7 +134,7 @@ class Browser
       div!
     else
       warn "error: #{res}", trace
-      disp_error "error: #{res}"
+      disp_error "error: #{res}\n#{trace}"
 
   get_inspector: =>
     -- active property in inspect tab
@@ -163,7 +165,7 @@ class Browser
           if enabled
             button 'close', onclick: (_, e) -> @inspect\set false
       }
-      \append with div class: 'content'
+      \append with pre class: 'content'
         \append @inspect_prop\map (prop) ->
           @get_content prop, (prop) =>
             value, key = @get prop
diff --git a/root/articles/mmmfs/text$moonscript -> fn -> mmm$dom.moon b/root/articles/mmmfs/text$moonscript -> fn -> mmm$dom.moon
index 0d59c42..5619747 100644
--- a/root/articles/mmmfs/text$moonscript -> fn -> mmm$dom.moon
+++ b/root/articles/mmmfs/text$moonscript -> fn -> mmm$dom.moon
@@ -5,14 +5,7 @@
 =>
   html = require 'mmm.dom'
   import article, h1, h2, h3, p, div, a, sup, ol, li, span, code, pre, br from html
-
-  moon = if MODE == 'SERVER'
-    (str) -> code (str\match '^ *(..-) *$'), class: 'hljs'
-  else
-    (str) ->
-      result = window.hljs\highlight 'moonscript', (str\match '^ *(..-) *$'), true
-      with code class: 'hljs'
-        .innerHTML = result.value
+  import moon from (require 'mmm.highlighting').languages
 
   article with _this = {}
     append = (a) -> table.insert _this, a
diff --git a/root/meta/mmm.dom/text$moonscript -> mmm$dom.moon b/root/meta/mmm.dom/text$moonscript -> mmm$dom.moon
index fe1dfd4..1479c00 100644
--- a/root/meta/mmm.dom/text$moonscript -> mmm$dom.moon
+++ b/root/meta/mmm.dom/text$moonscript -> mmm$dom.moon
@@ -1,24 +1,15 @@
 import article, h1, h2, p, a, span, div, pre, code from require 'mmm.dom'
+import lua, moonscript from (require 'mmm.highlighting').languages
 
 mmmdom = -> code 'mmm.dom'
 
 source = do
-  build = (lang) -> if MODE == 'SERVER'
-    (str) -> code (str\match '^ *(..-) *$'), class: "hljs lang-#{lang}"
-  else
-    (str) ->
-      result = window.hljs\highlight lang, (str\match '^ *(..-) *$'), true
-      with code class: 'hljs'
-        .innerHTML = result.value
-
-  mklua, mkmoon = (build 'lua'), build 'moonscript'
-
-  (moon, lua, demo=true) ->
-    the_code = pre (mkmoon moon), (mklua lua), class: 'dual-code'
+  (moon_src, lua_src, demo=true) ->
+    the_code = pre (moonscript moon_src), (lua lua_src), class: 'dual-code'
 
     return the_code unless demo
 
-    example = assert load lua
+    example = assert load lua_src
     div the_code, div example!, class: 'example'
 
 article {
diff --git a/scss/browser.scss b/scss/browser.scss
index ce93604..524fc62 100644
--- a/scss/browser.scss
+++ b/scss/browser.scss
@@ -13,8 +13,21 @@
     flex: 1 1 0;
     min-width: 0;
 
-    &.inspector {
-      border-left: 8px solid #eeeeee;
+    &.inspector .content {
+      margin: 0;
+      padding: 0;
+      display: flex;
+
+      > * {
+        display: block;
+        margin: 2em;
+      }
+
+      > code.hljs {
+        margin: 0;
+        border-radius: 0;
+        flex: 1;
+      }
     }
 
     nav {