一个老生常谈的问题
群里和论坛里有应该老生常谈的问题:实时模式和阅读模式显示不一样
原因
这是因为:默认情况下,obsidian会在实时模式中使用codemirror高亮代码,在阅读模式中使用prismjs高亮代码,使用的并不是一个库。
一般来说codemirror会更适用于实时编辑,而prismjs等其他代码高亮工具更适用于静态渲染 (不可实时编辑),但功能上会更强(颜色组的问题暂且不谈,另一个点是阅读模式能区分更多不同颜色的片段,而这是使用css无法解决的),如下
解决方法,插件新功能
最简单的方法就是在实时模式中,把代码块渲染为阅读模式样子或手动渲染,并添加实时编辑功能。
像 shiki highlight 插件之前做了一半,但没有实时编辑能力。编辑时要先点一下右上角的编辑按钮,而不能直接编辑,比较麻烦。然后我两天改进了这个缺陷。新版本:
- GitHub - LincZero/obsidian-shiki-plugin
- refactor, feat: support notationHightligh (close #50), feat: editing in live preview (close #19, about #44) by LincZero · Pull Request #51 · mProjectsCode/obsidian-shiki-plugin · GitHub (作者好久没更新了,他不合并的话我可能就单独维护一个分支仓库作为独立版本了)
使用:
暂未发布版本,点上面第一链接,点击action,然后手动下载里面的编译产物和安装。
不过我把渲染逻辑重构了,很多东西都不走旧代码,暂时会有一些问题,暂时不是很好用,慢慢修。例如把meta highlight功能弄失效了,编译体积大小也被我弄大了……等重构和发正式版本
插件亮点
(1) 增强的渲染能力
(2) 阅读模式与实时模式显示一致性 (原来的方案是实时用cm,阅读模式用prismjs,目前均使用shiki)
(3) 丰富的配色组
近八十种配色方案:在线查看和挑选代码块配色主题: https://textmate-grammars-themes.netlify.app
(4) 功能丰富
支持行高亮、Diff标注等语法
相关链接
实时模式和阅读模式代码块不一致的问题,也是经常有人问了:
- 【已解决】在阅读模式下,代码块中的代码不高亮
- 【已解决】求助,代码块在预览模式下显示语言类型
- 【已解决】编辑模式下在引用里嵌套代码块不能正常显示
- Code blocks - Minimal Documentation
- 代码块语法高亮显示,在编辑模式下工作,但不在预览模式下 code block syntax highlighting, works in Edit mode, but not in Preview mode. : r/ObsidianMD
- 语法高亮显示不同于编辑器和预览 Syntax highlight is different from editor and preview - Help - Obsidian Forum
- 语法高亮在阅读模式下不起作用 SH Syntax highlighting doesn’t work in reading mode for sh - Bug graveyard - Obsidian Forum