Add highlight & add this in the courseDetail page

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@quasar/extras": "^1.15.1",
     "axios": "^0.27.2",
+    "highlight.js": "^11.6.0",
     "marked": "^4.0.18",
     "pinia": "^2.0.17",
     "quasar": "^2.7.7",
@@ -20,6 +21,7 @@
   },
   "devDependencies": {
     "@quasar/vite-plugin": "^1.1.1",
+    "@types/highlightjs": "^9.12.2",
     "@types/jsdom": "^20.0.0",
     "@types/marked": "^4.0.3",
     "@types/node": "^16.11.47",

pnpm-lock.yaml

@@ -3,6 +3,7 @@ lockfileVersion: 5.4
 specifiers:
   '@quasar/extras': ^1.15.1
   '@quasar/vite-plugin': ^1.1.1
+  '@types/highlightjs': ^9.12.2
   '@types/jsdom': ^20.0.0
   '@types/marked': ^4.0.3
   '@types/node': ^16.11.47
@@ -10,6 +11,7 @@ specifiers:
   '@vue/test-utils': ^2.0.2
   '@vue/tsconfig': ^0.1.3
   axios: ^0.27.2
+  highlight.js: ^11.6.0
   jsdom: ^20.0.0
   marked: ^4.0.18
   npm-run-all: ^4.1.5
@@ -26,6 +28,7 @@ specifiers:
 dependencies:
   '@quasar/extras': 1.15.1
   axios: 0.27.2
+  highlight.js: 11.6.0
   marked: 4.0.18
   pinia: 2.0.18_j6bzmzd4ujpabbp5objtwxyjp4
   quasar: 2.7.7
@@ -34,6 +37,7 @@ dependencies:
 
 devDependencies:
   '@quasar/vite-plugin': 1.1.1_u4xkwwy3fz7j76akrroq6fhpke
+  '@types/highlightjs': 9.12.2
   '@types/jsdom': 20.0.0
   '@types/marked': 4.0.3
   '@types/node': 16.11.48
@@ -114,6 +118,10 @@ packages:
     resolution: {integrity: sha512-hC7OMnszpxhZPduX+m+nrx+uFoLkWOMiR4oa/AZF3MuSETYTZmFfJAHqZEM8MVlvfG7BEUcgvtwoCTxBp6hm3g==}
     dev: true
 
+  /@types/highlightjs/9.12.2:
+    resolution: {integrity: sha512-oW2pEKwshxwBW1nVUizWQg/tnhboRtKrUKnF2hd6l4BZ0shr5ZjQ4ra/82+NEH6uWeM8JjrMGCux5enQXOQbTA==}
+    dev: true
+
   /@types/jsdom/20.0.0:
     resolution: {integrity: sha512-YfAchFs0yM1QPDrLm2VHe+WHGtqms3NXnXAMolrgrVP6fgBHHXy1ozAbo/dFtPNtZC/m66bPiCTWYmqp1F14gA==}
     dependencies:
@@ -947,6 +955,11 @@ packages:
       function-bind: 1.1.1
     dev: true
 
+  /highlight.js/11.6.0:
+    resolution: {integrity: sha512-ig1eqDzJaB0pqEvlPVIpSSyMaO92bH1N2rJpLMN/nX396wTpDA4Eq0uK+7I/2XG17pFaaKE0kjV/XPeGt7Evjw==}
+    engines: {node: '>=12.0.0'}
+    dev: false
+
   /hosted-git-info/2.8.9:
     resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
     dev: true

src/App.vue

@@ -109,7 +109,7 @@ import { RouterView } from 'vue-router'</script>
 html {
   font-size: 20px;
 
-  * {
+  *:not([class*="hljs"]) {
     font-family: "Unistra C", "Unistra A", sans-serif;
   }
 

src/plugins/highlight.ts

+import 'highlight.js/styles/base16/atelier-forest.css'
+import highlight from 'highlight.js/lib/core'
+
+import apache from 'highlight.js/lib/languages/apache'
+import bash from 'highlight.js/lib/languages/bash'
+import css from 'highlight.js/lib/languages/css'
+import django from 'highlight.js/lib/languages/django'
+import dockerfile from 'highlight.js/lib/languages/dockerfile'
+import http from 'highlight.js/lib/languages/http'
+import javascript from 'highlight.js/lib/languages/javascript'
+import json from 'highlight.js/lib/languages/json'
+import markdown from 'highlight.js/lib/languages/markdown'
+import nginx from 'highlight.js/lib/languages/nginx'
+import nodeRepl from 'highlight.js/lib/languages/node-repl'
+import pgsql from 'highlight.js/lib/languages/pgsql'
+import php from 'highlight.js/lib/languages/php'
+import phpTemplate from 'highlight.js/lib/languages/php-template'
+import python from 'highlight.js/lib/languages/python'
+import pythonRepl from 'highlight.js/lib/languages/python-repl'
+import scss from 'highlight.js/lib/languages/scss'
+import shell from 'highlight.js/lib/languages/shell'
+import sql from 'highlight.js/lib/languages/sql'
+import yaml from 'highlight.js/lib/languages/yaml'
+import typescript from 'highlight.js/lib/languages/typescript'
+import xml from 'highlight.js/lib/languages/xml'
+
+highlight.registerLanguage('apache', apache)
+highlight.registerLanguage('bash', bash)
+highlight.registerLanguage('css', css)
+highlight.registerLanguage('django', django)
+highlight.registerLanguage('dockerfile', dockerfile)
+highlight.registerLanguage('http', http)
+highlight.registerLanguage('javascript', javascript)
+highlight.registerLanguage('json', json)
+highlight.registerLanguage('markdown', markdown)
+highlight.registerLanguage('nginx', nginx)
+highlight.registerLanguage('node-repl', nodeRepl)
+highlight.registerLanguage('pgsql', pgsql)
+highlight.registerLanguage('php', php)
+highlight.registerLanguage('php-template', phpTemplate)
+highlight.registerLanguage('python', python)
+highlight.registerLanguage('python-repl', pythonRepl)
+highlight.registerLanguage('scss', scss)
+highlight.registerLanguage('shell', shell)
+highlight.registerLanguage('sql', sql)
+highlight.registerLanguage('yaml', yaml)
+highlight.registerLanguage('typescript', typescript)
+highlight.registerLanguage('xml', xml)
+
+export default highlight

src/views/CourseDetail.vue

 <script lang="ts" setup>
 import PageHeader from '@/components/Core/PageHeader.vue'
-import { computed, onMounted, toRefs } from 'vue'
+import { computed, onMounted, ref, toRefs } from 'vue'
 import { useCourseStore } from '@/stores/useCourseStore'
 import { useQuasar } from 'quasar'
 import type { PageHeaderThumbnail } from '#/Picture'
+import highlight from '@/plugins/highlight'
 
 const props = defineProps<{
   id: string;
 }>()
 const { id } = toRefs(props)
 
+const courseContainer = ref<HTMLElement | null>(null)
 const courseStore = useCourseStore()
 const { notify } = useQuasar()
 onMounted(async () => {
   try {
     await courseStore.loadCourse(parseInt(id.value, 10))
+
+    if (courseContainer.value) {
+      courseContainer.value.querySelectorAll('pre code')
+                     .forEach(block => {
+                       highlight.highlightElement(block as HTMLElement)
+                     })
+    }
   } catch (error) {
     notify({
       message: (error as Error).message,
@@ -27,6 +36,7 @@ const thumbnail = computed<PageHeaderThumbnail>(() => ({
   url: courseStore.courseDisplayed?.attributes.thumbnail.data.attributes.url || '',
   alt: courseStore.courseDisplayed?.attributes.thumbnail.data.attributes.alternativeText || '',
 }))
+
 </script>
 
 <template>
@@ -40,7 +50,10 @@ const thumbnail = computed<PageHeaderThumbnail>(() => ({
         <h1>{{ courseStore.courseDisplayed?.attributes.title || '' }}</h1>
       </header>
 
-      <section v-html="courseStore.courseDisplayed?.attributes.content || ''"/>
+      <section
+        ref="courseContainer"
+        v-html="courseStore.courseDisplayed?.attributes.content || ''"
+      />
     </article>
   </main>
 </template>