亚洲第1页,午夜欧美在线,又黄又爽又色的免费毛片

使用語法高亮 Prism.js 讓你寫的代碼美化起來（以Vue3為例）

admin

2024年3月29日 10:9 本文熱度 718

tinymce編輯器界面

【tips】:tinymce是國外的一個功能超全開箱即用的富文本編輯器，他是一個開源的編輯器，除了基本的功能外還可以通過插件的形式拓展，插件也只需要簡單的添加插件名稱即可，插件分為開源插件和高級插件，其中高級插件功能需要付費，但開源的功能完全夠用，而且提供了多種主題選擇，還可以高度自定義編輯器樣式，可以在 Vue、React、Angular、Blazor、Svelte、Node+Express等多種環境中使用。

下載地址：https://prismjs.com/download.html

1.前臺展示tinymce編輯器編輯的內容時踩的坑

2.安裝PrimsJS代碼高亮庫

3.解決PrimsJS添加后代碼不高亮的問題

4.給代碼塊添加行號

5.PrimsJS代碼高亮的原理

一、前臺展示tinymce編輯器編輯的內容時踩的坑

最近做了一個小項目，該項目主要是將tinymce富文本編輯器編輯的內容在前臺展示，我很簡單的以為只需要用Vue的v-html解析就能正常展示了，像下面這樣

 <template>
     <div class="article-wrapper">
         <template v-for="item in articleInfoData">
             <h2 class="title">{{ item.title }}</h2>
             <p class="desc" v-if="item.desc">摘要：{{ item.desc }}</p>
             <div class="content" v-html="item.content"></div>
             <p class="date">{{ item.created_at }}</p>
         </template>
     </div>
</template>

然而并沒有那么簡單，純文本編輯的內容可以正常渲染，但是代碼塊就是顯示純文本，代碼沒有高亮，就像下面這樣

這并非是我們所期待的，我們所期待的應該是下面這樣的，讓不同代碼更加突出展示

后來才發現代碼高亮是需要像prismjs這樣的庫來進行解析的，我們審查tinymce編輯器的代碼塊元素后會發現，pre->code標簽下他給代碼塊添加了好多標簽及樣式，但是

我們獲取到編輯器提交給后臺的數據捶⑾謕re->code標簽下就只有我們插入的代碼塊，就像下面這樣，

起初我還以是tinymce編輯器配置的問題，導致缺失了pre->code標簽下面的標簽及樣式，后來看完了tinymce官方文檔的配置也沒有找到類似的配置。

二、安裝Prismjs代碼高亮庫

后來在網上找到了代碼高亮庫prismjs并愉快的添加到了Vue3+Ts項目中

什么是prismjs？

官方是這樣描述的，他是一個非常簡單快速可拓展且支持超多語言的輕量級代碼高亮庫。官網地址

1. //安裝
2. npm install prismjs

 //引入Prism（我們只需要在局部引入即可，我這里是在文章內容展示組件中引入）
 <script setup lang="ts">
 import { ref,
reactive, onMounted } from 'vue'
 import type {Ref } from 'vue'
 import {
useRouter, useRoute } from 'vue-router'
 import { api
} from "@/assets/config/api"
 import {
request } from "@/assets/common/request"
 import Prism from "prismjs"//導入代碼高亮插件的core（里面提供了其他官方插件及代碼高亮樣式主題，你只需要引入即可）
 import "prismjs/themes/prism-tomorrow.min.css"//引入代碼高亮主題（這個去node_modules的安裝prismjs中找到想使用的主題即可）

const router = useRouter()
const route = useRoute()
const articleInfoData: Ref<Array<object>> = ref([]);

onMounted(() => {
   getArticleInfo()
   Prism.highlightAll()// 全局代碼高亮
})
function getArticleInfo(): void {//從后臺請求數據
       
request.get(api.GetArticleInfo,
{
            id: route.params.id
       
}).then(res => {
         
articleInfoData.value = res?.data?.data
       
}).catch(err => {
           console.log(err)
       
})
   
})

}
</script>

但結果又出現了下面的這種問題，明顯可以看到prismjs以及css是被加載了的，但代碼還是沒有被高亮

后來研究才發現是因為prismjs執行的時機不對導致pre->code中的代碼沒有被prismjs解析添加相應的標簽。

三、解決PrimsJS添加后代碼不高亮的問題

解決辦法也很簡單，我們可以給Prismjs高亮方法添加一個定時器延遲加載，或者使用

 onMounted(() => {
     getArticleInfo()
      setTimeout(() => {
         Prism.highlightAll()// 全局代碼高亮
     }, 100)
 })

async/await配合Promise進行加載，等數據完全加載完后再用Prismjs進行解析即可實現代碼高亮，就像下面那樣（需要注意的是一定要等v-html中后臺返回的數據加載完畢后才可以被Prismjs解析）

1. <script setup lang="ts">
2. import { ref,
reactive, onMounted } from 'vue'
3. import type {Ref } from 'vue'
4. import {
useRouter, useRoute } from 'vue-router'
5. import { api
} from "@/assets/config/api"
6. import {
request } from "@/assets/common/request"
7. import Prism from "prismjs"//代碼高亮插件的core
8. import "prismjs/themes/prism-tomorrow.min.css"//高亮主題
9. const router
= useRouter()
10.const route = useRoute()
11.const articleInfoData: Ref<Array<object>> = ref([]);
12.onMounted(async () => {
13.   await getArticleInfo().then(res => {
14.       
articleInfoData.value = res
15.   
}).catch(err => {
16.       console.log(err);
17.   
})
18.     Prism.highlightAll()// 全局代碼高亮(必須等獲取數據之后，代碼高亮才能生效，也可以用定時器定時)
19.})
20.function getArticleInfo(): Promise<Array<object>> {//從后臺請求數據
21.   return new Promise((resolve, reject) => {
22.       
request.get(api.GetArticleInfo,
{
23.            id: route.params.id
24.       
}).then(res => {
25.            resolve(res?.data?.data)
26.       
}).catch(err => {
27.            reject(err)
28.       
})
29.   
})
30.}
31.</script>

四、給代碼塊添加行號

我們從上圖中可以發現雖然我們完美的給代碼添加理論高亮，但我們在vscode中使用時會發現，每行代碼都有相應大行號，這樣代碼出錯時我們可以直接定位到某一行。

我們可以看到Prism官方 https://prismjs.com/index.html#plugins 提供了一些常用的插件，我們選擇紅框中的行號

那么如何使用行號插件呢？其實很簡單，我們剛剛在上文中安裝了Prism，只需要在node_modules中找到剛剛安裝的prismjs中的plugins，然后找到對應的插件引入即可。

在項目中需要這樣引入

 <script setup lang="ts">
 import { ref,
reactive, onMounted } from 'vue'
 import type {Ref } from 'vue'
 import {
useRouter, useRoute } from 'vue-router'
 import { api
} from "@/assets/config/api"
 import {
request } from "@/assets/common/request"
 import Prism from "prismjs"//代碼高亮core
 import "prismjs/plugins/line-numbers/prism-line-numbers.min.js"//行號插件
 import "prismjs/themes/prism-tomorrow.min.css"//高亮主題
import "prismjs/plugins/line-numbers/prism-line-numbers.min.css"//行號插件的樣式
const router = useRouter()
const route = useRoute()
const articleInfoData: Ref<Array<object>> = ref([]);
onMounted(async () => {
   await getArticleInfo().then(res => {
       
articleInfoData.value = res
   
}).catch(err => {
       console.log(err);
   
})
   Prism.highlightAll()// 全局代碼高亮(必須等獲取數據之后，代碼高亮才能生效，也可以用定時器定時)
})
function getArticleInfo(): Promise<Array<object>> {//從后臺請求數據
   return new Promise((resolve, reject) => {
       
request.get(api.GetArticleInfo,
{
            id: route.params.id
       
}).then(res => {
      
     resolve(res?.data?.data)
       
}).catch(err => {
            reject(err)
       
})
   
})
}
</script>

引入完之后刷新你會發現還是沒有添加行號

官網已經說得很清楚，除了引入行號插件及樣式，我們還需要指定一個line-numbers類，將這個類添加到pre標簽或者他的祖先，只要他或他的祖先添加的了line-numbers類，那么他的子元素就會被行號插件自動添加line-numbers,從而達到添加行號。

添加line-numbers類名到自己的項目，在這里我添加到了v-html要解析的那個標簽上，因為后臺返回的編輯數據都是在該標簽內渲染，所以該標簽屬于pre標簽的祖先元素，你也可以將line-numbers類名添加到該div的祖先父級元素中，又或者可以添加到body上，但建議添加到這個v-html要渲染的簽上，因為只有該標簽內的數據是要被渲染解析的。

 <template>
     <div class="article-wrapper">
         <template v-for="item in articleInfoData">
             <h3 class="title">{{ item.title }}</h3>
             <p class="desc" v-if="item.desc">摘要：{{ item.desc }}</p>
             <section class="author">
                 <span>作者:三葉雨</span>&nbsp;
                 <span>{{ item.created_at }}</span>
             </section>
            <div class="content line-numbers" v-html="item.content"></div>
       
</template>
   
</div>
</template>