代码块点击后的位置

如图所示,这是 Mark Text 的代码块点击后的显示:代码块的位置不会变,在上下显示 ```

我觉得可以借鉴一下,毕竟代码原地渲染已经实现了。

代码块动效建议.gif

广告 我要投放

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • zqhjl 2 评论
    作者

    我尝试了很久,还是没能用 css 实现这个功能(捂脸),所以才上论坛发帖来了。你有什么实现思路吗?

    啊,还没尝试过。最近没空折腾主题了 ,可以直接问问 v 姐,点击出现这个样式应该是 js 控制的吧
    Achuan-2
    @Achuan-2 对我也是这么想的,所以才发帖子问问能不能直接把这个效果做成默认。我今天大概大改了一回主题,应该也很长时间不会改了
    zqhjl
  • 其他回帖
  • zqhjl 3 评论
    作者

    V 姐你可能理解错了 😂 重点是代码框点击后位置不变,而不是不想要那三个点

    位置不变的话设置为 visibility: hidden; --expand 的时候设置为 visibility: visible;
    Vanessa
    @Vanessa 我刚刚试了下还是不行,因为不点击的情况下是没有 before 的,自然 visibility 就无效了。而如果强行加上一个内容为空的 before,又会影响展开后的 before
    zqhjl
    @Vanessa 噢我刚刚用:not 限定了下就可以了,终于搞定了,感谢 V 姐
    zqhjl
  • Vanessa
    订阅者

    --expand 移除试试

    .vditor-ir__node--expand[data-type="code-block"]:before, .vditor-ir__node--expand[data-type="code-block"]:after, .vditor-ir__node--expand[data-type="yaml-front-matter"]:before, .vditor-ir__node--expand[data-type="yaml-front-matter"]:after, .vditor-ir__node--expand[data-type="math-block"]:before, .vditor-ir__node--expand[data-type="math-block"]:after
    
    1 回复
  • Achuan-2
    订阅者

    这样就得加 margin-top 了,虽然字体可以搞小点。如果可以的话直接像 typora 一样隐藏 ```fences,把语言类型搞成一个小方框在上方,typora 在下方不太好,万一长了就不方便改

    image.png

    1 回复