上一篇中介绍了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的所有依赖都装置,并且会一起打包,然而可能只须要针对某几个类型的代码进行高亮,那就须要对配置进行批改,这个问题后续在进行更新。