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

› Vue.js

This topic created in 785 days ago, the information mentioned may be changed or developed.

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

markdown-it

Code

copy

5 replies • 2024-04-21 11:00:56 +08:00

meshell

Apr 20, 2024 via iPhone

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

rulai

Apr 20, 2024

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

Apr 21, 2024

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

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

meshell

Apr 21, 2024 via iPhone

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

wingzhingling

Apr 21, 2024 via Android

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