登录 注册

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

介绍

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

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

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

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

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

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

效果

Snipaste20240808113432.png

代码片段

注意事项

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

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

其他

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

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

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

效果

r11.gif

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

  • 思源笔记

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

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

    22252 引用 • 88940 回帖 • 1 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML 网页上使用，用来给 HTML 网页增加动态功能。

    729 引用 • 1327 回帖 • 1 关注
  • 代码
    466 引用 • 631 回帖 • 9 关注
2 引用
为了让文档层级导航插件能用于 MOC 笔记法，我写了一个对反链进行过滤的代码片段 • Achuan-2
代码块功能优化建议 • wilsons
4 操作
wilsons 在 2024-08-09 21:13:33 更新了该帖
wilsons 在 2024-08-08 19:54:30 更新了该帖
wilsons 在 2024-08-08 13:50:09 更新了该帖
wilsons 在 2024-08-08 13:21:59 更新了该帖
6 感谢
1 关注
3 收藏
1 赞同
2 引用
4 操作
45 回帖
18
8
5
5
4
3
679 220 451 1 5 2

相关帖子

优质回帖
  • wilsons • • 2
    付费者 捐赠者 作者

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

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

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

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

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

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

  • JeffreyChen • • 1
    付费者 支持者 捐赠者

    我这里会报错

  • Achuan-2 • • 1
    订阅者 先知

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

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

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

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

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • muxue •
    付费者 捐赠者
    该回帖仅作者和楼主可见
    1 回复
  • 其他回帖
  • Achuan-2 •
    订阅者 先知

    我用你的方式（即斜杆命令创建不指定语言的代码块），也是一样的结果，监听 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";

    录屏

    思源文档设置默认语言.gif

    1 回复
  • muxue •
    付费者 捐赠者

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

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

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

    image.png

    image.png

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

    抱歉，我 Mac 系统，思源 3.1.2, 3.1.3，都尝试了，无法重现你的问题。

    具体原因可能需要你自己根据自己的环境进行调试。

    defaultCodeLang 是通过 window.siyuan.storage["local-codelang"] = defaultCodeLang 实现的，你每次输入代码块前，先检查这个是否设置成功，或者手动设置试试。

    如果不是这个原因，再检查 mutation 监控中，为什么没检测到 code-block 元素的变化？如果能解决这两个问题，这个问题应该就解决了。

    2 回复
  • 查看全部回帖
wilsons
回帖
755
 帖子
21
 积分
17473