V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
rulai
V2EX  ›  Vue.js

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

  •  
  •   rulai · 217 天前 · 1397 次点击
    这是一个创建于 217 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    图片

    5 条回复    2024-04-21 11:00:56 +08:00
    meshell
        1
    meshell  
       217 天前 via iPhone
    啥意思?那不是高亮库提供的吗?
    rulai
        2
    rulai  
    OP
       217 天前
    我用的库是下面几个,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
        3
    fuyun  
       216 天前
    刚好之前总结过一篇: https://www.ifuyun.com/post/4d3c83ae8c79aca4 ,虽然是 Angular 的,但这个功能和框架无关。
    此文实现的功能包括:

    1. 语法高亮(识别语言类型)
    2. 行号显示
    3. 复制功能(包括登录限制)
    meshell
        4
    meshell  
       216 天前 via iPhone
    @rulai prism 找找插件。我忘记默认的不知道有没有这个功能
    wingzhingling
        5
    wingzhingling  
       216 天前 via Android
    https://quasarframework.github.io/quasar-ui-qmarkdown/docs
    推荐一手 quasar 下的 markdown 扩展,是把 markdown-it 包装了一下,非 quasar 项目也可以用
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1040 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 19:33 · PVG 03:33 · LAX 11:33 · JFK 14:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.