✨ Added code highlighting using highlightjs

liyasthomas · liyasthomas · commit d0c8cf2e382f · 2019-04-18T07:35:16.000+05:30
diff --git a/index.css b/index.css
@@ -226,12 +226,10 @@ code {
 	font-family: 'Roboto Mono', "SF Mono", "Lucida Console", Monaco, monospace;
 	font-size: 16px;
 	font-weight: 600;
+	border-radius: 8px;
 }
 
 pre {
-	background-color: var(--dbg-color);
-	padding: 8px;
-	border-radius: 8px;
 	white-space: pre-wrap;
 }
 
diff --git a/index.html b/index.html
@@ -63,6 +63,8 @@
 
 	</script>
 	<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.15.6/build/styles/nord.min.css">
+	<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.15.6/build/highlight.min.js"></script>
 </head>
 
 <body>
diff --git a/index.js b/index.js
@@ -6,6 +6,9 @@ function keyup() {
 		var wordCount = document.getElementById('content').innerText.trim().replace(regex, ' ').split(' ').length;
 		document.getElementById('wordcount').innerHTML = wordCount + " words";
 		document.getElementById('save').disabled = false;
+		document.querySelectorAll('pre code').forEach((block) => {
+			hljs.highlightBlock(block);
+		});
 	} else {
 		document.getElementById('content').innerHTML = "";
 		document.getElementById('wordcount').innerHTML = "";

Original file line number	Diff line number	Diff line change
`@@ -226,12 +226,10 @@ code {`
`226`	`226`	`font-family: 'Roboto Mono', "SF Mono", "Lucida Console", Monaco, monospace;`
`227`	`227`	`font-size: 16px;`
`228`	`228`	`font-weight: 600;`
	`229`	`+ border-radius: 8px;`
`229`	`230`	`}`
`230`	`231`
`231`	`232`	`pre {`
`232`		`- background-color: var(--dbg-color);`
`233`		`- padding: 8px;`
`234`		`- border-radius: 8px;`
`235`	`233`	`white-space: pre-wrap;`
`236`	`234`	`}`
`237`	`235`