用 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

  • 思源笔记

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

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

    22929 引用 • 92191 回帖 • 1 关注
  • 插件
    100 引用 • 591 回帖 • 3 关注
  • LaTeX

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

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

相关帖子

欢迎来到这里!

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

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

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

    1 回复
  • 其他回帖
  • EmptyLight 1 赞同 1 评论

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

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

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

    1 回复
    附:CTRL+Enter 没法关闭编辑器,这个功能有可能添加吗?
    EmptyLight
  • 需要的也不是在思源写代码嘛,还是代码编辑器最合适,我只想要 vscode 的 ctrl➕d,快速选中同一文本,进行替换

    1 回复
  • 用过,就是觉得有些我需求的地方不是很方便,包括使用一些环境之类的,最后还得切到最初的源码编辑

  • 查看全部回帖