feat: replace prismjs with shiki

_config.yml

@@ -211,3 +211,10 @@ footer_links:
       - title: Friends # link of friends mode / 友链模式
         mode: 'links'
 
+#! ---------------------------------------------------------------
+#! Highlighter Shiki
+#! ---------------------------------------------------------------
+shiki:
+  enable: true
+  backgroundColor: "#1a1a1a"
+

package.json

@@ -68,7 +68,7 @@
     "script-ext-html-webpack-plugin": "^2.1.5",
     "semantic-release": "^21.1.1",
     "tailwindcss": "3.3.3",
-    "typescript": "~5.2.2",
+    "typescript": "^5.1.0",
     "vite": "^4.4.9",
     "vite-plugin-html-transformer": "^4.0.0",
     "vite-plugin-pages": "^0.31.0",

src/components/PageContent.vue

@@ -73,26 +73,26 @@
 </template>
 
 <script lang="ts">
-import '@/styles/prism-aurora-future.css'
 import {
-  Ref,
   computed,
   defineComponent,
   nextTick,
   onMounted,
   onUnmounted,
+  Ref,
   ref,
   toRefs,
   watch
 } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { Sidebar, Toc, Profile } from '@/components/Sidebar'
+import { Profile, Sidebar, Toc } from '@/components/Sidebar'
 import { useCommonStore } from '@/stores/common'
 import { useRoute } from 'vue-router'
 import PostStats from './Post/PostStats.vue'
 import { useAppStore } from '@/stores/app'
 import useCommentPlugin from '@/hooks/useCommentPlugin'
 import useLightBox from '@/hooks/useLightBox'
+import ObSkeleton from '@/components/LoadingSkeleton/Skeleton.vue'
 
 interface PostStatsExpose extends Ref<InstanceType<typeof PostStats>> {
   getCommentCount(): void
@@ -101,7 +101,7 @@ interface PostStatsExpose extends Ref<InstanceType<typeof PostStats>> {
 
 export default defineComponent({
   name: 'ObPageContent',
-  components: { Sidebar, Toc, Profile, PostStats },
+  components: { ObSkeleton, Sidebar, Toc, Profile, PostStats },
   props: {
     post: {
       type: Object,

src/components/ToggleSwitch/Toggle.vue

@@ -23,13 +23,13 @@ export default defineComponent({
   },
   emits: ['changeStatus'],
   setup(props, { emit }) {
-    let { status } = toRefs(props)
+    const { status } = toRefs(props)
 
     onMounted(() => {
       changeTransform()
     })
 
-    let toggleStyle = reactive({
+    const toggleStyle = reactive({
       transform: '',
       background: '#6e40c9'
     })

src/pages/about.vue

@@ -14,10 +14,8 @@ import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import { useI18n } from 'vue-i18n'
 import usePageTitle from '@/hooks/usePageTitle'
 
-declare const Prism: any
-
 export default defineComponent({
-  name: 'About',
+  name: 'ARAbout',
   components: { PageContent, Breadcrumbs },
   setup() {
     const articleStore = useArticleStore()
@@ -29,8 +27,6 @@ export default defineComponent({
       pageData.value = await articleStore.fetchArticle('about')
 
       updateTitle()
-      await nextTick()
-      Prism.highlightAll()
     }
 
     onMounted(fetchArticle)

src/pages/index.vue

@@ -116,7 +116,7 @@ import usePageTitle from '@/hooks/usePageTitle'
 import Sticky from '@/components/Sticky.vue'
 
 export default defineComponent({
-  name: 'Home',
+  name: 'ARHome',
   components: {
     Feature,
     FeatureList,

src/pages/links.vue

@@ -32,12 +32,12 @@
         @on-apply-clicked="jumpToContent()"
       />
 
-      <template v-if="pageData.categoryMode === true">
-        <LinkCategoryList :links="(pageData.data as Record<string, Link[]>)" />
+      <template v-if="pageData.categoryMode">
+        <LinkCategoryList :links="pageData.data as Record<string, Link[]>" />
       </template>
 
       <template v-else>
-        <LinkList :links="(pageData.data as Link[])" />
+        <LinkList :links="pageData.data as Link[]" />
       </template>
 
       <div class="mt-8" id="content">
@@ -94,22 +94,12 @@
 </template>
 
 <script lang="ts">
-import '@/styles/prism-aurora-future.css'
-import {
-  Ref,
-  computed,
-  defineComponent,
-  nextTick,
-  onMounted,
-  ref,
-  watch
-} from 'vue'
+import { computed, defineComponent, nextTick, onMounted, Ref, ref } from 'vue'
 import PostStats from '@/components/Post/PostStats.vue'
 import LinkBox from '@/components/Link/LinkBox.vue'
 import LinkCard from '@/components/Link/LinkCard.vue'
-import { Page } from '@/models/Article.class'
+import { Link, Page } from '@/models/Article.class'
 import { Title } from '@/components/Title'
-import { Link } from '@/models/Article.class'
 import { useAppStore } from '@/stores/app'
 import { useArticleStore } from '@/stores/article'
 import { useI18n } from 'vue-i18n'
@@ -121,17 +111,17 @@ import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import usePageTitle from '@/hooks/usePageTitle'
 import useJumpToEle from '@/hooks/useJumpToEle'
 import useCommentPlugin from '@/hooks/useCommentPlugin'
+import ObSkeleton from '@/components/LoadingSkeleton/Skeleton.vue'
 
 interface PostStatsExpose extends Ref<InstanceType<typeof PostStats>> {
   getCommentCount(): void
   getPostView(): void
 }
 
-declare const Prism: any
-
 export default defineComponent({
-  name: 'Links',
+  name: 'ARLinks',
   components: {
+    ObSkeleton,
     PostStats,
     LinkBox,
     LinkCard,
@@ -158,7 +148,6 @@ export default defineComponent({
       await nextTick()
       postStatsRef.value?.getCommentCount()
       postStatsRef.value?.getPostView()
-      Prism.highlightAll()
     }
 
     const jumpToContent = () => {

src/pages/page/[slug].vue

@@ -36,10 +36,8 @@ import Comment from '@/components/Comment.vue'
 import useCommentPlugin from '@/hooks/useCommentPlugin'
 import { Locales } from '@/models/ThemeConfig.class'
 
-declare const Prism: any
-
 export default defineComponent({
-  name: 'Page',
+  name: 'ARPage',
   components: { PageContent, Breadcrumbs, Comment },
   setup() {
     const articleStore = useArticleStore()
@@ -59,8 +57,6 @@ export default defineComponent({
       pageData.value = response
       pageTitle.value = response.title
       updateTitle(appStore.locale)
-      await nextTick()
-      Prism.highlightAll()
     }
 
     const updateTitle = (locale?: Locales) => {

src/pages/post/[slug].vue

@@ -177,7 +177,6 @@
 </template>
 
 <script lang="ts">
-import '@/styles/prism-aurora-future.css'
 import { Sidebar, Toc, Profile } from '@/components/Sidebar'
 import { Post } from '@/models/Post.class'
 import { usePostStore } from '@/stores/post'
@@ -200,10 +199,8 @@ interface PostStatsExpose extends Ref<InstanceType<typeof PostStats>> {
   getPostView(): void
 }
 
-declare const Prism: any
-
 export default defineComponent({
-  name: 'ObPost',
+  name: 'ARPost',
   components: {
     Sidebar,
     Toc,
@@ -256,7 +253,6 @@ export default defineComponent({
       initializeLightBox()
       postStatsRef.value?.getCommentCount()
       postStatsRef.value?.getPostView()
-      Prism.highlightAll()
     }
 
     watch(

src/styles/components/article.scss

@@ -634,15 +634,30 @@
     overflow-wrap: normal !important;
   }
 
+  pre::-webkit-scrollbar {
+    width: 0.5em;
+    height: 0.5em;
+  }
+
+  pre::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-radius: 0;
+  }
+
+  pre::-webkit-scrollbar-thumb {
+    background-color: var(--background-secondary);
+    border-radius: 0.5em;
+    box-shadow: inset 2px 2px 2px hsl(0deg 0% 100% / 25%), inset -2px -2px 2px rgb(0 0 0 / 25%);
+  }
+
   pre code {
+    @apply inline-block;
     padding: 0;
   }
 
-  code:not([class^="language-"]) {
-    color: var(--text-normal);
+  p code {
     margin: 0;
     font-size: 0.85em;
-    border-radius: 3px;
     overflow-wrap: break-word;
     background-color: var(--bg-accent-05);
     word-wrap: break-word;
@@ -652,6 +667,24 @@
   }
 }
 
+div[class^="language-"] {
+  @apply relative rounded-2xl overflow-hidden shadow my-6;
+}
+
+div[class^="language-"] .lang,
+div[class^="language-"] button,
+{
+  @apply absolute top-4 right-5 z-50 opacity-40 capitalize;
+}
+
+div[class^="language-"] pre {
+  @apply py-4 relative;
+}
+
+div[class^="language-"] pre code {
+  @apply px-4 relative block;
+}
+
 .post-header {
   @apply mb-4 px-4;
   .post-labels {