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

介绍

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

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

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

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

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

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

效果

代码片段

注意事项

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

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

其他

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

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

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

效果

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

wilsons • 2 周前 • 2

付费者捐赠者作者

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

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

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

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

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

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

JeffreyChen • 2 周前 • 1

付费者支持者捐赠者

我这里会报错

Achuan-2 • 2 周前 • 1

订阅者先知

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

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

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

34 回帖

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

欢迎来到这里！

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

注册关于

请输入回帖内容 ...

leolee • 2 周前

订阅者捐赠者恶龙

/**
 * 一旦文件发生变化,就触发相应的回调 
 * 要是想完善一下就弄成跟fs一致吧懒得弄了
 */
function watch(path,callback){
        let changedFiles = [];
        let isWalking = false
        const walkDir = async (currentPath) => {
            const response = await fetch('/api/file/readDir', {
                method: 'POST',
                body: JSON.stringify({ path: currentPath }),
            });
            const json = await response.json();
            const stats = json.data;
          
            for (const entry of stats) {
                const fullPath = `${currentPath}/${entry.name}`;
                if (entry.isDir) {
                    await walkDir(fullPath);
                } else {

                    if (watchStats[fullPath] && watchStats[fullPath] !== entry.updated) {
                        changedFiles.push(fullPath);
                    }
                    watchStats[fullPath] = entry.updated;
                }
            }
        };
        const idleCallBack =async()=>{
            if(isWalking)return
            isWalking = true
            changedFiles = [];
            await walkDir(path)
            if(changedFiles.length>0){
                callback(changedFiles)
            }
            isWalking = false
            setTimeout(idleCallBack,1000)
        }
        setTimeout(idleCallBack,1000)
}

1 回复

1 引用

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

其他回帖

Achuan-2 • 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 • 2 周前
付费者捐赠者作者

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

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

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

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

2 回复

wilsons • 2 周前

新增智能版

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

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

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

下面把二者做个详细对比

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

智能版完整代码如下

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

查看全部回帖

介绍

效果

代码片段

注意事项

其他

相关帖子

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

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

开发人员应该害怕低代码吗？

【代码片段分享】思源笔记用到现在积累的所有代码片段

【代码片段分享】Savor 主题的多行搜索展示 CSS 片段

【代码片段】突出标题

[分享] 文件树缩进线（Cliff-Dark 主题中的部分 CSS 片段）

欢迎来到这里！