插件:code-tabs

简介:siyuan-code-tabs

为什么开发这个插件?

在写笔记的时候有些问题会有多个语言版本的代码实现方案,如果顺着写下来文档会变得很长,也不方便查看。之后在 obsidian 上看到有个 code tab 插件,就仿照着它的样子写了个思源插件,不过由于之前没怎么接触过前端技术,所以这个插件基本是在 ChatGPT 和文心一言的帮助下写出来的,中间也走过好几个弯路(现在也没绕出来 😅),代码很难看,不过好在插件勉强能用。

这个插件有什么用?

简而言之就是可以把解决同一个问题的好几个版本的代码放到一组标签页中,看起来更好看一点。一些文本也可以用这个插件来排版,像这样:

image.png

或者像这样:

image.png

用法

在文档中插入一个代码块,在其中编写需要放到标签页中的内容,形式如下:

tab:::这是C语言
lang:::c
#include<stdio.h>
int main(){
    printf("hello world\n");
    return 0;
}

tab:::python:::active
def hello_world():
    print("Hello, World!")

tab::: 后写上标签的标题,标题后面可以跟上 :::actvie 表示默认激活这个标签。省略 :::active 时默认激活第一个标签。

lang::: 后面写上语言类型,省略 lang 时会尝试将标题作为语言类型,无法识别时会将语言类型设置为 plaintext。将 lang 指定为 markdown 时会按 markdown 语法进行渲染显示。

全部写好后点击代码块左上角的块菜单 --> 插件 --> 将代码块转换为标签页 即可。也可以在系统菜单中为它设置一个快捷键。

想要重新编辑就点击块右上角的 切回代码块,复制代码可以点击 切回代码块 下方的复制按钮(复制按钮要鼠标移动到块上才会显示。它只会复制纯文本,所以复制 markdown 时会丢失所有标记)

已知问题

  • 这个插件没有在更低版本的思源上测试过,所以只能在 3.0.10 及以上版本看到它
  • 由于这个插件使用思源中的 HTML 块实现,而思源的 HTML 块内容转义一直有点问题,所以在代码中包含尖括号时显示会有问题(0.2.0 版本开始使用块自定义属性来保存原始的代码,所以基本不用担心代码会因转义错误而丢失的问题),预计在思源 3.0.16 可能会修复这个问题 issues#11499
  • 由于一些第三方主题样式比较复杂,所以不保证能适配所有的第三方主题
  • 由于标签页的显示依赖于插件目录下的一些样式表,所以在导出为 html 或 markdown 时标签页的样式会因找不到样式表而丢失
  • 不支持显示行号

其它问题

为什么使用 HTML 块来实现它?

最开始啥都不懂,当时觉得 HTML 块比起挂件用的 Iframe 块看上去一体性更强一点,加上不知道怎么在挂件里面注册系统快捷键,所以就用了插件搭配 HTML 块这个方案。现在看上去使用 Iframe 块更容易开发一些复杂的功能,不过现在这个插件也基本满足我的需求了,也就不再折腾了。

为什么不做成可以直接编辑的?

大部分没有实现或者不支持的功能都可以用一句话回答:俺暂时还不会

  • 思源笔记

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

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

    19579 引用 • 74568 回帖
  • 插件
    76 引用 • 380 回帖 • 1 关注
1 操作
springtwr 在 2024-05-25 19:25:26 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 这个有意思,感谢

  • jianwu

    【建议】
    能否使用 ## 作为 Code Tab 的标题,并且不影响原来的文本

    1 回复
  • springtwr
    作者

    如果用##作为标题的话可能会把 markdown 文本中的标题识别成标签标题。现在采用的这个三个冒号的形式主要就是想尽量避免识别出错,加之我之前考虑这个标签页的功能在实际使用中频率应该不会太高,复杂一点点的形式应该不会造成太大的使用负担。

    1 回复
  • jianwu

    可以用正则筛选代码块里面的内容,不过也只是提个建议

    1 回复
  • springtwr
    作者

    插件里就是用正则来筛选代码块内容的,但想完全区别出##开头是标签标题还是 markdown 二级标题还是有些麻烦的,我目前没那么多精力做测试,抱歉。如果你有相关的代码能力的话也可以往仓库里提 pr。