登录 注册

代码块点击后的位置

本贴最后更新于 675 天前，其中的信息可能已经水流花落

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

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

代码块动效建议.gif

抚州 位置
1 关注
4 回帖
2
446 36 107 38 6 7 252

相关帖子

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

欢迎来到这里！

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

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

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

    image.png

    1 回复
  • svchord • • 2 评论
    捐赠者 订阅者 作者

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

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

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

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

近期热议

推荐标签 标签

  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。

    74 引用 • 121 回帖 • 645 关注
  • flomo

    flomo 是新一代 「卡片笔记」 ，专注在碎片化时代，促进你的记录，帮你积累更多知识资产。

    4 引用 • 34 回帖
  • 机器学习

    机器学习（Machine Learning）是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。

    75 引用 • 37 回帖
  • 心情

    心是产生任何想法的源泉，心本体会陷入到对自己本体不能理解的状态中，因为心能产生任何想法，不能分出对错，不能分出自己。

    59 引用 • 369 回帖 • 1 关注
  • 面试

    面试造航母，上班拧螺丝。多面试，少加班。

    317 引用 • 1392 回帖
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统，主要使用于便携设备。2005 年由 Google 收购注资，并拉拢多家制造商组成开放手机联盟开发改良，逐渐扩展到到平板电脑及其他领域上。

    325 引用 • 309 回帖 • 298 关注
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞 I/O 模型而得以轻量和高效。

    135 引用 • 267 回帖 • 389 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架，使用 Node.js 编写。

    20 引用 • 140 回帖 • 47 关注
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态；标准是由主流手机厂商组成的快应用联盟联合制定；快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台；以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 3 关注
  • 微服务

    微服务架构是一种架构模式，它提倡将单一应用划分成一组小的服务。服务之间互相协调，互相配合，为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建，能够被独立的部署。

    86 引用 • 155 回帖
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    507 引用 • 3602 回帖 • 1 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统，由瑞典 MySQL AB 公司开发，目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    648 引用 • 529 回帖 • 216 关注
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统，是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议，并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想，是一个性能稳定的多用户网络操作系统。

    885 引用 • 922 回帖
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 19 关注
  • V2Ray

    Project V 是一个工具集合，它可以帮助你打造专属的基础通信网络。Project V 的核心工具称为 V2Ray，其主要负责网络协议和功能的实现，与其它 Project V 通信。

    10 引用 • 15 回帖 • 1 关注
  • Flutter

    Flutter 是谷歌的移动 UI 框架，可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作，它正在被越来越多的开发者和组织使用，并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 1 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机，如：iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    161 引用 • 590 回帖
  • 学习

    “梦想从学习开始，事业从实践起步” —— 习近平

    144 引用 • 458 回帖
  • 宕机

    宕机，多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态，也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态，也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 12 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件，最早由德国 Innotek 公司开发，由 Sun Microsystems 公司出品的软件，使用 Qt 编写，在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 2 关注
  • 支付宝

    支付宝是全球领先的独立第三方支付平台，致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验，及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    70 引用 • 527 回帖 • 603 关注
  • 思源笔记

    思源笔记是一款本地优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，构建你永恒的数字花园。

    115 引用 • 1270 回帖 • 1 关注
  • 30Seconds

    📙 前端知识精选集，包含 HTML、CSS、JavaScript、React、Node、安全等方面，每天仅需 30 秒。

    • 精选常见面试题，帮助您准备下一次面试
    • 精选常见交互，帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段，帮助你获取最佳实践
    • 精选常见代码集，帮助您提高打码效率
    • 整理前端界的最新资讯，邀您一同探索新世界
    488 引用 • 383 回帖 • 1 关注
  • Spring

    Spring 是一个开源框架，是于 2003 年兴起的一个轻量级的 Java 开发框架，由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构，分层架构允许使用者选择使用哪一个组件，同时为 JavaEE 应用程序开发提供集成的框架。

    918 引用 • 1450 回帖 • 402 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 11 关注
  • Google

    Google（Google Inc.，NASDAQ：GOOG）是一家美国上市公司（公有股份公司），于 1998 年 9 月 7 日以私有股份公司的形式创立，设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”，它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎，它提供了简单易用的免费服务。不作恶（Don't be evil）是谷歌公司的一项非正式的公司口号。

    53 引用 • 192 回帖 • 9 关注

最新标签