[新插件新功能] 代码块渲染增强,更丰富的着色、实时阅读显示一致性、注释型高亮

一个老生常谈的问题

群里和论坛里有应该老生常谈的问题:实时模式和阅读模式显示不一样

原因

这是因为:默认情况下,obsidian会在实时模式中使用codemirror高亮代码,在阅读模式中使用prismjs高亮代码,使用的并不是一个库。

一般来说codemirror会更适用于实时编辑,而prismjs等其他代码高亮工具更适用于静态渲染 (不可实时编辑),但功能上会更强(颜色组的问题暂且不谈,另一个点是阅读模式能区分更多不同颜色的片段,而这是使用css无法解决的),如下

解决方法,插件新功能

最简单的方法就是在实时模式中,把代码块渲染为阅读模式样子或手动渲染,并添加实时编辑功能。

像 shiki highlight 插件之前做了一半,但没有实时编辑能力。编辑时要先点一下右上角的编辑按钮,而不能直接编辑,比较麻烦。然后我两天改进了这个缺陷。新版本:

使用:

暂未发布版本,点上面第一链接,点击action,然后手动下载里面的编译产物和安装。

不过我把渲染逻辑重构了,很多东西都不走旧代码,暂时会有一些问题,暂时不是很好用,慢慢修。例如把meta highlight功能弄失效了,编译体积大小也被我弄大了……等重构和发正式版本

插件亮点

(1) 增强的渲染能力

(2) 阅读模式与实时模式显示一致性 (原来的方案是实时用cm,阅读模式用prismjs,目前均使用shiki)

(3) 丰富的配色组

近八十种配色方案:在线查看和挑选代码块配色主题: https://textmate-grammars-themes.netlify.app

(4) 功能丰富

支持行高亮、Diff标注等语法

相关链接

实时模式和阅读模式代码块不一致的问题,也是经常有人问了:

2 个赞

期待后续优化和发布 Release 版本

暂时release了个beta版,感觉原作者估计应该是不维护了(原作者四周没更新这插件了,我提issue和PR时他也没有回复我)。

本来是打算等我确定原作者真的不更新了先,我前天PR的,如果原作者两周不理我了,我再自己优化并发布的。

虽然原插件是MIT协议,我可以遵循开源协议分发。但如果作者有空回来维护了,我也不想另外分发。


17:30 补充:

作者回复了,回得慢了。不过看来作者还能继续维护,那就等我改善后合并过去,再由作者那边发布版本吧

源插件是 obsidian-shiki-plugin 吗,坐等发版

不过有个疑问,如果换了渲染的话,那原本的主题代码配色方案是不是相当于基本无效了?

首先,如果使用shiki引擎的话,配色主题相当丰富,有八十多种,不信没有适合你的:https://textmate-grammars-themes.netlify.app (你可以在该网站浏览可以选择的主题)

而且代码主题和obsidian主题分离,是不错的策略,组合自由度高。

二是我昨天又更新了一个东西,可以选择使用回 ob 的渲染引擎 (可以选用 shiki 或 prism。min版只能选用 prism引擎,无法切换到shiki引擎)。选用prsimjs时,能兼容一些原来的插件和css,只要能对阅读模式代码生效的配色方案都可以依然沿用。

希望能合并进去,这个不能直接编辑有点反人类,至少应该有个开关啊

我基本完工了,等PR

一个代码块增强插件:实时和阅读模式样式统一、更良好的编辑体验、更丰富的样式、更强大的扩展功能

你说的是代码实时阅读吗?
我以为是普通页面呢…
看半天才明白过来.

插件作者还没跟新?

我也在等。插件作者好几周没维护开源项目了,然后又好几天没动静了(说起来该作者还是meta-bind(buttons替代)的作者),反正如果他一个月不review,我就另开仓库维护了

shiki之前试过,就是功能少,用回code styler了

这次增加不少配色的确很好看,功能也有提升,但问题多多

c#和yaml渲染不了?
阅读模式正常


编辑模式翻车

JavaScript还给弄了个混双

另外字体还得自己改,代码mono字体之外中文注释字体显然没有继承全局的霞鹜文楷

部分设置面板可以解决(有个设置文档,那个没被合并暂时访问不了,对应的是仓库的docs/里的文档,有我写的中文版本)

其中一个问题是语言支持有限,因为shiki的语言列表与默认obsidian的不一定完全一致(例如可能要求javascript全小写,写c#,写yml,这种)。不过shiki支持语言别名,后续应该就是让这shiki引擎通过别名支持ob的语言类型。其中,如果语言没被支持,则不会渲染,而是显示为原来的模式。这个我有空看看。

或者可以选用prism,引擎行为与原来的比较相似。但缺少一些扩展功能

至于字体,我所使用的是一个css变量,好像叫mono-font。非css变量,直接设置的css样式,是没办法检测和应用到的

谢谢解答,语言支持可以安心等待了,css的问题好解决,我自己修改一下本地css强行覆盖就行

另外我回想了一下当初为什么我会回退code styler
一个重要的原因是,shiki原版的语法问题,比如设置title和高亮某行等,和code styler的差异都挺大,需要写入更多的关键字,污染md更严重(而且特别不好记,要么强行记忆,要么用quick add之类增加snippet,都不是特别理想的方法)。

如果要切换,我得全库几千个代码文档全部去手工查一遍哪些用了高亮语法,哪些单独设置过title。基本等于无法实现。所以,期待能够兼容code styler的功能语法