render code blocks using highlight.js

frontend/package.json

@@ -14,6 +14,7 @@
 	"type": "module",
 	"dependencies": {
 		"axios": "^1.2.6",
+		"highlight.js": "^11.9.0",
 		"identicons": "^0.1.0",
 		"lodash-es": "^4.17.21",
 		"moment": "^2.29.4",

frontend/src/app.html

@@ -6,9 +6,7 @@
 	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 	<meta name="viewport" content="width=device-width" />
 
-	<link rel=stylesheet
-		href=/css/solarized-dark.min-BA98F.css>
-	<script src=/js/highlight.min-D8D27.js></script>
+	<link rel=stylesheet href=/css/github-dark.css>
 	<script src=/js/discord-markdown.min.js></script>
 	<script>document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('.chatlog__markdown-pre--multiline').forEach(e => hljs.highlightBlock(e)); });</script>
 	<script

frontend/src/components/messages/MessageMarkdown.svelte

@@ -104,6 +104,9 @@
 
 
 <style>
+    :global(.message-markdown pre) {
+        margin: 6px 0 0 0;
+    }
     :global(.message-markdown) {
         line-height: 22px;
     }

frontend/src/components/messages/NewMessage.svelte

@@ -604,4 +604,18 @@
 		image-rendering: crisp-edges;
 		background-color: white;  /*For identicons*/
 	}
+
+
+	:global(.hljs-codeblock) {
+		display: block;
+		background-color: #2b2d31;
+		border-radius: 4px;
+		border: 1px solid #232428;
+		margin-right: 150px;
+
+		font-size: 14px;
+		padding: 7px;
+		white-space: pre-wrap;
+		line-height: 18px;
+	}
 </style>

frontend/src/js/markdownParser.ts

@@ -3,6 +3,7 @@
 import SimpleMarkdown from 'simple-markdown';
 import { renderTimestamp } from 'src/js/time';
 import { checkUrl } from './helpers';
+import hljs from 'highlight.js';
 
 function escapeRegExp(string: string) {
     // https://stackoverflow.com/a/6969486
@@ -408,14 +409,39 @@ parse: function(capture, recurseParse, state) {
   },
 }
 
+// code blocks
+// ```js
+// code
+// ```
+
+const codeBlock = {
+    order: SimpleMarkdown.defaultRules.codeBlock.order - 0.1,
+    match: function(source, state, lookbehind) {
+        return /^```([a-z0-9]*)\n([\s\S]*?)\n```/.exec(source);
+    },
+    parse: function(capture, recurseParse, state) {
+        return {
+            type: 'codeBlock',
+            language: capture[1],
+            content: capture[2],
+        };
+    },
+    html: function(node, recurseOutput, state) {
+        const highlightedCode = hljs.highlight(node.language, node.content).value;
+        return `<pre><code class="hljs-codeblock language-${node.language}">${highlightedCode}</code></pre>`;
+    },
+}
+
+
 export const rules = {
     array: SimpleMarkdown.defaultRules.array,
     customHeading: customHeading,
     // heading: SimpleMarkdown.defaultRules.heading,  // disabled because customHeading is used instead
     nptable: SimpleMarkdown.defaultRules.nptable,
     // lheading: SimpleMarkdown.defaultRules.lheading,
     hr: SimpleMarkdown.defaultRules.hr,
-    codeBlock: SimpleMarkdown.defaultRules.codeBlock,
+    codeBlock: codeBlock,
+    // codeBlock: SimpleMarkdown.defaultRules.codeBlock,
     fence: SimpleMarkdown.defaultRules.fence,
     blockQuote: SimpleMarkdown.defaultRules.blockQuote,
     list: SimpleMarkdown.defaultRules.list,

frontend/static/css/github-dark.css

@@ -0,0 +1,127 @@
+/*!
+  source - https://raw.githubusercontent.com/highlightjs/highlight.js/main/src/styles/github-dark.css
+
+  Theme: GitHub Dark
+  Description: Dark theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-dark
+  Current colors taken from GitHub's CSS
+*/
+
+.hljs {
+    color: #c9d1d9;
+    background: #0d1117;
+  }
+
+  .hljs-doctag,
+  .hljs-keyword,
+  .hljs-meta .hljs-keyword,
+  .hljs-template-tag,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-variable.language_ {
+    /* prettylights-syntax-keyword */
+    color: #ff7b72;
+  }
+
+  .hljs-title,
+  .hljs-title.class_,
+  .hljs-title.class_.inherited__,
+  .hljs-title.function_ {
+    /* prettylights-syntax-entity */
+    color: #d2a8ff;
+  }
+
+  .hljs-attr,
+  .hljs-attribute,
+  .hljs-literal,
+  .hljs-meta,
+  .hljs-number,
+  .hljs-operator,
+  .hljs-variable,
+  .hljs-selector-attr,
+  .hljs-selector-class,
+  .hljs-selector-id {
+    /* prettylights-syntax-constant */
+    color: #79c0ff;
+  }
+
+  .hljs-regexp,
+  .hljs-string,
+  .hljs-meta .hljs-string {
+    /* prettylights-syntax-string */
+    color: #a5d6ff;
+  }
+
+  .hljs-built_in,
+  .hljs-symbol {
+    /* prettylights-syntax-variable */
+    color: #ffa657;
+  }
+
+  .hljs-comment,
+  .hljs-code,
+  .hljs-formula {
+    /* prettylights-syntax-comment */
+    color: #8b949e;
+  }
+
+  .hljs-name,
+  .hljs-quote,
+  .hljs-selector-tag,
+  .hljs-selector-pseudo {
+    /* prettylights-syntax-entity-tag */
+    color: #7ee787;
+  }
+
+  .hljs-subst {
+    /* prettylights-syntax-storage-modifier-import */
+    color: #c9d1d9;
+  }
+
+  .hljs-section {
+    /* prettylights-syntax-markup-heading */
+    color: #1f6feb;
+    font-weight: bold;
+  }
+
+  .hljs-bullet {
+    /* prettylights-syntax-markup-list */
+    color: #f2cc60;
+  }
+
+  .hljs-emphasis {
+    /* prettylights-syntax-markup-italic */
+    color: #c9d1d9;
+    font-style: italic;
+  }
+
+  .hljs-strong {
+    /* prettylights-syntax-markup-bold */
+    color: #c9d1d9;
+    font-weight: bold;
+  }
+
+  .hljs-addition {
+    /* prettylights-syntax-markup-inserted */
+    color: #aff5b4;
+    background-color: #033a16;
+  }
+
+  .hljs-deletion {
+    /* prettylights-syntax-markup-deleted */
+    color: #ffdcd7;
+    background-color: #67060c;
+  }
+
+  .hljs-char.escape_,
+  .hljs-link,
+  .hljs-params,
+  .hljs-property,
+  .hljs-punctuation,
+  .hljs-tag {
+    /* purposely ignored */
+  }