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

介绍

如题,在代码块顶部筛选语言时,每次都是按 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

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

  • 思源笔记

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

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

    23645 引用 • 95959 回帖 • 3 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    104 引用 • 723 回帖
5 操作
wilsons 在 2024-12-18 19:58:06 更新了该帖
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 更新了该帖

相关帖子

优质回帖
  • wilsons 2

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

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

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

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

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

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

  • 我这里会报错

  • Achuan-2 1

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

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

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

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • muxue via Android

    我懂了,你这个代码片段不能手动切换语言,不然就没用了。我说的手动切换指的是在本来创建的代码块中更改语言。

    我想要的是即便手动切换了也能让默认 ``` 创建的代码块一直锁在 c 的这种功能。现在这个代码片段没有办法实现。我还以为可以绕过思源那个功能呢……

    不过还是感谢分享了。

    1 回复
  • 其他回帖
  • wilsons

    你说的对,附上备份代码地址:gitee 备份代码地址

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

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

    1 回复
  • wilsons

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

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

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

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

    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 回复
  • 查看全部回帖
wilsons
人生最大的敌人是自己,战胜自己,才能超越一切。