vue解析markdown字符串并展示（代码高亮+代码行号显示）

最新推荐文章于 2025-06-26 09:19:33 发布

hhhaaa_

最新推荐文章于 2025-06-26 09:19:33 发布

阅读量4.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：工作记录

本文链接：https://blog.csdn.net/qq_38735931/article/details/103389123

工作记录专栏收录该内容

51 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中解析Markdown文件和字符串，通过安装text-loader和vue-markdown插件，并配置Webpack，实现了MD内容的高亮显示。

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

上周看了很久的md然后弄得差不多了嘛，但是上次那个只支持md文件的解析，如果是直接解析字符串的话，就没有办法了。
所以，今天看了也搞了好久…
解析md文件看这里
解析md字符串看下面👇

在上一次的基础上，

安装依赖
1. npm install text-loader --save
2. npm install vue-markdown --save
在 webpack.base.config.js 里原有loader下加入 loader: 'text-loader'
在要引入md的页面：

<template>
  <div class="markdown-body">
    <vue-markdown  :source="msg"></vue-markdown>
  </div>
</template>
<script>
import VueMarkdown from 'vue-markdown'
export default {
  name: 'mdDisplay',
  data() {
    return {
                   msg:'```html \n<form method="GET" action="/transferFunds ">\n cash: <input type="text" name="cash"> \n to: <input type=" text " name=“to"> \n<input type="submit" name="action" value=""> \n</form> \n```'

    }
  },
  components:{
    VueMarkdown,
  }
}
</script>

如果没有高亮：

<vue-markdown  v-highlight>{{msg}}</vue-markdown>

main.js里加：

import VueHighlightJS from 'highlight.js';
Vue.use(VueHighlightJS)
Vue.directive('highlight', (el) => {
  let blocks = el.querySelectorAll('pre code')
  blocks.forEach((block) => {
    VueHighlightJS.highlightBlock(block)
  })
})