flynx/pWiki
1
1
Fork 0
mirror of https://github.com/flynx/pWiki.git synced 2025-10-29 18:10:09 +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 {
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;
}

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

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

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

@ -2,7 +2,10 @@
<html>
<head>
<meta charset="UTF-8">
<link href="editor.css" rel="stylesheet"/>
<link rel="stylesheet" href="css/default.css">
<link rel="stylesheet" href="editor.css"/>
<style>
.add-row {
@ -10,6 +13,9 @@
}
</style>
<script src="lib/highlight.min.js"></script>
<script src="generic.js"></script>
<script src="editor.js"></script>
<script>
@ -20,7 +26,11 @@ var setup = function(){
window.editor = {
__proto__: Outline,
}.setup(
document.querySelector('.editor')) }
document.querySelector('.editor'))
// XXX make this a plugin...
window.hljs
&& hljs.highlightAll() }
</script>
</head>
@ -142,12 +152,11 @@ var setup = function(){
- Code
- Inline quoting `html <b>code</b>`
- 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