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

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

  •  
  •   lisongeee ·
    lisonge · 2022-08-18 20:40:16 +08:00 · 5257 次点击
    这是一个创建于 825 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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 条附言  ·  2022-08-19 10:12:14 +08:00
    我之所以在评论后面加 base64 是因为 V2EX 会把我的代码里的缩进去掉,所以我想通过 base64 来保留原始信息

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

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

    现在代码的缩进会被去掉,我考虑要不要加个代码自动格式化
    第 2 条附言  ·  2022-08-22 14:43:24 +08:00

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

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

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

    第 3 条附言  ·  2022-08-23 14:21:15 +08:00
    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
    lisongeee
        1
    lisongeee  
    OP
       2022-08-18 20:42:09 +08:00
    Cagliostro
        3
    Cagliostro  
       2022-08-18 21:06:47 +08:00
    既然如此,支持评论区图片吗?
    Barnard
        4
    Barnard  
       2022-08-18 21:12:17 +08:00
    ## 这真是喜闻乐见啊
    lucifer9
        6
    lucifer9  
       2022-08-18 21:51:37 +08:00
    cssk
        7
    cssk  
       2022-08-18 22:21:56 +08:00 via iPhone
    # h1
    ## h2
    test
    cssk
        8
    cssk  
       2022-08-18 22:22:28 +08:00 via iPhone
    autoxbc
        9
    autoxbc  
       2022-08-18 22:23:18 +08:00
    其实是在站长的存储后端上搭了一个新的服务,隐写 + 前端解码,不可能让你搞大
    Tumblr
        10
    Tumblr  
       2022-08-18 22:37:53 +08:00   ❤️ 1
    这个插件算是自己写 markdown 给自己看吧。。。
    yfugibr
        11
    yfugibr  
       2022-08-18 22:39:03 +08:00 via Android
    lyc575757
        12
    lyc575757  
       2022-08-18 22:41:25 +08:00
    lisongeee
        13
    lisongeee  
    OP
       2022-08-19 00:50:51 +08:00
    我知道评论区某些人为啥不成功了,因为我装了 《 V2EX 增强》 这个油猴脚本,我测试的时候把它也打开了

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

    (这里一部电影)

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

    已经修复,具体看第一条附言
    fzdwx
        24
    fzdwx  
       2022-08-19 10:22:41 +08:00
    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  
       2022-08-19 10:23:03 +08:00
    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
       2022-08-19 14:53:51 +08:00
    @wxf666

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

    ~~测试一下删除线~~
    wxf666
        27
    wxf666  
       2022-08-19 18:19:28 +08:00
    @lisongeee 生效了!

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

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


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

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

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

    这个`return`,到底是`if`内的呢,还是`if`外的呢?
    lisongeee
        28
    lisongeee  
    OP
       2022-08-19 18:32:57 +08:00
    @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
       2022-08-19 18:47:43 +08:00
    @wxf666 微博图片链接也不行

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

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

    效果可以直接看 </t/851687#r_12009041>
    wxf666
        30
    wxf666  
       2022-08-19 18:50:05 +08:00
    @lisongeee 对啊,如果要做`代码自动格式化`,这个被吃掉缩进的代码,就是你的格式化插件日常要面对的东西了

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

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

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

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

    `回复 markdown` 已经不需要了,正常点击回复即可
    lookStupiToForce
        47
    lookStupiToForce  
       2022-08-22 14:43:51 +08:00
    @lisongeee #46 好的谢谢。我也试试

    ```
    test a test
    ```
    heronlyj
        48
    heronlyj  
       2022-08-22 17:56:17 +08:00
    不错的插件,多谢分享
    Simons
        49
    Simons  
       2022-08-22 18:00:19 +08:00
    ```
    test
    ```
    imaple
        50
    imaple  
       2022-08-23 10:28:36 +08:00
    - 安装测试一下
    - 背景是黑色的
    beginnerZ
        51
    beginnerZ  
       2022-08-23 11:06:52 +08:00 via iPhone
    聪明的楼主如何电脑打开 V2EX 的?我用 google 和 firefox 打不开,关闭了 vpn 也打不开,手机和电脑连的相同 wifi ,手机却可以打开 v2ex😔
    lisongeee
        52
    lisongeee  
    OP
       2022-08-23 11:56:34 +08:00
    @beginnerZ

    我电脑手机都能打开啊,我用的 clash 代理,让 v2ex.com 的流量走海外节点就行
    mango88
        53
    mango88  
       2022-08-26 13:15:36 +08:00
    #### 我试试插件成功没有
    lisongeee
        54
    lisongeee  
    OP
       2022-08-30 15:18:59 +08:00
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3402 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 11:29 · PVG 19:29 · LAX 03:29 · JFK 06:29
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.