diff --git a/index.html b/index.html
index 59d9963..d485775 100644
--- a/index.html
+++ b/index.html
@@ -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>
diff --git a/main.js b/main.js
index d736b6c..32fc338 100644
--- a/main.js
+++ b/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 = "")
diff --git a/style.css b/style.css
index 2720e1c..7e273bc 100644
--- a/style.css
+++ b/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 {