added: md syntax highlight

This commit is contained in:
quenousimporte 2023-09-23 09:02:02 +02:00
parent 431cac35c3
commit c84c300f44
3 changed files with 89 additions and 8 deletions

View File

@ -49,6 +49,7 @@
<div id="notecontent"> <div id="notecontent">
<textarea id="md" spellcheck="false" oninput="datachanged()" onkeydown="editorkeydown()" onclick="clickeditor()"></textarea> <textarea id="md" spellcheck="false" oninput="datachanged()" onkeydown="editorkeydown()" onclick="clickeditor()"></textarea>
<div hidden id="colored"></div>
<div hidden id="preview"></div> <div hidden id="preview"></div>
</div> </div>
</div> </div>

76
main.js
View File

@ -14,7 +14,8 @@ var defaultsettings =
titleinaccentcolor: false, titleinaccentcolor: false,
enablenetwork: false, enablenetwork: false,
titlebydefault: false, titlebydefault: false,
linksinnewtab: true linksinnewtab: true,
colors: true
}; };
//builtin //builtin
@ -1246,6 +1247,11 @@ function loadsettings()
{ {
toggletitle(); toggletitle();
} }
colored.hidden = !settings.colors;
md.style.color = settings.colors ? "transparent" : "inherit";
md.style.background = settings.colors ? "transparent" : "inherit";
applycolors();
} }
function checksaved() function checksaved()
@ -1617,11 +1623,6 @@ function selectlines()
md.selectionEnd = range.end; md.selectionEnd = range.end;
} }
function seteditorcontent(content)
{
md.value = content;
}
function ontopbarclick() function ontopbarclick()
{ {
if (title.hidden) if (title.hidden)
@ -2025,8 +2026,66 @@ function save()
} }
} }
function applycolors()
{
if (!settings.colors)
{
return;
}
var lines = md.value.split("\n");
header = false;
code = false;
var result = [];
lines.every( (line, i) =>
{
if (line.startsWith("#"))
{
line = line.replace(/(#*)/g, "<span style='color:" + settings.accentcolor + "'>$1</span>");
line = "<b><span style='color:black'>" + line + "</span></b>";
}
if (line.startsWith("* "))
{
line = line.replace(/(\* )/g, "<span style='color:" + settings.accentcolor + "'>$1</span>");
}
if (i == 0 && line == "---")
{
header = true;
}
if (header)
{
if (i > 0 && line == "---")
{
header = false;
}
line = "<span style='color:lightgrey'>" + line + "</span>";
}
if (line == "```" && !code)
{
code = true;
line = "<div style='background:lightgrey'>" + line;
}
if (line == "```" && code)
{
code = false;
line = line + "</div>";
}
line = line.replace(/(\[\[.*\]\])/g, "<u><span style='cursor:pointer'>$1</span></u>");
line = line.replace(/(\*\*.*\*\*)/g, "<b>$1</b>");
line = line.replace(/(\*.*\*)/g, "<em>$1</em>");
result.push(line);
return true;
});
colored.innerHTML = result.join("<br>");
}
function datachanged() function datachanged()
{ {
applycolors();
resize(); resize();
saved = false; saved = false;
@ -2193,7 +2252,7 @@ function restore()
{ {
if (confirm('restore "' + currentnote.title + '"?')) if (confirm('restore "' + currentnote.title + '"?'))
{ {
seteditorcontent(backup); md.value = backup;
datachanged(); datachanged();
} }
} }
@ -2527,7 +2586,7 @@ function bindfile(note)
title.value = note.title; title.value = note.title;
setwindowtitle(); setwindowtitle();
seteditorcontent(note.content || ""); md.value = note.content || "";
preview.innerHTML = md2html(md.value); preview.innerHTML = md2html(md.value);
if (changed) if (changed)
@ -2543,6 +2602,7 @@ function bindfile(note)
} }
setpos(note.pos || 0); setpos(note.pos || 0);
applycolors();
} }
function defaultheaders(title, tags = "") function defaultheaders(title, tags = "")

View File

@ -55,6 +55,26 @@ body::-webkit-scrollbar-thumb {
font-size: inherit; font-size: inherit;
line-height: inherit; line-height: inherit;
background-color: inherit; background-color: inherit;
/* coloring */
position: absolute;
top: 0;
left: 0;
padding: 0;
}
#notecontent {
position: relative;
}
#colored {
position: absolute;
white-space: pre;
top: 0;
left: 0;
z-index: -1;
width: 100%;
text-wrap: inherit;
} }
#network { #network {