From c09cf6d0544a555400033395ef6942c81576ab8a Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Fri, 5 Jul 2024 09:32:59 +0700
Subject: [PATCH] fix: add highlight js in manual

---
 src/modules/01_manual/MainPage.vue | 353 +++++++++++++++--------------
 1 file changed, 188 insertions(+), 165 deletions(-)

diff --git a/src/modules/01_manual/MainPage.vue b/src/modules/01_manual/MainPage.vue
index a668386f..cb9b931b 100644
--- a/src/modules/01_manual/MainPage.vue
+++ b/src/modules/01_manual/MainPage.vue
@@ -1,263 +1,286 @@
 <script lang="ts" setup>
-import { nextTick, onMounted, onUnmounted, ref } from "vue"
-import { useRoute } from "vue-router"
-import MarkdownIt, { type Token } from "markdown-it"
+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 { useManualStore } from "@/stores/manual"
-import { storeToRefs } from "pinia"
+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";
 // @ts-expect-error
-import mditVideo from "markdown-it-video"
+import mditVideo from "markdown-it-video";
 
 const md = new MarkdownIt()
-	.use(mditAnchor)
-	.use(mditVideo, {
-		youtube: { width: "70%", height: "auto", autoplay: false },
-	})
-	.use(mditFigureWithPCaption, {
-		figcaption: "alt",
-		html: true,
-		linkify: true,
-		typography: true,
-	})
+  .use(mditAnchor)
+  .use(mditVideo, {
+    youtube: { width: "70%", height: "auto", autoplay: false },
+  })
+  .use(mditFigureWithPCaption, {
+    figcaption: "alt",
+    html: true,
+    linkify: true,
+    typography: true,
+  })
+  .use(mditHighlight, { hljs });
+const route = useRoute();
+const manual = useManualStore();
+const { toc } = storeToRefs(manual);
 
-const route = useRoute()
-const manual = useManualStore()
-const { toc } = storeToRefs(manual)
-
-const text = ref("")
-const parsed = ref<Token[]>([])
-const chapter = ref(0)
-const found = ref(false)
-const active = ref("")
+const text = ref("");
+const parsed = ref<Token[]>([]);
+const chapter = ref(0);
+const found = ref(false);
+const active = ref("");
 
 function onScroll() {
-	let current = ""
-	document.querySelectorAll<HTMLElement>("h2,h3").forEach((v) => {
-		if (window.top && window.top.scrollY + window.innerHeight / 2 > v.offsetTop) {
-			current = v.id
-		}
-	})
-	active.value = current
+  let current = "";
+  document.querySelectorAll<HTMLElement>("h2,h3").forEach((v) => {
+    if (
+      window.top &&
+      window.top.scrollY + window.innerHeight / 2 > v.offsetTop
+    ) {
+      current = v.id;
+    }
+  });
+  active.value = current;
 }
 
 function onResize() {
-	if (window.innerWidth > 1024) {
-		toc.value = true
-	}
+  if (window.innerWidth > 1024) {
+    toc.value = true;
+  }
 }
 
 async function scrollTo(id: string) {
-	const pos = document.getElementById(id)?.offsetTop
-	await nextTick(() => {
-		if (window.innerWidth < 1024) toc.value = false
-	})
-	if (pos)
-		window.scrollTo({
-			top: pos,
-			behavior: "smooth",
-		})
+  const pos = document.getElementById(id)?.offsetTop;
+  await nextTick(() => {
+    if (window.innerWidth < 1024) toc.value = false;
+  });
+  if (pos)
+    window.scrollTo({
+      top: pos,
+      behavior: "smooth",
+    });
 }
 
 onMounted(async () => {
-	window.addEventListener("scroll", onScroll)
-	window.addEventListener("resize", onResize)
+  window.addEventListener("scroll", onScroll);
+  window.addEventListener("resize", onResize);
 
-	if (typeof route.params.name === "string") {
-		const res = await fetch(`/documents/${route.params.name}.md`)
-		if (res && res.ok) {
-			const pattern = /chapter-(\d+)/
-			const match = pattern.exec(route.params.name)
+  if (typeof route.params.name === "string") {
+    const res = await fetch(`/documents/${route.params.name}.md`);
+    if (res && res.ok) {
+      const pattern = /chapter-(\d+)/;
+      const match = pattern.exec(route.params.name);
 
-			if (!match) return
+      if (!match) return;
 
-			text.value = await res.text()
-			found.value = true
-			chapter.value = +match[1] - 1
-			parsed.value = md.parse(text.value, {})
-		}
-	}
-})
+      text.value = await res.text();
+      found.value = true;
+      chapter.value = +match[1] - 1;
+      parsed.value = md.parse(text.value, {});
+    }
+  }
+});
 
 onUnmounted(() => {
-	window.removeEventListener("scroll", onScroll)
-	window.removeEventListener("resize", onResize)
-})
+  window.removeEventListener("scroll", onScroll);
+  window.removeEventListener("resize", onResize);
+});
 </script>
 
 <template>
-	<div v-if="found" style="display: flex" class="markdown">
-		<div style="width: 100%; flex: 1; background-color: white; border-radius: 0.5rem; border: 1px solid #e1e1e9; padding: 1rem" v-html="md.render(text.replaceAll('images/', '/images/'))"></div>
-	</div>
+  <div v-if="found" style="display: flex" class="markdown">
+    <div
+      style="
+        width: 100%;
+        flex: 1;
+        background-color: white;
+        border-radius: 0.5rem;
+        border: 1px solid #e1e1e9;
+        padding: 1rem;
+      "
+      v-html="md.render(text.replaceAll('images/', '/images/'))"
+    ></div>
+  </div>
 
-	<q-drawer v-if="toc" side="right" class="bg-grey-2" show-if-above v-model="toc" :width="250" :behavior="$q.screen.width > 1024 ? 'desktop' : 'mobile'">
-		<q-scroll-area class="fit">
-			<q-list padding>
-				<template v-for="(token, idx) in parsed">
-					<q-item
-						class="tabNative"
-						active-class="text-blue-7 active-item text-weight-medium tabActive"
-						:active="active === token.attrGet('id')"
-						@click="scrollTo(token.attrGet('id') || '')"
-						v-if="token.tag === 'h2' && token.type === 'heading_open'"
-						clickable
-						v-ripple
-						dense
-						exact
-					>
-						<q-item-section>
-							<q-item-label>
-								<q-icon size="11px" name="mdi-circle-medium" />
-								<span class="q-pl-xs">{{ parsed[idx + 1].content }}</span>
-							</q-item-label>
-						</q-item-section>
-					</q-item>
-					<q-item
-						v-if="token.tag === 'h3' && token.type === 'heading_open'"
-						class="tabNative child-tab"
-						active-class="text-blue-7 active-item text-weight-medium tabActive"
-						:active="active === token.attrGet('id')"
-						@click="scrollTo(token.attrGet('id') || '')"
-						clickable
-						v-ripple
-						dense
-						exact
-					>
-						<q-item-section>
-							<q-item-label>
-								<span class="q-pl-xl">{{ parsed[idx + 1].content }}</span>
-							</q-item-label>
-						</q-item-section>
-					</q-item>
-				</template>
-			</q-list>
-		</q-scroll-area>
-	</q-drawer>
+  <q-drawer
+    v-if="toc"
+    side="right"
+    class="bg-grey-2"
+    show-if-above
+    v-model="toc"
+    :width="250"
+    :behavior="$q.screen.width > 1024 ? 'desktop' : 'mobile'"
+  >
+    <q-scroll-area class="fit">
+      <q-list padding>
+        <template v-for="(token, idx) in parsed">
+          <q-item
+            class="tabNative"
+            active-class="text-blue-7 active-item text-weight-medium tabActive"
+            :active="active === token.attrGet('id')"
+            @click="scrollTo(token.attrGet('id') || '')"
+            v-if="token.tag === 'h2' && token.type === 'heading_open'"
+            clickable
+            v-ripple
+            dense
+            exact
+          >
+            <q-item-section>
+              <q-item-label>
+                <q-icon size="11px" name="mdi-circle-medium" />
+                <span class="q-pl-xs">{{ parsed[idx + 1].content }}</span>
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+          <q-item
+            v-if="token.tag === 'h3' && token.type === 'heading_open'"
+            class="tabNative child-tab"
+            active-class="text-blue-7 active-item text-weight-medium tabActive"
+            :active="active === token.attrGet('id')"
+            @click="scrollTo(token.attrGet('id') || '')"
+            clickable
+            v-ripple
+            dense
+            exact
+          >
+            <q-item-section>
+              <q-item-label>
+                <span class="q-pl-xl">{{ parsed[idx + 1].content }}</span>
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-list>
+    </q-scroll-area>
+  </q-drawer>
 </template>
 
 <style scoped>
 .toc {
-	top: 4rem;
+  top: 4rem;
 }
 .active {
-	color: red;
+  color: red;
 }
 .markdown {
-	counter-set: h1 v-bind(chapter);
-	counter-reset: h1;
+  counter-set: h1 v-bind(chapter);
+  counter-reset: h1;
 }
 .markdown :deep(:where(h1, h2, h3, h4, h5, h6)) {
-	line-height: 1.5;
-	padding-block: 1rem !important;
+  line-height: 1.5;
+  padding-block: 1rem !important;
 }
 
 .markdown :deep(h1) {
-	counter-reset: h2;
+  counter-reset: h2;
 }
 
 .markdown :deep(h2) {
-	counter-reset: h3;
+  counter-reset: h3;
 }
 
 .markdown :deep(h3) {
-	counter-reset: h4;
+  counter-reset: h4;
 }
 
 .markdown :deep(h1:before) {
-	counter-increment: h1;
-	content: counter(h1) ". ";
+  counter-increment: h1;
+  content: counter(h1) ". ";
 }
 
 .markdown :deep(h2:before) {
-	counter-increment: h2;
-	content: counter(h1) "." counter(h2) " ";
+  counter-increment: h2;
+  content: counter(h1) "." counter(h2) " ";
 }
 
 .markdown :deep(h3:before) {
-	counter-increment: h3;
-	content: counter(h1) "." counter(h2) "." counter(h3) " ";
+  counter-increment: h3;
+  content: counter(h1) "." counter(h2) "." counter(h3) " ";
 }
 
 .markdown :deep(h4:before) {
-	counter-increment: h4;
-	content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) " ";
+  counter-increment: h4;
+  content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) " ";
 }
 
 .markdown :deep(blockquote) {
-	background-color: #ecebeb;
-	border-radius: 8px;
-	padding: 8px;
-	margin-bottom: 1rem;
+  background-color: #ecebeb;
+  border-radius: 8px;
+  padding: 8px;
+  margin-bottom: 1rem;
 }
 
 .markdown :deep(blockquote > p:last-child) {
-	margin-bottom: 0;
+  margin-bottom: 0;
 }
 
 .markdown :deep(img) {
-	vertical-align: middle;
+  vertical-align: middle;
 }
 
 .markdown :deep(p img) {
-	padding-inline: 0.25rem;
+  padding-inline: 0.25rem;
 }
 
 .markdown :deep(figure) {
-	margin: 0;
-	text-align: center;
-	padding: 1rem;
-	width: 100%;
+  margin: 0;
+  text-align: center;
+  padding: 1rem;
+  width: 100%;
 }
 
 .markdown :deep(figure img) {
-	max-width: 90%;
+  max-width: 90%;
 }
 
 .markdown :deep(p:has(img:only-child) img) {
-	max-width: 100%;
+  max-width: 100%;
 }
 
 .markdown :deep(.abc) {
-	color: green;
+  color: green;
 }
 
 .markdown :deep(h1) {
-	text-align: left;
-	margin-top: -1rem;
-	margin-inline: -1rem;
-	font-size: 24px;
-	font-weight: 700;
-	background-color: #ecebeb;
-	border-radius: 8px 8px 0px 0px;
-	padding: 0px 16px;
+  text-align: left;
+  margin-top: -1rem;
+  margin-inline: -1rem;
+  font-size: 24px;
+  font-weight: 700;
+  background-color: #ecebeb;
+  border-radius: 8px 8px 0px 0px;
+  padding: 0px 16px;
 }
 
 .markdown :deep(figcaption) {
-	text-align: center;
+  text-align: center;
 }
 
 .markdown :deep(h2) {
-	text-align: left;
-	margin-block: 0;
-	font-size: 18px;
-	font-weight: 600;
-	padding: 0px 16px;
-	color: #02a998;
+  text-align: left;
+  margin-block: 0;
+  font-size: 18px;
+  font-weight: 600;
+  padding: 0px 16px;
+  color: #02a998;
 }
 
 .markdown :deep(h3) {
-	text-align: left;
-	margin-block: 0;
-	font-size: 16px;
-	font-weight: 600;
-	padding: 0px 16px;
-	color: #02a998;
+  text-align: left;
+  margin-block: 0;
+  font-size: 16px;
+  font-weight: 600;
+  padding: 0px 16px;
+  color: #02a998;
 }
 .markdown :deep(iframe) {
-	display: block;
-	margin: 0 auto;
-	height: 50vh; /* Adjust this value as needed */
+  display: block;
+  margin: 0 auto;
+  height: 50vh; /* Adjust this value as needed */
 }
 </style>