add code highlight

src/main.ts

@@ -1,7 +1,8 @@
 import { createApp, defineAsyncComponent } from "vue";
+import { Dialog, Notify, Quasar, Loading } from "quasar";
+import "highlight.js/styles/stackoverflow-light.css";
 import App from "./App.vue";
 import router from "./router";
-import { Dialog, Notify, Quasar, Loading } from "quasar";
 import quasarUserOptions from "./quasar-user-options";
 
 import "quasar/src/css/index.sass";

src/modules/02_pages/MainPage.vue

@@ -2,16 +2,21 @@
 import { nextTick, onMounted, onUnmounted, ref } from "vue";
 import { useRoute } from "vue-router";
 import MarkdownIt, { type Token } from "markdown-it";
+import hljs from "highlight.js";
 
 // @ts-expect-error
 import mditFigureWithPCaption from "markdown-it-image-figures";
 import mditAnchor from "markdown-it-anchor";
+import mditHighlight from "markdown-it-highlightjs";
 import { useManualStore } from "@/stores/manual";
 import { storeToRefs } from "pinia";
 
-const md = new MarkdownIt().use(mditAnchor).use(mditFigureWithPCaption, {
-  figcaption: "alt",
-});
+const md = new MarkdownIt()
+  .use(mditAnchor)
+  .use(mditFigureWithPCaption, {
+    figcaption: "alt",
+  })
+  .use(mditHighlight, { hljs });
 
 const route = useRoute();
 const manual = useManualStore();
@@ -202,6 +207,10 @@ onUnmounted(() => {
   border-radius: 8px 8px 0px 0px;
   padding: 0px 16px;
 }
+.markdown :deep(.hljs) {
+  background-color: #ecebeb;
+  border-radius: 8px;
+}
 
 .markdown :deep(figcaption) {
   text-align: center;