用 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

  • 思源笔记

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

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

    22250 引用 • 88929 回帖
  • 插件
    98 引用 • 575 回帖 • 3 关注
  • LaTeX

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

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

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 用过,就是觉得有些我需求的地方不是很方便,包括使用一些环境之类的,最后还得切到最初的源码编辑

  • zxhd86 1 赞同

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

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

    1 回复
  • 大佬辛苦(🙏 ˊ ᗜ ˋ*)

  • 需要的也不是在思源写代码嘛,还是代码编辑器最合适,我只想要 vscode 的 ctrl➕d,快速选中同一文本,进行替换

    1 回复
  • 这个太难了 orz 虽然通过配置可以用 vscode 的快捷键,但是 ctrl+d 我试了还是不行,倒是可以 ctrl+f 查找替换(虽然会先触发一下思源的查找

  • EmptyLight 1 赞同 1 评论

    好像还有点问题,深色模式下的窗口显示倒是没问题,但是打开编辑的时候无法显示光标,并且自动补全的弹出窗口还是白色的,同时搭配上深色模式下的白字就不能看了。同时右下小三角的触发好像有点难?

    本身已经挺完善了,要不考虑下上架集市?要是加上 HTML 的词库或许更热门?

    词库如果独立出来用 json 文件不知道 js 能不能读取到,如果可以的话就可以从 index.js 中独立出来,也更好更改?

    1 回复
    附:CTRL+Enter 没法关闭编辑器,这个功能有可能添加吗?
    EmptyLight
  • LiuMangMi

    请问解压到插件文件夹后,打开插件,一推出集市就关掉,这怎么解决

    1 回复
  • QMike 1 赞同 1 评论

    下载解压后的文件夹的命名其实有问题,和插件中的设置不同,所以启用不成功
    解决方法:将该插件文件夹改名为 siyuan-plugin-enhance-editor 后,再放入 /data/plugins

    (其实就是删掉文件夹原名称的一些后缀)

    感觉其实后缀是链滴资源文件加的,上传时应该没有的
    EmptyLight 1 赞同
  • Achuan-2 1 评论

    大佬有空的话,可以上架集市

    另外发现和数学增强插件有点不兼容,数学增加插件添加的内容,textarea 不会自动更新

    1 回复
    1 操作
    Achuan-2 在 2024-10-22 11:20:43 更新了该回帖
    数学增强插件主要是获取并修改 textarea 的内容,这个插件隐藏了原本的编辑框,估计是将 codemirror 的文本填写到 textarea 里面,因为同样都是向 textarea 修改,所以两边不兼容,建议关掉一个插件
    EmptyLight
  • 这个好说,我现在也发现了,做一个监听双向同步就行。我确实准备上架集市了(因为有个同学也想用),这样的话有些东西就需要改一改

    1 回复
  • 收到,我试着写成真正插件的形式吧,这两天补完然后上架集市,补全的地方我单独提取出来做个文件,主要是之前就想简单用用不想用思源的读取文件接口所以直接写代码里了

    深色模识确实有点问题,我去看看怎么配置一下 codemirror

    1 回复
  • 期待下,两个插件就是强强联合了

  • EmptyLight

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

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

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

请输入回帖内容 ...