V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
lisongeee
V2EX  ›  分享创造

# 油猴脚本:让 V2EX 评论区支持 markdown,代码高亮,别再纯文本交流了

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

    v2ex-comment-markdown

    脚本使用 vite-plugin-monkey 开发

    脚本源码 v2ex-comment-markdown

    • 让 V2EX 评论 支持 markdown 的渲染
    • markdown 内部的代码高亮

    安装

    截图预览

    demo1 demo2

    如何使用

    安装脚本后刷新帖子页面,可以看到在回复文本框下多出一个按钮 回复 markdown

    在编辑框内书写你的 markdown ,然后点击 回复 markdown,你的编辑框后面会追加一条图片链接,然后发送

    它大概长这样 https://i.songe.li/1x1.png#xxxx_base64 这是一个 1x1 的图片,在没有安装油猴脚本的用户看来,他的评论区什么变化都没有,在安装了油猴脚本的用户,脚本会自动检测这个图片后面的 base64 然后 解码替换,这样你发出的 markdown 就被渲染出来了

    你可以安装脚本后去 https://v2ex.com/t/851687 预览我发的 markdown 看看有没有生效

    第 1 条附言  ·  102 天前
    我之所以在评论后面加 base64 是因为 V2EX 会把我的代码里的缩进去掉,所以我想通过 base64 来保留原始信息

    但是我开发的时候把《 V2EX 增强》这个脚本打开了,导致我错误地认为图片链接在 V2EX 是默认转 a>img 的,非常抱歉,非常抱歉,

    已经修复,现在是直接转评论未 markdown 的,不需要额外的配置,安装后刷新即可

    现在代码的缩进会被去掉,我考虑要不要加个代码自动格式化
    第 2 条附言  ·  99 天前

    这个脚本最新版本并没有修改回复框的功能,回复 markdown 按钮已经被去掉了

    在回复框内正常输入 markdown 后,点击以前的 回复 按钮即可

    它只会使用 markdown 二次渲染每一条评论,另外如果二次渲染后评论文本没有变化,就不会替换 dom

    第 3 条附言  ·  98 天前
    v1.1.0 更新日志:
    由于 V2EX 会删除评论代码缩进, 因此插件会自动格式化代码
    支持的语言有 js/jsx/ts/tsx/json/json5/html/vue/scss/css/less/java
    54 条回复    2022-08-30 15:18:59 +08:00
    Cagliostro
        3
    Cagliostro  
       103 天前
    既然如此,支持评论区图片吗?
    Barnard
        4
    Barnard  
       103 天前
    ## 这真是喜闻乐见啊
    cssk
        7
    cssk  
       103 天前 via iPhone
    # h1
    ## h2
    test
    autoxbc
        9
    autoxbc  
       103 天前
    其实是在站长的存储后端上搭了一个新的服务,隐写 + 前端解码,不可能让你搞大
    Tumblr
        10
    Tumblr  
       103 天前   ❤️ 1
    这个插件算是自己写 markdown 给自己看吧。。。
    yfugibr
        11
    yfugibr  
       103 天前 via Android
    lisongeee
        13
    lisongeee  
    OP
       103 天前
    我知道评论区某些人为啥不成功了,因为我装了 《 V2EX 增强》 这个油猴脚本,我测试的时候把它也打开了

    导致我错误地认为图片链接在 V2EX 是默认转 a>img 的,非常抱歉,我一会修复一下这个
    lisongeee
        14
    lisongeee  
    OP
       103 天前
    @cssk @yfugibr 抱歉,我测试的时候有点问题,一会修复,出错原因可看上一条评论
    magicdawn
        15
    magicdawn  
       103 天前   ❤️ 2
    很难想象一个 markdown 都不支持 / 发图困难的社区居然
    有大量程序员活跃 手动狗头...
    felixcode
        16
    felixcode  
       103 天前 via Android
    (这是一张图片)

    (这里一部电影)

    安装插件后能正常显示。
    ijrou
        17
    ijrou  
       103 天前
    需要安装插件才能显示啊,,,确实体验不报,站长也不做一点改变,诶
    abc612008
        19
    abc612008  
       103 天前
    base64 里的信息不是已经在 post 里有了吗,不能直接替换吗。为啥要再加一个图片啊
    sNullp
        20
    sNullp  
       103 天前
    v2ex 看来需要一个 pm ,来优先化大家经常需要的功能。开发团队目测还是对哪块感兴趣(更容易)搞哪里,属于工程师的习惯。
    Livid
        21
    Livid  
    MOD
       102 天前
    我只是弱弱的问一下,为什么 comment 里会需要 h1 ?
    lisongeee
        22
    lisongeee  
    OP
       102 天前
    @Livid 呃呃,我只是想让评论支持 markdown 而已,h1 只是演示
    lisongeee
        23
    lisongeee  
    OP
       102 天前
    @wxf666 @abc612008

    已经修复,具体看第一条附言
    fzdwx
        24
    fzdwx  
       102 天前
    test

    ```go
    package main

    import (
    "fmt"
    "github.com/fzdwx/infinite/components"
    )

    func main() {
    input := components.NewInput()

    if err := components.NewStartUp(input).Start(); err != nil {
    panic(err)
    }

    fmt.Println("Get:", input.Value())
    }
    ``
    fzdwx
        25
    fzdwx  
       102 天前
    test

    ```go
    package main

    import (
    "fmt"

    )

    func main() {
    input := components.NewInput()

    if err := components.NewStartUp(input).Start(); err != nil {
    panic(err)
    }

    fmt.Println("Get:", input.Value())
    }
    ```
    lisongeee
        26
    lisongeee  
    OP
       102 天前
    @wxf666

    `问题已修复,已经支持 www.v2ex.com `

    ~~测试一下删除线~~
    wxf666
        27
    wxf666  
       102 天前
    @lisongeee 生效了!

    很喜欢<u>通过 base64 来保留原始信息</u>的功能啊,为啥要去掉啊

    v 站吃缩进吃得我麻了都。。


    > 现在代码的缩进会被去掉,我考虑要不要加个代码自动格式化

    这个应该是不能完全实现的。比如`Python`:

    ```python
    if condition:
    do_something()
    return
    ```

    这个`return`,到底是`if`内的呢,还是`if`外的呢?
    lisongeee
        28
    lisongeee  
    OP
       102 天前
    @wxf666 哈哈,你发的 python 代码被 v2 去缩进后是有语法错误的,if 下面一行至少要缩进一个 pass

    > 为啥要去掉啊

    我用的图片链接前缀是 `https://github.com/lisonge/lisonge.gitHub.io/raw/main/1x1.png`

    这个 在 v2 的评论不装任何插件会直接显示一大串的文本,这个产生效果可以去看我的发言记录 [lisongeee]( https://v2ex.com/member/lisongeee)

    不过我发现 v2 好像会直接转 `微博图床` 的链接,我一会试试看把链接前缀换成 `微博图床` 的链接看看行不行

    不过有个缺点需要注意,我记得 v2 是有评论最大长度限制的,在评论里补充 `微博图片链接`,可能会被算入文本长度
    lisongeee
        29
    lisongeee  
    OP
       102 天前
    @wxf666 微博图片链接也不行

    对于链接 ` ?k=v#hash`

    v2 会直接把前面的 ` ` 替换成链接,后面的文字直接保留在评论区

    效果可以直接看 </t/851687#r_12009041>
    wxf666
        30
    wxf666  
       102 天前
    @lisongeee 对啊,如果要做`代码自动格式化`,这个被吃掉缩进的代码,就是你的格式化插件日常要面对的东西了

    `do_something()`还能猜一猜,`return`连人工都猜不出来
    sugarkeek
        31
    sugarkeek  
       102 天前
    @magicdawn 这叫产品的克制 /doge
    Cagliostro
        32
    Cagliostro  
       102 天前
    @felixcode 并不能,图床寄了?
    Cagliostro
        33
    Cagliostro  
       102 天前
    @lisongeee yes ,油猴图标,原来支持啊,怪我没试,不过似乎跟 [v2ex 增强] 冲突,楼中楼不好回复
    ![]( https://s3.bmp.ovh/imgs/2022/08/20/844a16e87fd881b5.png)
    sankemao
        34
    sankemao  
       102 天前
    # Test
    lkkle
        37
    lkkle  
       101 天前
    可以用,效果不错
    ltkun
        38
    ltkun  
       101 天前
    - ok
    好像没有那个回复按钮啊
    lisongeee
        39
    lisongeee  
    OP
       101 天前
    @ltkun 现在不需要了,你直接发 markdown 语法就行,缺点是你的代码没有缩进,因为缩进被 V2EX 吃了

    ```ts
    if(true===true){
    console.log(`hello`);
    }
    ```
    q1angch0u
        40
    q1angch0u  
       100 天前
    ```
    if(true===true){
    %20console.log(`hello`);
    }
    ```
    Envov
        41
    Envov  
       99 天前
    # 我觉得 V2EX 回复代码块需要优化一下,可以低成本的回复带高亮的代码块,论坛里很多有意义的回帖中的代码块没格式,图片这个倒是必要性不大
    lookStupiToForce
        42
    lookStupiToForce  
       99 天前
    安装这个脚本后,可以看到别人的选然后的 markdown 回复
    但是我自己不能回复支持渲染的 markdown
    应该是这个脚本的回复框功能和 chrome 扩展 V2EX plus 冲突了
    sad
    SimonOne
        43
    SimonOne  
       99 天前
    外链多了,站长就不让你外链了,就很烦啊。
    lisongeee
        44
    lisongeee  
    OP
       99 天前
    @lookStupiToForce

    > 安装这个脚本后,可以看到别人的选然后的 markdown 回复
    > 但是我自己不能回复支持渲染的 markdown
    > 应该是这个脚本的回复框功能和 chrome 扩展 V2EX plus 冲突了
    > sad

    这个脚本当前版本并没有修改回复框的功能,它只会使用 markdown 二次渲染每一条评论,另外如果二次渲染后评论文本没有变化,就不会替换 dom
    lookStupiToForce
        45
    lookStupiToForce  
       99 天前
    @lisongeee #44 主要是我的回复框下面没有“回复 markdown”那个按钮
    lisongeee
        46
    lisongeee  
    OP
       99 天前
    @lookStupiToForce

    `回复 markdown` 已经不需要了,正常点击回复即可
    lookStupiToForce
        47
    lookStupiToForce  
       99 天前
    @lisongeee #46 好的谢谢。我也试试

    ```
    test a test
    ```
    heronlyj
        48
    heronlyj  
       99 天前
    不错的插件,多谢分享
    Simons
        49
    Simons  
       99 天前
    ```
    test
    ```
    imaple
        50
    imaple  
       98 天前
    - 安装测试一下
    - 背景是黑色的
    beginnerZ
        51
    beginnerZ  
       98 天前 via iPhone
    聪明的楼主如何电脑打开 V2EX 的?我用 google 和 firefox 打不开,关闭了 vpn 也打不开,手机和电脑连的相同 wifi ,手机却可以打开 v2ex😔
    lisongeee
        52
    lisongeee  
    OP
       98 天前
    @beginnerZ

    我电脑手机都能打开啊,我用的 clash 代理,让 v2ex.com 的流量走海外节点就行
    mango88
        53
    mango88  
       95 天前
    #### 我试试插件成功没有
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1193 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 47ms · UTC 22:16 · PVG 06:16 · LAX 14:16 · JFK 17:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.