用 codemirror 小写了个 latex 公式的提示插件

最近推公式推的很烦,故写了此插件,希望能够加快一些推公式的效率,现在分享出来。插件名字叫 siyuan-plugin-enhance-editor,解压到插件文件夹就能用。

siyuanpluginenhanceeditor.zip

基本功能

打开插件后,进入单独编辑代码的窗口就会触发自动补全,字体和背景颜色理论上应该跟原本的窗口是一致的,右下角三角形是拖动改变大小的。具体的情况如下图:

录制 20241016134045192.gif

原理简述

本质上是用 codemirror 替换了思源编辑窗口的 textarea,然后限定以“\”开头的单词才会触发自动补全(鉴于目前 HTML 代码编辑窗、SQL 代码编辑窗并没有区分,然而前两者并没有需要输入反斜杠的关键词,这样做或许不会产生混淆)

目前没有做任何的语法分析和高亮,并且词库使用的是 MathJax 的词库,和 KaTex 的还不太一样,在使用过程中建议自己逐渐更新词库,直接在 index.js 里面搜 mathSnippetListmathKeywordList 就可以修改,其中前者会根据 apply 字段作为模板生成 snippets,后者的 label 就是补全的结果,而 displayLabel 是显示出来的那个,type 是用来改变图标的,具体参考 codemirror 说明

README 是直接照搬的 sidebar-memo 的,懒得改了,能用就行,就酱!

源码

想了想还是把源码放出来了,在 webpack.config.js 里面修改一下 targetDir(目标文件夹,就是工作空间里插件所在的文件夹),再 pnpm install 以及 pnpm run build 就可以了。源码如下:

siyuanpluginenhanceeditor 源码.zip

  • 思源笔记

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

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

    22340 引用 • 89394 回帖 • 1 关注
  • 插件
    98 引用 • 575 回帖 • 3 关注
  • LaTeX

    LaTeX(音译“拉泰赫”)是一种基于 ΤΕΧ 的排版系统,由美国计算机学家莱斯利·兰伯特(Leslie Lamport)在 20 世纪 80 年代初期开发,利用这种格式,即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能,能在几天,甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式,这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    12 引用 • 54 回帖 • 65 关注
1 操作
WingDr 在 2024-10-17 15:20:19 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 其他回帖
  • zxhd86 1 赞同

    其实我很久之前就建议利用 codemirror 替代代码块,还有这个部分了 😋 不过最后还是看到作为插件形式出现了

    1 回复
  • 代码块不好整,那个是用 contenteditable 做的特殊样式,但是讲道理那个是最应该整的,而且是最方便的。但是现在 codemirror 还有个问题是 6 现在支持的语言太少了,要是混合的话也不好整

    1 回复
  • EmptyLight

    思源加载插件好像会把所有资源都加载过来,那么只要相对路径拼对了也可以访问插件的文件,不需要用文件接口(从全局字体插件学的)

    不知道 codemirror 的颜色模式是怎么样读取的,如果思源没改 webpreferences 的话,可以读取 root[data-theme-mode]属性,主题用这个属性来检测当前颜色主题。(我的开发者工具突然变成浅色模式了,明明是 browser preference 的)

    另外还有一个想法,思源可以有 katex 的宏定义,那么这种时候如果有一个 custom.json 可以让用户自定义就更方便了,可以通过直接改文件重启生效,或者麻烦一点用接口读写文件,用 textarea 编辑(感觉太麻烦了,还要写一个配置面板)

  • 查看全部回帖