可以提高代码块高亮的解析精度吗

刚从 ob 全面迁入思源,其他地方都很满意,就是代码块显示方面,思源用的 highlight.js 的代码块解析精度感觉不如 ob。同样的代码,ob 中可以解析出来为变量,类等等之类的,但 highlight.js 可能就解析出来是文字。

可以看看两者的截图对比。

同样的一段代码

static class Jackson2ObjectMapperBuilderCustomizerConfiguration {
    @Bean
    StandardJackson2ObjectMapperBuilderCustomizer standardJacksonObjectMapperBuilderCustomizer(
        ApplicationContext applicationContext,
        JacksonProperties jacksonProperties) {
        return new StandardJackson2ObjectMapperBuilderCustomizer(applicationContext,
            jacksonProperties);
    }
}

@Bean 后的下一句代码,Ob 中 html 元素如下,StandardJackson2ObjectMapperBuilderCustomizer 类名standardJacksonObjectMapperBuilderCustomizer 方法名被解析为不同元素。

code1.png

在思源中 html 元素如下,可以看出这句代码没有被解析出来,而是当成了一个字符串,接在了被解析出来的 @Bean 后面。

code2.png

接下来是参数解析,对 ApplicationContext applicationContext 这句代码,

Ob 中解析如下,虽然解析出来 css 都是相同的 class,但是可以使用 css 选择器使显示出来的颜色不同,后面截图会展示。

code3.png

在思源中,直接把参数的类名和变量都视为同一个元素,如下,这样无法区分,在页面上展示只能为同一种颜色。

code4.png

最后,再比较下最后页面展示效果。

Ob 中代码高亮效果如下

code5.png

highlight.js 高亮效果如下

code6.png

能解析出来的元素越多,这样代码高亮的区别就越大,看代码相对更省力些。

并不是指望代码块高亮可以比肩 IDE,这个肯定是不可能的。但是平时做笔记,时不时都会记录些代码,如果能够提高代码高亮的解析精度,那这样在阅读复习笔记时看着会更省力些。

  • 思源笔记

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

    融合块、大纲和双向链接,重构你的思维。

    25556 引用 • 105699 回帖
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    9780 引用 • 44482 回帖 • 87 关注

相关帖子

被采纳的回答

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 你大概只能找出具体的问题点然后到上游 hljs 的仓库提 issue 看看

    1 回复
  • amykiki

    我感觉可能这不是 hljs 的问题,我猜 ob 用的是不同的高亮 js?

    1 回复
  • 我在 ob 论坛看到说用的是 PrismJS

  • jacob111

    何止,我笔记里很多 bash 的代码块,除了关键字有个颜色,其他都一个色,太难看了

    1 回复
  • 你的 ob 是不是装了什么代码高亮的插件?

    我问了下 ai 这个是 java 代码吧。

    ob 沙盒的 编辑模式

    image.png

    ob 沙盒的 阅读模式

    image.png

    思源

    image.png

    看起来每个的解析都不是完美的 😂

    2 回复
  • amykiki

    两个方面的事情,我个人理解是

    1. 首先是解析代码高亮的 js,把代码解析成不同的类型的 span
    2. 然后高亮插件是根据解析出来的 span,来高亮对应的代码。

    我的 ob 装了好多乱七八糟的插件,所以可能高亮出来的代码样式和你的不同。

    但我也不是很确定,ob 的代码高亮插件是否有解析的作用,为了确认,你可以调试下 ob 页面的源代码页面(ctrl+shift+I 打开开发者工具),如我上面的截图,重点看下解析出来的代码的 css class 是不是和我截图出来的一样。

  • amykiki

    (ctrl+shift+I)源代码调试下,看下对应代码块是否解析成了不同 class 的 span,像我上面的截图:

    • 如果是不同 class,那好办,你可以自己添加对应的 css 样式代码来高亮不同的 class。因为有些代码高亮 theme,不同 class 都是相同的颜色,我自己的思源里也加了不少 css 样式代码来调整。
    • 如果没有解析出来,直接当成了字符串,那就没办法了。
    1 回复
  • amykiki

    对了,的确 ob 还有编辑模式和阅读模式的不同,我基本一直都是用的编辑模式,帖子里的图片也是编辑模式下截图的。阅读模式下的确解析的不同。

  • jacob111

    早就看过了,而且 highlight.js 有官方演示的,bash 只能高亮非常少数的关键字而已

    hightlight.js 最后一次正经 release 也是 2024 年的事儿了

请输入回帖内容 ...

推荐标签 标签

  • API

    应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

    79 引用 • 431 回帖
  • flomo

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

    6 引用 • 143 回帖 • 1 关注
  • 创业

    你比 99% 的人都优秀么?

    82 引用 • 1395 回帖
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。

    286 引用 • 248 回帖 • 2 关注
  • Follow
    4 引用 • 12 回帖 • 12 关注
  • 思源笔记

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

    融合块、大纲和双向链接,重构你的思维。

    25556 引用 • 105698 回帖
  • CAP

    CAP 指的是在一个分布式系统中, Consistency(一致性)、 Availability(可用性)、Partition tolerance(分区容错性),三者不可兼得。

    12 引用 • 5 回帖 • 632 关注
  • 支付宝

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

    29 引用 • 347 回帖
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 615 关注
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    151 引用 • 257 回帖
  • Hexo

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

    22 引用 • 148 回帖 • 16 关注
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    10 引用 • 77 回帖
  • 域名

    域名(Domain Name),简称域名、网域,是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位(有时也指地理位置)。

    43 引用 • 208 回帖
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    76 引用 • 1742 回帖 • 6 关注
  • danl
    167 关注
  • IBM

    IBM(国际商业机器公司)或万国商业机器公司,简称 IBM(International Business Machines Corporation),总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国,是全球最大的信息技术和业务解决方案公司,拥有全球雇员 30 多万人,业务遍及 160 多个国家和地区。

    17 引用 • 53 回帖 • 140 关注
  • OpenCV
    15 引用 • 36 回帖 • 6 关注
  • 程序员

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

    589 引用 • 3538 回帖
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 59 关注
  • SQLite

    SQLite 是一个进程内的库,实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    5 引用 • 7 回帖 • 5 关注
  • GraphQL

    GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时(类型系统由你的数据定义)。GraphQL 并没有和任何特定数据库或者存储引擎绑定,而是依靠你现有的代码和数据支撑。

    4 引用 • 3 回帖 • 14 关注
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖 • 3 关注
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    29 引用 • 202 回帖 • 29 关注
  • 面试

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

    325 引用 • 1395 回帖
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    35 引用 • 468 回帖 • 764 关注
  • Spring

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

    949 引用 • 1460 回帖
  • GAE

    Google App Engine(GAE)是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 816 关注