highlight.js highlighting

package.json

@@ -11,6 +11,7 @@
     "axios": "^0.18.0",
     "filesize": "^4.1.2",
     "futoji": "^0.5.0",
+    "highlight.js": "^9.15.8",
     "jquery": "^3.4.0",
     "match-sorter": "^2.3.0",
     "particles.js": "^2.0.0",

src/utils/messageFormatter.js

@@ -2,6 +2,8 @@ import Formatter from 'futoji'
 import twemoji from 'twemoji'
 import emojiParser from '@/utils/emojiParser';
 import config from "@/config.js";
+import hljs from 'highlight.js'
+
 
 const futoji = new Formatter();
 const emojiFormatter = new Formatter();
@@ -22,7 +24,6 @@ function owo (text) {
 	return `<img class="emoji" draggable="false" alt=":${split[0]}:" src="${config.domain + "/files/" + url}">`
 }
 
-
 futoji.addTransformer({
 	name: 'custom emoji',
 	symbol: ':',
@@ -36,8 +37,6 @@ futoji.addTransformer({
 	}
 })
 
-
-
 futoji.addTransformer({
 	name: 'url',
 	open: 'http',
@@ -47,7 +46,6 @@ futoji.addTransformer({
 	transformer: text => '<a class="msg-link" target="_blank" href="http' + text + '">http' + text + '</a> '
 })
 
-
 futoji.addTransformer({
 	name: 'bold-and-italic',
 	symbol: '***',
@@ -86,7 +84,7 @@ futoji.addTransformer({
 	name: 'code-block',
 	symbol: '```',
 	recursive: false,
-	transformer: text => `<div class="codeblock"><code>${formatCode(text).trim()}</code></div>`,
+	transformer: (text) => `<div class="codeblock"><code>${hljs.highlightAuto(formatCode(text).code).value}</code></div>`
 })
 
 futoji.addTransformer({
@@ -105,11 +103,8 @@ export default (message) => {
 	return message;
 }
 
-
-
-
 /**
- * format code to add syntax highlighting
+ * format code to get language and code
  */
 function formatCode(text) {
 	// matches if word until newline
@@ -120,14 +115,19 @@ function formatCode(text) {
 		let language = nameRegex.exec(text)[1]
 		let newText = text.replace(nameRegex, '')
 
-		// TODO: format newText with language
-
-		return newText
+		return {
+			lang: language,
+			code: newText
+		}
 	}
 
-	return text
+	return {
+		lang: '',
+		code: text
+	}
 }
 
+// todo: replace with well tested / faster method
 function escapeHtml(unsafe) {
 	return unsafe
 		.replace(/&/g, "&amp;")

yarn.lock

@@ -4014,7 +4014,7 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
-highlight.js@^9.6.0:
+highlight.js@^9.15.8, highlight.js@^9.6.0:
   version "9.15.8"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.15.8.tgz#f344fda123f36f1a65490e932cf90569e4999971"
   integrity sha512-RrapkKQWwE+wKdF73VsOa2RQdIoO3mxwJ4P8mhbI6KYJUraUHRKM5w5zQQKXNk0xNL4UVRdulV9SBJcmzJNzVA==