0


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

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

因为想要在前端实现实时渲染markdown,发现找不到对应的处理。搜了很久,终于找到了需要的方法,在这里分享一下

最终效果展示:
在这里插入图片描述

在前端vue3中处理markdown

读取markdown为string文本,然后通过最后markdown-it包转成markdown文件。

markdown-it | markdown-it 中文文档 (docschina.org)

安装依赖:

npm install markdown-it --save

用法:script setup中

import MarkdownIt from'markdown-it'

md =newMarkdownIt();var result = md.render('# markdown-it rulezz!');//传入文本

template中直接用v-html绑定:

<divv-html="result"></div>

最终在页面显示:

在这里插入图片描述

此时会发现如果有代码的话,代码框没有样式,也没有高亮

导入一些其他的样式应该也是可以的,只需要看文件是怎么用引入的就行

给markdown添加样式

sindresorhus/github-markdown-css:复制 GitHub Markdown 样式的最小 CSS 数量

可以添加GitHub的markdown样式

npm install github-markdown-css

引入依赖:

import'github-markdown-css';

在生成显示markdown的标签加上对应的class:

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

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

<style>
    .markdown-body{box-sizing: border-box;min-width: 200px;max-width: 980px;margin: 0 auto;padding: 45px;}@media(max-width: 767px){.markdown-body{padding: 15px;}}
</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文本

安装依赖:

npm install @wooorm/starry-night
npm install hast-util-to-html

官方示例:

import fs from'node:fs/promises'import{common, createStarryNight}from'@wooorm/starry-night'import{toHtml}from'hast-util-to-html'import markdownIt from'markdown-it'const file =await fs.readFile('example.md')const starryNight =awaitcreateStarryNight(common)const markdownItInstance =markdownIt({highlight(value, lang){const scope = starryNight.flagToScope(lang)returntoHtml({type:'element',tagName:'pre',properties:{className: scope
          ?['highlight','highlight-'+ scope.replace(/^source\./,'').replace(/\./g,'-')]:undefined},children: scope
        ?/** @type {Array<ElementContent>} */(
            starryNight.highlight(value, scope).children
          ):[{type:'text', value}]})}})const html = markdownItInstance.render(String(file))

console.log(html)

在代码中使用上就有一开始所介绍的效果了。

怎么实时显示流输出的markdown文本数据

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

标签: 前端 笔记 html

本文转载自: https://blog.csdn.net/qq_74177889/article/details/139021973
版权归原作者 全能全知者 所有, 如有侵权,请联系我们删除。

“如何在前端vue3中处理markdown并使用样式和代码高亮”的评论:

还没有评论