Leafage 誕生記（四、nuxt/content使用限制、如何進行markdown解析并高亮代碼塊）

本文個人部落格位址：https://www.leafage.top/posts/detail/21318HYYR

上一篇中介紹了nuxtjs的基本配置項，以及自動引入components的使用，那麼接下來說一說在nuxtjs中如何讀取markdown文檔并将其中的代碼進行高亮顯示。

在第一篇文章中建立項目的時候，提過沒有選擇@nuxt/content這個子產品，因為網站的所有資料都是通過接口的方式請求後端資料來進行加載的，而content不持支從接口擷取資料，隻能支援從項目本地的 /content 目錄下擷取資料，在content子產品中，預設使用的prismjs來高亮代碼，但是呢，它提供的集中高亮主題都不好看，而且可供選擇的主題很少，是以也沒有使用他來做代碼高亮，而是選擇了highlight.js來做。

要解析markdown内容就需要對應的解析器，有marked和markdown-it兩種選擇，在nuxtjs的插件或者子產品中marked并不好配置，是以選擇markdown-it，使用markdown-it和highlight.js比較容易，添加@nuxtjs/markdownit子產品，然後在nuxt.config.js配置檔案中進行配置，如下所示：

markdownit: {
    preset: 'default',
    linkify: true,
    breaks: true,
    use: [
      'markdown-it-div',
      'markdown-it-highlightjs',
      'markdown-it-mark',
      'markdown-it-deflist'
    ],
    runtime: true // Support `$md()`
  },
           

這裡的配置幾乎和原生的markdown-it配置一樣，哦，對了，這裡不要忘了yarn add指令添加對應的插件。

然後在頁面中就可以直接使用$md.render(“xx”)來完成markdown的解析，如下所示:

<p
  class="my-4 leading-relaxed tracking-wide markdown-body"
  v-html="$md.render(data.content)"
></p>
           

這些都做了之後你會發現，代碼高亮不是喜歡的樣式，那需要在nuxt.config.js中的css配置下添加樣式檔案的引用，如下所示：

// Global CSS (https://go.nuxtjs.dev/config-css)
  css: [
    'highlight.js/styles/github.css'
  ],
           

以上就是nuxtjs下markdown解析和代碼高亮的配置，但是有一個問題是，這樣是預設的配置，會把highlight.js的所有依賴都安裝，并且會一起打包，但是可能隻需要針對某幾個類型的代碼進行高亮，那就需要對配置進行修改，這個問題後續在進行更新。

2021-04-06 補充内容：

最近在使用網站的時候發現一個問題，就是從其他地方連結跳轉到文章詳情頁的時候，或者在文章詳情頁重新整理也頁面，文章詳情會重複，而且，重複的部分樣式會有問題。