怎样在前端vue3中处理markdown并使用样式和代码高亮

怎样在前端vue3中处理markdown并使用样式和代码高亮

由于想要在前端实现实时渲染markdown，发现找不到对应的处理。搜了很久，终于找到了需要的方法，在这里分享一下
最终效果展示：

在前端vue3中处理markdown

读取markdown为string文本，然后通过最后markdown-it包转成markdown文件。
markdown-it | markdown-it 中文文档 (docschina.org)
安装依赖：

1. npm install markdown-it --save

复制代码

用法：script setup中

1. import MarkdownIt from 'markdown-it'
3. md = new MarkdownIt();
4. var result = md.render('# markdown-it rulezz!'); //传入文本

复制代码

template中直接用v-html绑定：

1.   <div v-html="result"></div>

复制代码

最终在页面表现：

此时会发现如果有代码的话，代码框没有样式，也没有高亮
导入一些其他的样式应该也是可以的，只需要看文件是怎么用引入的就行
给markdown添加样式

sindresorhus/github-markdown-css：复制 GitHub Markdown 样式的最小 CSS 数量
可以添加GitHub的markdown样式

1. npm install github-markdown-css

复制代码

引入依赖：

1. import 'github-markdown-css';

复制代码

在生成表现markdown的标签加上对应的class：

1.   <div v-html="item.content" class="markdown-body" style="font-size: small"></div>

复制代码

可以根据需求引入官方这个：

1. <style>
2.         .markdown-body {
3.                 box-sizing: border-box;
4.                 min-width: 200px;
5.                 max-width: 980px;
6.                 margin: 0 auto;
7.                 padding: 45px;
8.         }
10.         @media (max-width: 767px) {
11.                 .markdown-body {
12.                         padding: 15px;
13.                 }
14.         }
15. </style>

复制代码

然后发现有样式了，但是没有代码高亮
所以还需要加一点东西
wooorm/starry-night: Syntax highlighting, like GitHub
starry-night会生成基于代码高亮的html的hast 树大概css样式，以及自定义语法，具体可以看官方文档。
syntax-tree/hast-util-to-html：将 hast 序列化为 HTML 的实用步伐 (github.com)
hast-util-to-html将html的hast 树转成HTML的工具。
两者的结合可以生成高亮的代码html文本
安装依赖：

1. npm install @wooorm/starry-night

复制代码

1. npm install hast-util-to-html

复制代码

官方示例：

1. import fs from 'node:fs/promises'
2. import {common, createStarryNight} from '@wooorm/starry-night'
3. import {toHtml} from 'hast-util-to-html'
4. import markdownIt from 'markdown-it'
6. const file = await fs.readFile('example.md')
7. const starryNight = await createStarryNight(common)
9. const markdownItInstance = markdownIt({
10.   highlight(value, lang) {
11.     const scope = starryNight.flagToScope(lang)
13.     return toHtml({
14.       type: 'element',
15.       tagName: 'pre',
16.       properties: {
17.         className: scope
18.           ? [
19.               'highlight',
20.               'highlight-' + scope.replace(/^source\./, '').replace(/\./g, '-')
21.             ]
22.           : undefined
23.       },
24.       children: scope
25.         ? /** @type {Array<ElementContent>} */ (
26.             starryNight.highlight(value, scope).children
27.           )
28.         : [{type: 'text', value}]
29.     })
30.   }
31. })
33. const html = markdownItInstance.render(String(file))
35. console.log(html)

复制代码

在代码中使用上就有一开始所先容的效果了。
怎么实时表现流输出的markdown文本数据

可以看一下我写的这篇文章，说得很详细，有我本人写的具体实现:
vue3前端使用ollama搭建本地模型处理流并实时生成markdown-CSDN博客

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。