登录 注册

代码块点击后的位置

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

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

代码块动效建议.gif

抚州 位置
1 关注
4 回帖
2
139 34 6 5 2 92

相关帖子

随便看看

广告 我要投放

4 回帖
代码块点击后的位置

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • Achuan-2 •
    订阅者

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

    image.png

    1 回复
  • zqhjl • • 2 评论
    作者

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

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

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

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