登录 注册

[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

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

  • 思源笔记

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

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

    23125 引用 • 93111 回帖 • 1 关注
  • 代码片段

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

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

    92 引用 • 588 回帖 • 1 关注
2 引用
为了让文档层级导航插件能用于 MOC 笔记法，我写了一个对反链进行过滤的代码片段 • Achuan-2
代码块功能优化建议 • wilsons
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 更新了该帖
6 感谢
1 关注
3 收藏
1 赞同
2 引用
5 操作
45 回帖
18
8
5
5
4
3
869 236 613 1 5 14

相关帖子

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

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

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

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

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

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

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

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

    我这里会报错

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

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

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

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

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

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • Achuan-2 •
    订阅者 先知

    原来这样呀。
    ps：如果出现的是 hljs，querySelector 选择代码语言要更改下，因为代码语言是兄弟节点不是子节点，会查找不到

    1 回复
  • 其他回帖
  • wilsons •
    付费者 捐赠者 作者

    新增智能版

    注意： 智能版默认并未开启智能模式，默认还是非智能版 😄 要使用智能版，先要把 const enableSmartMode = false; 改为 true 才行。

    智能版通过检测用户的操作行为去判断是否用户触发的代码块，如果不是则不添加最近的历史。这样有效避免了意外触发，但缺点是一旦检测失败，脚本将失效，兼容性不如非智能版。

    而非智能版的缺点是，会在第一次加载含有代码块的文档时，会把上一次用户的使用语言添加到最近历史中，虽然这影响不大，但这是意外情况，非用户手动触发，所以为了让体验一致，脚本会在第一次运行时把用户上一次使用的语言添加到最近历史中（不过，这样去理解也没错，最近嘛，上次使用的也是最近嘛 😄 ）。

    下面把二者做个详细对比

    功能对比 智能版 非智能版
    优点 1. 有效避免意外触发
    2. 仅用户操作时才触发添加语言历史    		 1. 虽然会有意外触发，但无影响
    缺点 1. 兼容性不如非智能版
    2. 用户行为检测失败，脚本失效    		 1. 第一次加载会把用户上次使用的语言加到历史
    推荐 否 是
    适合用户 极客，有调试能力的用户 普通用户
    用户感知 无感知 除了第一次加载添加上次语言外，无感知
    重置方法 删除 recently_code_lang.json 文件后，
    刷新或重启思源    		 删除 recently_code_lang.json 文件后，
    刷新或重启思源

    智能版完整代码如下

    代码不同点对比（左侧智能版，右侧非智能版）

    image.png

  • Achuan-2 •
    订阅者 先知

    所以我改成了这样就没问题了

                // 监听新增代码
            if(mutation.target.classList.contains("hljs")) {
                if(codeTimer) clearTimeout(codeTimer);
                codeTimer = setTimeout(() => {
                    const langText = mutation.previousSibling.textContent;
                    // 添加语言
                    addLanguage(langText);
                    // 设置默认语言
                    setDefaultLang();
                    // console.log(mutation.target.querySelector(".protyle-action__language")?.textContent, 'selected');
                }, 40);
            }
  • wilsons •
    付费者 捐赠者 作者

    感谢 F 佬的指点！

    感谢 @zxkmm 的建议！

    也不是非不装 node 环境，大项目或者偶尔还行，有时小插件的话，感觉有点杀鸡用牛刀了。

    确实你提供的 API 非常棒，涵盖了思源的 api 还有扩充。

    不过非插件自用还好，分享的话，对不了解的人使用费事。

    关于热加载根据 F 佬的指导，我有一点思路，也参考 obsidian 的插件。主要原理还是监控文件变化，然后把项目和插件关联起来，如果文件有变动，进入思源时就自动关闭和开启下插件，这样基本能满足绝大多数的热加载需要。

    @zxkmm ob 的热加载也是这个原理。

    只是限于水平，时间和精力，完善的热加载插件估计还得考虑诸多因素，不过偶尔开发，写段代码模拟下估计还是可以的。😄

    1 回复
  • 查看全部回帖
wilsons
人生最大的敌人是自己，战胜自己，才能超越一切。
回帖
936
 帖子
28
 积分
25025