syntax highlight

frontend/assets/scss/main.scss

@@ -4,6 +4,9 @@
 // Import variables
 @import 'variables/index';
 
+// Syntax highlight
+@import '~/node_modules/highlight.js/scss/vs.scss';
+
 // Import fonts
 @import '~/node_modules/@fortawesome/fontawesome-free/css/all.min.css';
 
@@ -44,6 +47,22 @@ body {
     padding: 0;
 }
 
+pre {
+  code {
+    line-height: 1.2rem;
+
+    &.hljs {
+      border: solid 2px #EEE;
+      border-radius: 1px;
+    }  
+  }
+}
+
+code {
+  display: inline-block;
+  direction: ltr;
+}
+
 // support rtl
 [dir="rtl"] {
     body {

frontend/components/rich-editor.client.vue

@@ -66,21 +66,24 @@ const config = {
 	codeBlock: {
 		languages: [
 			{ language: 'plaintext', label: 'Plain text' },
-			{ language: 'go', label: 'Golang' },
+			{ language: 'bash', label: '‌Bash' },
 			{ language: 'c', label: 'C' },
 			{ language: 'cs', label: 'C#' },
 			{ language: 'cpp', label: 'C++' },
 			{ language: 'css', label: 'CSS' },
 			{ language: 'diff', label: 'Diff' },
+			{ language: 'go', label: 'Golang' },
 			{ language: 'html', label: 'HTML' },
 			{ language: 'java', label: 'Java' },
 			{ language: 'javascript', label: 'JavaScript' },
+			{ language: 'json', label: 'JSON' },
+			{ language: 'makefile', label: 'Makefile' },
 			{ language: 'php', label: 'PHP' },
 			{ language: 'python', label: 'Python' },
 			{ language: 'ruby', label: 'Ruby' },
 			{ language: 'typescript', label: 'TypeScript' },
-			{ language: 'json', label: 'JSON' },
-			{ language: 'xml', label: 'XML' }
+			{ language: 'xml', label: 'XML' },
+			{ language: 'yaml', label: 'YAML' }
 		]
 	}
 }

frontend/package.json

@@ -23,6 +23,7 @@
     "@vueform/multiselect": "^2.6.6",
     "bootstrap": "^5.3.2",
     "defu": "^6.1.4",
+    "highlight.js": "^11.9.0",
     "jwt-decode": "^4.0.0",
     "medium-zoom": "^1.1.0",
     "sass": "^1.75.0",

frontend/pages/articles/[uuid].vue

@@ -25,19 +25,23 @@
 </template>
 
 <script setup>
-    const {uuid} = useRoute().params;
+	import hljs from 'highlight.js'
 
-    const resolveFileUrl = useFilesUrlResolver().resolve
+	const {uuid} = useRoute().params;
 
-    const data = await $fetch(useApiUrlResolver().resolve(`api/articles/${uuid}`))
+	const resolveFileUrl = useFilesUrlResolver().resolve
 
-    useHead({
-        title: data.title,
-        meta: [
-            { name: 'description', content: data.excerpt },
-        ],
-        link: [
-            { rel: 'canonical', href: `/articles/${uuid}` }
-        ]
+	const data = await $fetch(useApiUrlResolver().resolve(`api/articles/${uuid}`))
+
+	useHead({
+		title: data.title,
+		meta: [
+			{ name: 'description', content: data.excerpt },
+		],
+		link: [
+			{ rel: 'canonical', href: `/articles/${uuid}` }
+		]
     })
+
+	onMounted(hljs.highlightAll)
 </script>