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

介绍

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

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

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

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

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

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

效果

代码片段

注意事项

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

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

其他

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

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

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

效果

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

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

众所周知，思源不支持 prompt，确切的说 Electron 不支持。但有时写脚本时确实需要一些交互式操作，如果使用思源 api 调用 Dialog 确实可以实现，但终究是麻烦了些。就自己动手写了一个 prompt 模拟函数，放到 js 代码片段中即可，然后需要的时候就可以直接调用了。效果 [图片] [图片] ..

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

前言思源的代码片段很强大，有了它你几乎可以无所不能。但，你是不是也感受到了一点点烦恼？输入框不仅小，还每次调试都要先打开设置，再粘贴到输入框中。如果你是开发者，频繁的打开和调试，你是不是开始感到有些心累？有没有一种办法，不需要频繁的打开也能进行调试预览呢？答案是肯定的。我在不断的打开与关闭的痛苦中摸索出了一些 ..

【代码片段】突出标题

通过代码片段把标题往前挪一点效果： [图片] [图片] 代码片段： /* 左右移动标题位置 CSS片段 */ .b3-typography>.h1, .protyle-wysiwyg>.h1 { margin-left: -35px; /* 负值可以根据需要进行调整 */ } .b3-typograp ..

压缩列表的源码实现

简介压缩列表 ziplist 本质上就是一个字节数组，是 Redis 为了节约内存而设计的一种线性数据结构，可以包含多个元素，每个元素可以是一个字节数组或一个整数。 Redis 的有序集合、散列和列表都直接或者间接使用了压缩列表。当有序集合或散列表的元素个数比较少，且元素都是短字符串时，Redis 便使用压缩列表作为 ..

[js] shift+F5 刷新页面

常看到大佬们说，刷新页面就行了。那对小白来说，究竟怎么刷新页面呢？把下面的代码放到 js 代码片段中就可以按 shift+f5 刷新页面了，再也不用按大佬们说的打开什么控制台了。 document.addEventListener('keydown', function(event) { // 检查是否同时按下了Ct ..

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

欢迎来到这里！

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

关于

wilsons • 1 个月前 • 2

付费者捐赠者作者

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

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

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

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

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

JeffreyChen • 1 个月前 • 1

付费者支持者捐赠者

我这里会报错

Achuan-2 • 1 个月前 • 1

订阅者先知

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

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

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

45 回帖

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

注册关于

请输入回帖内容 ...

JeffreyChen • 1 个月前 • 1 评论
付费者支持者捐赠者

你是不是想输入这种： ```matlab ```Python ，用两个 ` 来包裹

是的，原来可以

Achuan-2 • 1 个月前
其他回帖
wilsons • 2 周前
付费者捐赠者作者

js 代码片段里面默认语言配置成 c 了

你这里是指配置了 defaultCodeLang 这个参数 const defaultCodeLang = "c"; 了吗？

参数配置后或者说脚本代码被修改后，需要重启思源，新的配置才能生效。

你是配置并重启后测试的吗？

另外，即使配置了，如果键入的代码是```sh，也只会按 sh 来处理，只有未明确指定语言时才使用默认语言，即 defaultCodeLang 所配置的语言。

我是 3.1.6 环境测试没问题，3.1.5 环境我这边没有这个环境，不方便测试，理论上应该一样。如果以上都没问题，建议升级 3.1.6 试试。

1 回复
muxue • 2 周前
付费者捐赠者

代码片段是不是没上代码块啊，好像被直接当作 js 渲染了

不对，这里是上了个啥能直接运行的东西，我这边一直 502。

建议还是用原生代码块，别引入这种直接让文章里面的代码全都不可用的第三方工具吧……您这边贴的所有代码我这里就只有一个 502 的框，如果一直加载不出来，那您这篇文章对于很多读者来说就是无用的文章了。

1 回复

1 操作
muxue 在 2024-09-13 06:51:36 更新了该回帖
wilsons • 2 周前
付费者捐赠者作者

你说的对，附上备份代码地址：gitee 备份代码地址

后续更换一个代码语言以后，又会变成上一次使用的代码语言了

没太理解你的意思，这个脚本并不会默认使用最近的语言，只是会把最近使用的语言置顶到语言选择列表的上面。

1 回复
查看全部回帖

介绍

效果