diff --git a/experiments/outline-editor/editor.css b/experiments/outline-editor/editor.css index b4203ef..0631aae 100755 --- a/experiments/outline-editor/editor.css +++ b/experiments/outline-editor/editor.css @@ -142,11 +142,18 @@ editor .outline .block:focus { } .editor .outline .block.focused:not(:focus)>.text { background: rgba(0,0,0,0.01); + border-bottom: solid 2px rgba(0,0,0,0.03); } -.editor .outline div[collapsed] { +/* collapsed block... */ +.editor .outline .block[collapsed] { border-bottom: solid 1px silver; } +/* hide children... */ +.editor .outline .block[collapsed]>.children { + display: none; +} + /* click/tap zones for expand button... */ .editor .outline .block>.view:before, @@ -198,11 +205,6 @@ editor .outline .block:focus { content: "●"; } -/* collapse -- hide children... */ -.editor .outline .block[collapsed] .block { - display: none; -} - /* XXX are we selecting subtrees or blocks??? */ .editor .outline [selected] { background: silver; @@ -456,15 +458,17 @@ editor .outline .block:focus { /*---------------------------------------------------------- Code ---*/ .editor .outline .block>.view pre, -.editor .outline .block>.view code { +.editor .outline .block>.view>code, +.editor .outline .block>.view :not(pre)>code { padding: 0.1em 0.3em; font-family: monospace; background: rgba(0,0,0,0.07); border-radius: 0.2em; } -.editor .outline .block>.view pre { - padding: 1em 1em; - padding-bottom: 1.5em; +.editor .outline .block>.view pre>code { + display: block; + padding: 0.6em 0.6em; + padding-bottom: 0.8em; } diff --git a/experiments/outline-editor/editor.js b/experiments/outline-editor/editor.js index 82c0a39..26757a1 100755 --- a/experiments/outline-editor/editor.js +++ b/experiments/outline-editor/editor.js @@ -337,8 +337,11 @@ var Outline = { .replace(/\\(?!`)/g, '\\\\') } var quote = function(_, code){ return `${quoteText(code)}` } - var pre = function(_, code){ - return `
${ quoteText(code) }
` } + var pre = function(_, language, code){ + language = language ? + 'language-'+language + : language + return `
${ quoteText(code) }
` } var table = function(_, body){ return `
${ body @@ -401,7 +404,7 @@ var Outline = { .replace(/(?$1') .replace(/(?$1') // code/quoting... - .replace(/(?$1') @@ -822,7 +825,11 @@ var Outline = { if(node.nodeName == 'TEXTAREA' && node?.nextElementSibling?.nodeName == 'SPAN'){ var block = node.parentElement - that.update(block, { text: node.value }) } }) + that.update(block, { text: node.value }) } + + // XXX do a plugin... + window.hljs + && hljs.highlightAll() }) // update .code... var update_code_timeout outline.addEventListener('change', diff --git a/experiments/outline-editor/index.html b/experiments/outline-editor/index.html index ea7c722..d5044f5 100755 --- a/experiments/outline-editor/index.html +++ b/experiments/outline-editor/index.html @@ -2,7 +2,10 @@ - + + + + + + + @@ -142,12 +152,11 @@ var setup = function(){ - Code - Inline quoting `html code` - code blocks - ``` + ```javascript var text = 'Hello, world!' console.log(text) ``` - _syntax higlighting not yet supported..._ - Line - --- - Markers: ASAP, BUG, FIX, HACK, STUB, WARNING, and CAUTION