代码片段实现代码块最近使用的语言置顶

介绍

如题，在代码块顶部筛选语言时，每次都是按 a-z 排列，能不能按照最近使用的排在上面呢？

当然，这个代码片段就是实现这个功能的。

还增加了默认语言，设置了默认语言后，将不受上次选择的影响，始终是这个默认语言。

还增加了置顶语言功能，加入置顶列表的语言，始终置顶，不管是否最近使用过。

排序顺序是：置顶》最近使用》a-z 排序。

新增支持自定义语言，即使列表中不存在的语言也支持。

效果

代码片段

注意事项

由于手机不支持代码片段，所以不支持手机版，但手机伺服支持。

使用说明，请参考代码注释。

其他

另外，代码块如果有行号，当选择代码时，鼠标超过代码区域到达左侧行号区域及以外区域后选择框会消失。

这个 bug，可以在 css 片段中增加以下样式解决

/* 取消行号列占用的空间 */
.code-block .protyle-linenumber__rows {
    position: absolute;
    left: 0;
}
/* 当有行号时，代码块右移，给行号列让空间 */
.code-block .hljs.protyle-linenumber {
    margin-left: 3.6em;
}

效果

详情请查看帖子：代码块功能优化建议

wilsons • 3 个月前 • 2

付费者捐赠者作者

@EmberSky @JeffreyChen 已经完美修复了。

主要修改了 addLanguage 函数，修改内容如下

// 传入的language参数仅供参考，真正获取最后一次使用的语言得从思源存储中或数据库查询中获取，
// 这样可以防止块元素被意外触发，添加非最后一次使用的语言，导致混乱
// 这样无论哪个代码块被触发都以getLastLang为准
language = getLastLang();

这里默认并没有采用从数据库读取最后一次使用的数据（代码留在那里仅供备用），我发现这个数据思源已经存储了，干脆用思源存储的。

为了达到一致的体验，第一次运行时，默认会把上次使用的语言置顶。

新增了支持自定义语言，即使列表中不存在的语言也支持。

JeffreyChen • 3 个月前 • 1

付费者支持者捐赠者

我这里会报错

Achuan-2 • 3 个月前 • 1

订阅者先知

就是 mutation 监控的问题，因为我确实测试了，新增代码块没有检测到 code-block 变化，，所以 if 判断里面的代码没有执行

code-block 新增，不覆盖思源的上一个选择代码语言，所以下一次新增代码，就变为了上一次选择的代码语言，而不是代码片段设置的代码语言了

我新建空白工作空间测试了，依然检测不到 code-block 变化

45 回帖

代码片段实现代码块最近使用的语言置顶

欢迎来到这里！

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

注册关于

请输入回帖内容 ...

zxkmm • 3 个月前
付费者支持者捐赠者

抱歉 ob 的热加载我也不太清楚是什么。

至于 node_modules 的话原则上只需要装 siyuan. 目前的插件模板还装了其他的主要是因为模板作者用了其他框架。

（只是按我个人理解，因为我不是写前端的，我的思源插件全是现学现卖）
其他回帖

Achuan-2 • 3 个月前

我用你的方式（即斜杆命令创建不指定语言的代码块），也是一样的结果，监听 mutation，也是只有 hljs 变化，没有 code-block 变化

思源是最新版

系统是 windows11

代码

// 功能：代码块最近使用的语言置顶
(async ()=>{
    // 配置默认的代码语言，注意如果设置了这个参数，则会覆盖上一次使用的语言。始终默认用这个语言，为空不设置
    const defaultCodeLang = "python";

    // 配置最近代码语言最大显示个数
    const recentlyCodeLangLength = 10;

    // 配置置顶的代码语言，这个配置里的语言始终置顶，比如 ["js", "java", "php"]
    let topCodeLang = [];

    // 配置持久化文件的存储路径
    const storagePath = "/data/storage/recently_code_lang.json";

录屏

1 回复

Frostime • 3 个月前
订阅者付费者支持者捐赠者

vite-svelte 模板提供了热重载，但是这个热重载本质是检测到文件发生变动就自动 window-reload。和无需刷新的热重载可能还有点差距，但其实日常使用也能用。

你如果不想要使用 node 环境开发，可以试一下‘开发 API’或者‘Run JS’。

这两个插件都把一些前端的 API 透传到了 globalThis 下面（RunJS 还透传了一些对 kernel api 的封装），这样直接在思源里面就可以调用一些给插件用的 api 了。

1 回复
wilsons • 3 个月前 • 2
付费者捐赠者作者
@EmberSky @JeffreyChen 已经完美修复了。

主要修改了 addLanguage 函数，修改内容如下
```
// 传入的language参数仅供参考，真正获取最后一次使用的语言得从思源存储中或数据库查询中获取，
// 这样可以防止块元素被意外触发，添加非最后一次使用的语言，导致混乱
// 这样无论哪个代码块被触发都以getLastLang为准
language = getLastLang();
```
这里默认并没有采用从数据库读取最后一次使用的数据（代码留在那里仅供备用），我发现这个数据思源已经存储了，干脆用思源存储的。

为了达到一致的体验，第一次运行时，默认会把上次使用的语言置顶。

新增了支持自定义语言，即使列表中不存在的语言也支持。
1 回复
查看全部回帖

介绍

效果

代码片段

注意事项

其他

相关帖子

js 代码片段模拟 window.prompt 函数

分享思源代码片段调试技巧

如何将 ChatGPT 变成 TTS 工具

前端开发

webview 中 uniapp h5 项目发送信息给 app

[js] 全屏和刷新按钮、右上角倒计时

[js] shift+F5 刷新页面

欢迎来到这里！