插件：code-tabs

简介：siyuan-code-tabs

为什么开发这个插件？

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

这个插件有什么用？

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

或者像这样：

用法

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

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 块更容易开发一些复杂的功能，不过现在这个插件也基本满足我的需求了，也就不再折腾了。

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

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