added: md syntax highlight
This commit is contained in:
parent
431cac35c3
commit
c84c300f44
|
@ -49,6 +49,7 @@
|
|||
|
||||
<div id="notecontent">
|
||||
<textarea id="md" spellcheck="false" oninput="datachanged()" onkeydown="editorkeydown()" onclick="clickeditor()"></textarea>
|
||||
<div hidden id="colored"></div>
|
||||
<div hidden id="preview"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
76
main.js
76
main.js
|
@ -14,7 +14,8 @@ var defaultsettings =
|
|||
titleinaccentcolor: false,
|
||||
enablenetwork: false,
|
||||
titlebydefault: false,
|
||||
linksinnewtab: true
|
||||
linksinnewtab: true,
|
||||
colors: true
|
||||
};
|
||||
|
||||
//builtin
|
||||
|
@ -1246,6 +1247,11 @@ function loadsettings()
|
|||
{
|
||||
toggletitle();
|
||||
}
|
||||
|
||||
colored.hidden = !settings.colors;
|
||||
md.style.color = settings.colors ? "transparent" : "inherit";
|
||||
md.style.background = settings.colors ? "transparent" : "inherit";
|
||||
applycolors();
|
||||
}
|
||||
|
||||
function checksaved()
|
||||
|
@ -1617,11 +1623,6 @@ function selectlines()
|
|||
md.selectionEnd = range.end;
|
||||
}
|
||||
|
||||
function seteditorcontent(content)
|
||||
{
|
||||
md.value = content;
|
||||
}
|
||||
|
||||
function ontopbarclick()
|
||||
{
|
||||
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()
|
||||
{
|
||||
applycolors();
|
||||
resize();
|
||||
|
||||
saved = false;
|
||||
|
@ -2193,7 +2252,7 @@ function restore()
|
|||
{
|
||||
if (confirm('restore "' + currentnote.title + '"?'))
|
||||
{
|
||||
seteditorcontent(backup);
|
||||
md.value = backup;
|
||||
datachanged();
|
||||
}
|
||||
}
|
||||
|
@ -2527,7 +2586,7 @@ function bindfile(note)
|
|||
title.value = note.title;
|
||||
setwindowtitle();
|
||||
|
||||
seteditorcontent(note.content || "");
|
||||
md.value = note.content || "";
|
||||
preview.innerHTML = md2html(md.value);
|
||||
|
||||
if (changed)
|
||||
|
@ -2543,6 +2602,7 @@ function bindfile(note)
|
|||
}
|
||||
|
||||
setpos(note.pos || 0);
|
||||
applycolors();
|
||||
}
|
||||
|
||||
function defaultheaders(title, tags = "")
|
||||
|
|
20
style.css
20
style.css
|
@ -55,6 +55,26 @@ body::-webkit-scrollbar-thumb {
|
|||
font-size: inherit;
|
||||
line-height: 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 {
|
||||
|
|
Loading…
Reference in New Issue