flynx/pWiki
1
1
Fork 0
mirror of https://github.com/flynx/pWiki.git synced 2025-10-30 02:20:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

added experimental syntax highlighting...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2023-10-13 05:10:17 +03:00
parent 28501e458b
commit 53ad572369
3 changed files with 38 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
experiments/outline-editor/editor.css
View File

@ -142,11 +142,18 @@ editor .outline .block:focus {
} }
.editor .outline .block.focused:not(:focus)>.text { .editor .outline .block.focused:not(:focus)>.text {
background: rgba(0,0,0,0.01); 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; border-bottom: solid 1px silver;
} }
/* hide children... */
.editor .outline .block[collapsed]>.children {
display: none;
}
/* click/tap zones for expand button... */ /* click/tap zones for expand button... */
.editor .outline .block>.view:before, .editor .outline .block>.view:before,
@ -198,11 +205,6 @@ editor .outline .block:focus {
content: "●"; content: "●";
} }
/* collapse -- hide children... */
.editor .outline .block[collapsed] .block {
display: none;
}
/* XXX are we selecting subtrees or blocks??? */ /* XXX are we selecting subtrees or blocks??? */
.editor .outline [selected] { .editor .outline [selected] {
background: silver; background: silver;
@ -456,15 +458,17 @@ editor .outline .block:focus {
/*---------------------------------------------------------- Code ---*/ /*---------------------------------------------------------- Code ---*/
.editor .outline .block>.view pre, .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; padding: 0.1em 0.3em;
font-family: monospace; font-family: monospace;
background: rgba(0,0,0,0.07); background: rgba(0,0,0,0.07);
border-radius: 0.2em; border-radius: 0.2em;
} }
.editor .outline .block>.view pre { .editor .outline .block>.view pre>code {
padding: 1em 1em; display: block;
padding-bottom: 1.5em; padding: 0.6em 0.6em;
padding-bottom: 0.8em;
} }

15
experiments/outline-editor/editor.js
View File

@ -337,8 +337,11 @@ var Outline = {
.replace(/\\(?!`)/g, '\\\\') } .replace(/\\(?!`)/g, '\\\\') }
var quote = function(_, code){ var quote = function(_, code){
return `<code>${quoteText(code)}</code>` } return `<code>${quoteText(code)}</code>` }
var pre = function(_, code){ var pre = function(_, language, code){
return `<pre>${ quoteText(code) }</pre>` } language = language ?
'language-'+language
: language
return `<pre><code class="${language}">${ quoteText(code) }</code></pre>` }
var table = function(_, body){ var table = function(_, body){
return `<table><tr><td>${ return `<table><tr><td>${
body body
@ -401,7 +404,7 @@ var Outline = {
.replace(/(?<!\\)~(?=[^\s~])(([^~]|\\~)*[^\s~])(?<!\\)~/gm, '<s>$1</s>') .replace(/(?<!\\)~(?=[^\s~])(([^~]|\\~)*[^\s~])(?<!\\)~/gm, '<s>$1</s>')
.replace(/(?<!\\)_(?=[^\s_])(([^_]|\\_)*[^\s_])(?<!\\)_/gm, '<i>$1</i>') .replace(/(?<!\\)_(?=[^\s_])(([^_]|\\_)*[^\s_])(?<!\\)_/gm, '<i>$1</i>')
// code/quoting... // code/quoting...
.replace(/(?<!\\)```\s*\n((\n|.)*)\h*(?<!\\)```\s*/g, pre) .replace(/(?<!\\)```(.*)\s*\n((\n|.)*)\h*(?<!\\)```\s*/g, pre)
.replace(/(?<!\\)`(?=[^\s])(([^`]|\\`)*[^\s])(?<!\\)`/gm, quote) .replace(/(?<!\\)`(?=[^\s])(([^`]|\\`)*[^\s])(?<!\\)`/gm, quote)
// XXX support "\==" in mark... // XXX support "\==" in mark...
.replace(/(?<!\\)==(?=[^\s])(.*[^\s])(?<!\\)==/gm, '<mark>$1</mark>') .replace(/(?<!\\)==(?=[^\s])(.*[^\s])(?<!\\)==/gm, '<mark>$1</mark>')
@ -822,7 +825,11 @@ var Outline = {
if(node.nodeName == 'TEXTAREA' if(node.nodeName == 'TEXTAREA'
&& node?.nextElementSibling?.nodeName == 'SPAN'){ && node?.nextElementSibling?.nodeName == 'SPAN'){
var block = node.parentElement 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... // update .code...
var update_code_timeout var update_code_timeout
outline.addEventListener('change', outline.addEventListener('change',

17
experiments/outline-editor/index.html
View File

@ -2,7 +2,10 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link href="editor.css" rel="stylesheet"/> <link rel="stylesheet" href="css/default.css">
<link rel="stylesheet" href="editor.css"/>
<style> <style>
.add-row { .add-row {
@ -10,6 +13,9 @@
} }
</style> </style>
<script src="lib/highlight.min.js"></script>
<script src="generic.js"></script> <script src="generic.js"></script>
<script src="editor.js"></script> <script src="editor.js"></script>
<script> <script>
@ -20,7 +26,11 @@ var setup = function(){
window.editor = { window.editor = {
__proto__: Outline, __proto__: Outline,
}.setup( }.setup(
document.querySelector('.editor')) } document.querySelector('.editor'))
// XXX make this a plugin...
window.hljs
&& hljs.highlightAll() }
</script> </script>
</head> </head>
@ -142,12 +152,11 @@ var setup = function(){
- Code - Code
- Inline quoting `html <b>code</b>` - Inline quoting `html <b>code</b>`
- code blocks - code blocks
``` ```javascript
var text = 'Hello, world!' var text = 'Hello, world!'
console.log(text) console.log(text)
``` ```
_syntax higlighting not yet supported..._
- Line - Line
- --- - ---
- Markers: ASAP, BUG, FIX, HACK, STUB, WARNING, and CAUTION - Markers: ASAP, BUG, FIX, HACK, STUB, WARNING, and CAUTION