代码块点击后的位置

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

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

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

代码块动效建议.gif

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • svchord 2 评论
    捐赠者 订阅者 作者

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

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

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

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

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

    image.png

    1 回复
  • 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 回复

推荐标签 标签

  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    700 引用 • 1147 回帖 • 390 关注
  • Python

    Python 是一种面向对象、直译式电脑编程语言,具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用缩进来定义语句块。

    513 引用 • 669 回帖
  • SSL

    SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    65 引用 • 188 回帖 • 519 关注
  • 支付宝

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

    29 引用 • 347 回帖
  • AngularJS

    AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 377 关注
  • Hadoop

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

    74 引用 • 121 回帖 • 647 关注
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    324 引用 • 602 回帖
  • 生活

    生活是指人类生存过程中的各项活动的总和,范畴较广,一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    225 引用 • 1440 回帖
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 685 关注
  • PWA

    PWA(Progressive Web App)是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术,在网页应用中实现和原生应用相近的用户体验。

    13 引用 • 68 回帖 • 77 关注
  • 智能合约

    智能合约(Smart contract)是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易,这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖 • 4 关注
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 55 关注
  • 笔记

    好记性不如烂笔头。

    291 引用 • 775 回帖
  • 996
    13 引用 • 200 回帖 • 1 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    297 引用 • 539 回帖 • 282 关注
  • 博客

    记录并分享人生的经历。

    262 引用 • 2369 回帖
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。

    111 引用 • 99 回帖 • 386 关注
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    123 引用 • 579 回帖
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 546 关注
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    158 引用 • 935 回帖 • 1 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 4 关注
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    50 引用 • 37 回帖 • 1 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 542 关注
  • 自由行
    6 关注
  • VirtualBox

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

    10 引用 • 2 回帖 • 3 关注
  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖 • 1 关注
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高,单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 56 关注