fix: add highlight js in manual
This commit is contained in:
oat_dev
parent
d63e1d9f70
commit
c09cf6d054
1 changed files with 188 additions and 165 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue