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

介绍

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

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

  • 思源笔记

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

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

    22224 引用 • 88803 回帖
  • JavaScript

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

    729 引用 • 1327 回帖
  • 代码
    466 引用 • 631 回帖 • 9 关注
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 更新了该帖

相关帖子

优质回帖
  • wilsons 2

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

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

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

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

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

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

  • 我这里会报错

  • Achuan-2 1

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

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

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

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • Achuan-2 2 评论

    if(mutation.target.classList.contains("code-block")) {

    这个好像有点问题,貌似是不执行的,新增代码块的 mutation.target.classList 只有 hljs

    我设置默认语言为 python,新增代码块确实是 python 语法高亮,再新增一个 matlab 代码块,之后再新增不指定语言的代码块,默认就是 matlab 代码块了

    2 回复
    3 操作
    Achuan-2 在 2024-08-09 16:40:09 更新了该回帖
    Achuan-2 在 2024-08-09 16:31:07 更新了该回帖
    Achuan-2 在 2024-08-09 15:55:09 更新了该回帖
    你这个回帖看起来很奇怪啊,需要重新编辑一下
    JeffreyChen
    @JeffreyChen 因为涉及 ```, 链滴对这个输入没优化,代码块和行内代码都没法输入
    Achuan-2
  • 其他回帖
  • wilsons

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

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

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

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

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

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

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

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

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

    image.pngimage.png

    1 回复
  • 所以我改成了这样就没问题了

                // 监听新增代码
                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);
                }
    
  • 查看全部回帖