vue 项目中的 Markdown 怎么显示 code 的语言标识和 copy 功能

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

这是一个创建于 225 天前的主题，其中的信息可能已经有所发展或是发生改变。

用的插件是 markdown-it,为什么我的没有图中的 JavaScript 和 copy 按钮,是不是要用到其他的库

5 条回复 • 2024-04-21 11:00:56 +08:00

meshell

224 天前 via iPhone

啥意思？那不是高亮库提供的吗？

rulai

224 天前

我用的库是下面几个,prism 没看有提供
import MarkdownIt from 'markdown-it'
import markdownItPrism from 'markdown-it-prism'
import 'prismjs/themes/prism-okaidia.css'
import markdownItCodeCopy from 'markdown-it-code-copy'

fuyun

224 天前

刚好之前总结过一篇： https://www.ifuyun.com/post/4d3c83ae8c79aca4 ，虽然是 Angular 的，但这个功能和框架无关。
此文实现的功能包括：

1. 语法高亮（识别语言类型）
2. 行号显示
3. 复制功能（包括登录限制）

meshell

224 天前 via iPhone

@rulai prism 找找插件。我忘记默认的不知道有没有这个功能

wingzhingling

224 天前 via Android

https://quasarframework.github.io/quasar-ui-qmarkdown/docs
推荐一手 quasar 下的 markdown 扩展，是把 markdown-it 包装了一下，非 quasar 项目也可以用