js 片段，让折叠的代码块显眼一点，并添加代码块注释

功能如下：

• 将折叠代码块透明度重设为 1
• 初始化时将第二行文本（一般第一行是代码语言）作为代码块注释显示，可以自己编辑

图中的展开按钮因为没什么用，注释掉了

js 如下：

• 清空后自动取首行内容

/** 折叠代码块增强显示 **/
const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
        if ((mutation.type === "childList" && mutation.addedNodes.length > 0) || mutation.type === "characterData") {
            try {
                let codeBlocks = document.querySelectorAll('div[data-type="NodeCodeBlock"][fold="1"]');
                codeBlocks.forEach(block => {
                    if (block && !block.classList.contains('js-solved-cb')) {
                        block.style.opacity = 1;
                        let blockText = block.innerText.split('\n');
                        let comment = blockText[1] || blockText[0];

                        // 长度截断，避免过长，后续可考虑通过溢出样式处理
                        if (comment.length > 22) {
                            comment = comment.slice(0, 22) + '...';
                        }

                        let injectNode = block.querySelector(".protyle-action")
                        if (injectNode) {
                            let emptySpan = block.querySelector(".fn__flex-1");
                            if (emptySpan) {
                                emptySpan.innerText = comment;
                                emptySpan.setAttribute('contenteditable', 'true');
                                emptySpan.style = `
                                    color: var(--b3-theme-on-surface);
                                    margin: -4px 2px 0 2px;
                                `
                                // 添加编辑监听
                                emptySpan.addEventListener('input', function () {
                                    let text = emptySpan.innerText;
                                    // 如果文本被清空，则将 classList 移除
                                    if (text === '') {
                                        let curBlock = emptySpan.parentNode.parentNode;
                                        let curComment = curBlock.innerText.split('\n');
                                        let curCommentText = curComment[1] || curComment[0];
                                        emptySpan.innerText = curCommentText;
                                    }
                                });
                            }
                            // // 注入展开按钮
                            // let expandNodeHTML = `
                            // <span 
                            // style="margin-top:-2px;"
                            // class="b3-tooltips__nw b3-tooltips protyle-icon protyle-icon--second protyle-action__fold js-inject-protyle-action" aria-label="展开">
                            // <svg><use xlink:href="#iconExpand"></use></svg>
                            // </span>
                            // `
                    
                            // injectNode.insertAdjacentHTML('beforeend', expandNodeHTML);
                            // let expandNode = injectNode.querySelector('.js-inject-protyle-action');
                            // expandNode.onclick = function () {
                            //     block.setAttribute('fold', '0');
                            //     emptySpan.innerText = '';
                            //     emptySpan.style = '';
                            //     expandNode.remove();
                            // };
                    

                        }
                        block.classList.add('js-solved-cb');
                    }
                })
            } catch (e) {
                console.log(e);

            }
        }
    });
});

observer.observe(document.body, {
    attributes: true,
    characterData: true,
    childList: true,
    subtree: true
});

​

• 自由编辑

/** 折叠代码块增强显示 **/
const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
        if ((mutation.type === "childList" && mutation.addedNodes.length > 0) || mutation.type === "characterData") {
            try {
                let codeBlocks = document.querySelectorAll('div[data-type="NodeCodeBlock"][fold="1"]');
                codeBlocks.forEach(block => {
                    if (block && !block.classList.contains('js-solved-cb')) {
                        block.style.opacity = 1;
                        let blockText = block.innerText.split('\n');
                        let comment = blockText[1] || blockText[0];

                        // 长度截断，避免过长，后续可考虑通过溢出样式处理
                        if (comment.length > 22) {
                            comment = comment.slice(0, 22) + '...';
                        }

                        let injectNode = block.querySelector(".protyle-action")
                        if (injectNode) {
                            let emptySpan = block.querySelector(".fn__flex-1");
                            if (emptySpan) {
                                emptySpan.innerText = comment;
                                emptySpan.setAttribute('contenteditable', 'true');
                                emptySpan.style = `
                                    color: var(--b3-theme-on-surface);
                                    margin: -4px 2px 0 2px;
                                `;
                            }
                            // // 注入展开按钮
                            // let expandNodeHTML = `
                            // <span 
                            // style="margin-top:-2px;"
                            // class="b3-tooltips__nw b3-tooltips protyle-icon protyle-icon--second protyle-action__fold js-inject-protyle-action" aria-label="展开">
                            // <svg><use xlink:href="#iconExpand"></use></svg>
                            // </span>
                            // `
                
                            // injectNode.insertAdjacentHTML('beforeend', expandNodeHTML);
                            // let expandNode = injectNode.querySelector('.js-inject-protyle-action');
                            // expandNode.onclick = function () {
                            //     block.setAttribute('fold', '0');
                            //     emptySpan.innerText = '';
                            //     emptySpan.style = '';
                            //     expandNode.remove();
                            // };
                

                        }
                        block.classList.add('js-solved-cb');
                    }
                })
            } catch (e) {
                console.log(e);

            }
        }
    });
});

observer.observe(document.body, {
    attributes: true,
    characterData: true,
    childList: true,
    subtree: true
});

​