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

刚从 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,这个肯定是不可能的。但是平时做笔记,时不时都会记录些代码,如果能够提高代码高亮的解析精度,那这样在阅读复习笔记时看着会更省力些。

  • 思源笔记

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

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

    25375 引用 • 104798 回帖 • 2 关注
  • Q&A

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

    9705 引用 • 44146 回帖 • 91 关注

相关帖子

被采纳的回答

欢迎来到这里!

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

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

    1 回复
  • amykiki

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

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

  • jacob111 via macOS

    何止,我笔记里很多 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 via macOS

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

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

请输入回帖内容 ...

推荐标签 标签

  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 735 关注
  • CodeMirror
    2 引用 • 17 回帖 • 162 关注
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    7 引用 • 69 回帖
  • Swift

    Swift 是苹果于 2014 年 WWDC(苹果开发者大会)发布的开发语言,可与 Objective-C 共同运行于 Mac OS 和 iOS 平台,用于搭建基于苹果平台的应用程序。

    36 引用 • 37 回帖 • 546 关注
  • danl
    164 关注
  • 音乐

    你听到信仰的声音了么?

    62 引用 • 512 回帖
  • 30Seconds

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

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

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    42 引用 • 130 回帖 • 250 关注
  • SMTP

    SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇,它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 635 关注
  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。

    25 引用 • 7 回帖 • 127 关注
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖 • 1 关注
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用 • 9 关注
  • Access
    1 引用 • 3 回帖
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    199 引用 • 542 回帖
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    91 引用 • 384 回帖
  • Swagger

    Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 180 关注
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 4 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件,它使得 Java 程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 676 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架,它对 JDBC 进行了非常轻量级的对象封装,使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 726 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 2 关注
  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    133 引用 • 1124 回帖 • 112 关注
  • 小薇

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

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

    35 引用 • 468 回帖 • 762 关注
  • flomo

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

    6 引用 • 141 回帖 • 1 关注
  • OnlyOffice
    4 引用 • 22 关注