Nuxt解析markdown字符串生成HTML

ZemanZhang

已于 2023-05-17 20:18:08 修改

阅读量581

点赞数

分类专栏： # nuxt # vue 前端文章标签： html 前端 css vue.js javascript

于 2023-05-08 10:02:03 首次发布

本文链接：https://blog.csdn.net/qingfeng2020/article/details/130552819

版权

前端同时被 3 个专栏收录

26 篇文章

订阅专栏

vue

15 篇文章

订阅专栏

nuxt

6 篇文章

订阅专栏

本文介绍了如何在Nuxt.js项目中安装并配置markdownit，包括设置默认选项、启用linkify和breaks功能，以及添加多种解析插件。同时，展示了如何创建一个组件来渲染Markdown字符串，并提供了针对预览样式进行的部分CSS重定义，特别强调了代码高亮的样式调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装

npm i @nuxtjs/markdownit

配置nuxt.config

export default{
	// .... other config
	modules: {
	  '@nuxtjs/markdownit'
	},
	markdownit: {
    preset: 'default',
    linkify: true,
    breaks: true,
    runtime: true,
    // 用什么解析插件安装什么解析插件
    // use这里的均需要 npm i进行安装
    use: [
      'markdown-it-div',
      'markdown-it-attrs',
      'markdown-it-highlightjs',
      'markdown-it-mark',
      'markdown-it-deflist',
      'markdown-it-abbr',
      'markdown-it-footnote',
      'markdown-it-ins',
      'markdown-it-sub',
      'markdown-it-sup',
      'markdown-it-toc-and-anchor',
      'markdown-it-task-lists',
      'markdown-it-katex',
      'markdown-it-emoji'
    ]
  }
}

若是use中的组件报错，记得使用npm i 包名进行安装，

组件化

<template>
  <div class="robot-message" v-html="$md.render(markdownStr)"></div>
</template>
<script>

export default {
  name: 'MdCompile',
  props: {
    markdownStr: {
      type: String,
      default: ''
    }
  },
 }
 </script>

因为我使用了reset.css所以部分需要重新定义一下样式

<style>
.robot-message {
  max-width: 768px;
  width: 100%;
}
.markdownIt-Anchor {
  display: none !important;
}
.markdownIt-TOC a {
  color: #409EFF !important;
  text-decoration: none;
}
pre code {
  position: relative;
  background-color: #f6f8fa !important;
  border-radius: 5px !important;
  padding: 30px 10px !important;
  margin: 10px 0 !important;
  border: 1px solid #e1e4e8 !important;
  display: block !important;
  overflow-x: auto !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  word-break: break-all !important;
  word-wrap: break-word !important;
  color: #24292e !important;
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace !important;
}
pre code::before {
  position: absolute;
  top: 10px;
}

pre .language-javascript::before {
  content: 'javascript' !important;
  color: #005cc5 !important;
}
pre .language-css::before {
  content: 'css' !important;
  color: #005cc5 !important;
}
pre .language-html::before {
  content: 'html' !important;
  color: #005cc5 !important;
}
pre .language-bash::before {
  content: 'bash' !important;
  color: #005cc5 !important;
}
pre .language-json::before {
  content: 'json' !important;
  color: #005cc5 !important;
}
pre .language-markdown::before {
  content: 'markdown' !important;
  color: #005cc5 !important;
}
pre .language-nginx::before {
  content: 'nginx' !important;
  color: #005cc5 !important;
}
pre .language-sql::before {
  content: 'sql' !important;
  color: #005cc5 !important;
}
pre .language-xml::before {
  content: 'xml' !important;
  color: #005cc5 !important;
}
pre .language-yaml::before {
  content: 'yaml' !important;
  color: #005cc5 !important;
}
pre .language-java::before {
  content: 'yaml' !important;
  color: #005cc5 !important;
}
pre .language-diff::before {
  content: 'diff' !important;
  color: #005cc5 !important;
}
pre .language-python::before {
  content: 'python' !important;
  color: #005cc5 !important;
}
pre code .hljs-keyword {
  color: #a71d5d !important;
}
.hljs-params {
  color: #6f42c1 !important;
}
.hljs-variable {
  color: #e83e8c !important;
}
.hljs-title {
  color: #d73a49 !important;
}
.hljs-string {
  color: #032f62 !important;
}
.hljs-literal {
  color: #005cc5 !important;
}
</style>