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

V2EX = way to explore

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

已注册用户请登录

（腾讯云最新优惠活动来了：云产品限时1折，云服务器低至88元/年，点击这里立即抢购：9i0i.cn/qcloud，更有2860元代金券免费领取，付款直接抵现金用，点击这里立即领取：9i0i.cn/qcloudquan）

（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）

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

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

meshell

13 天前 via iPhone

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

rulai

13 天前

我用的库是下面几个,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

12 天前

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

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

meshell

12 天前 via iPhone

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

wingzhingling

12 天前 via Android

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