关于nuxt.js:Leafage-诞生记四

上一篇中介绍了 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: ['~/node_modules/highlight.js/styles/github.css'],

以上就是 nuxtjs 下 markdown 解析和代码高亮的配置，然而有一个问题是，这样是默认的配置，会把 highlight.js 的所有依赖都装置，并且会一起打包，然而可能只须要针对某几个类型的代码进行高亮，那就须要对配置进行批改，这个问题后续在进行更新。