fix: code fence is not highlighted by prism after refresh

auroral-ui · Aug 9, 2023 · 8b77aa2 · 8b77aa2
1 parent 7478780
commit 8b77aa2
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 16 deletions.
diff --git a/src/components/Comment.vue b/src/components/Comment.vue
@@ -176,7 +176,6 @@ export default defineComponent({
     watch(
       () => appStore.locale,
       (newLocale, oldLocale) => {
-        console.log(newLocale, oldLocale)
         if (waline && newLocale !== undefined && newLocale !== oldLocale) {
           waline.update({
             lang: languages[newLocale]

diff --git a/src/views/About.vue b/src/views/About.vue
@@ -6,13 +6,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, ref } from 'vue'
+import { defineComponent, nextTick, onMounted, ref } from 'vue'
 import { useArticleStore } from '@/stores/article'
 import { Page } from '@/models/Article.class'
 import PageContent from '@/components/PageContent.vue'
 import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import { useI18n } from 'vue-i18n'
 
+declare const Prism: any
+
 export default defineComponent({
   name: 'About',
   components: { PageContent, Breadcrumbs },
@@ -21,10 +23,12 @@ export default defineComponent({
     const pageData = ref(new Page())
     const { t } = useI18n()
 
-    const fetchArticle = () => {
-      articleStore.fetchArticle('about').then(response => {
-        pageData.value = response
-      })
+    const fetchArticle = async () => {
+      const response = await articleStore.fetchArticle('about')
+
+      pageData.value = response
+      await nextTick()
+      Prism.highlightAll()
     }
 
     onMounted(fetchArticle)

diff --git a/src/views/Page.vue b/src/views/Page.vue
@@ -14,7 +14,14 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onBeforeMount, ref, watch } from 'vue'
+import {
+  computed,
+  defineComponent,
+  nextTick,
+  onBeforeMount,
+  ref,
+  watch
+} from 'vue'
 import { useArticleStore } from '@/stores/article'
 import { Page } from '@/models/Article.class'
 import { useI18n } from 'vue-i18n'
@@ -25,6 +32,8 @@ import PageContent from '@/components/PageContent.vue'
 import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import Comment from '@/components/Comment.vue'
 
+declare const Prism: any
+
 export default defineComponent({
   name: 'Page',
   components: { PageContent, Breadcrumbs, Comment },
@@ -37,14 +46,16 @@ export default defineComponent({
     const { t } = useI18n()
     const pageTitle = ref()
 
-    const fetchArticle = () => {
-      articleStore.fetchArticle(String(route.params.slug)).then(response => {
-        pageData.value = response
-
-        pageTitle.value = pageData.value.title
+    const fetchArticle = async () => {
+      const response = await articleStore.fetchArticle(
+        String(route.params.slug)
+      )
 
-        updateTitle(appStore.locale)
-      })
+      pageData.value = response
+      pageTitle.value = response.title
+      updateTitle(appStore.locale)
+      await nextTick()
+      Prism.highlightAll()
     }
 
     const updateTitle = (locale: string | undefined) => {

diff --git a/src/views/Post.vue b/src/views/Post.vue
@@ -183,8 +183,6 @@ import { useI18n } from 'vue-i18n'
 import Comment from '@/components/Comment.vue'
 import { SubTitle } from '@/components/Title'
 import { Article } from '@/components/ArticleCard'
-
-import '@/styles/prism-aurora-future.css'
 import { useMetaStore } from '@/stores/meta'
 import { useAppStore } from '@/stores/app'
 import { useCommonStore } from '@/stores/common'