[js] 思源笔记粘贴到微信公众号处理公式、链接、多级列表

思源笔记发布到微信公众号，对于公式、链接、多级列表会有一些问题，终于忍无可忍，让 GPT 给我写了处理的代码，现在这三种样式都能很好地粘贴到思源笔记啦。再加上我开发的 Tsundoku 主题对发布到微信公众号做了一点样式处理，现在基本上，思源笔记是什么样式，发到微信公众号也是什么样式了，舒服！以后就可以专心写公众号啦！不用每次发布，都折腾排版问题、样式缺失问题。

数学公式处理

处理方法

思源笔记的公式不能直接复制粘贴到微信公众号，于是将公式替换为 svg 来粘贴

js 代码

function loadMathJax(callback) {
    window.MathJax = {
        tex: {
            inlineMath: [
                ['$', '$'],
                ['\\(', '\\)']
            ]
        },
        svg: {
            fontCache: 'none'
        }
    };

    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js';
    script.async = true;
    script.onload = callback;
    document.head.appendChild(script);
}

function createRenderer(display) {
    return (mathContent) => {
        const cleanedContent = mathContent.replace(/\\displaystyle\s*{([^}]*)}/g, '$1');

        window.MathJax.texReset();
        const mjxContainer = window.MathJax.tex2svg(cleanedContent, { display });
        const svg = mjxContainer.firstChild;
        const width = svg.style[`min-width`] || svg.getAttribute(`width`);
        svg.removeAttribute(`width`);
        svg.style = `max-width: 70vw !important;`;
        svg.style.width = width;
        svg.style.display = `initial`;
        if (display) {
            return `<section style="box-sizing: border-box; border-width: 0px; border-style: solid; border-color: hsl(var(--border)); user-select: text !important; color: rgb(10, 10, 10); font-family: ui-sans-serif, system-ui, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; text-align: center; overflow: auto;">${svg.outerHTML}</section>`;
        }
        return svg.outerHTML;
    };
}
async function renderMathBlocks() {
    const mathBlocks = document.querySelectorAll('.b3-typography div[data-subtype="math"]:not([data-repleaced="true"])');
    const renderBlock = createRenderer(true);

    return Promise.all(Array.from(mathBlocks).map(async (block) => {
        const mathContent = block.getAttribute('data-content');
        try {
            block.innerHTML = renderBlock(mathContent);
            block.setAttribute('data-repleaced', 'true');
        } catch (error) {
            console.error('Error rendering MathJax block:', error);
        }
    }));
}

async function renderInlineMath() {
    const inlineMaths = document.querySelectorAll('span[data-type="inline-math"]:not([data-repleaced="true"])');
    const renderInline = createRenderer(false);

    return Promise.all(Array.from(inlineMaths).map(async (span) => {
        const mathContent = span.getAttribute('data-content');
        try {
            span.innerHTML = renderInline(mathContent);
            span.style.verticalAlign = 'middle';
            span.style.lineHeight = '1';
            span.setAttribute('data-repleaced', 'true');
        } catch (error) {
            console.error('Error rendering MathJax inline:', error);
        }
    }));
}


loadMathJax(async () => {
    await Promise.all([renderMathBlocks(), renderInlineMath()]);
    console.log('MathJax has been loaded!');
});

处理后的结果

公式举例

行内公式：f(x) = \frac{\sqrt{x^2 + 1} + \log_e(x + 2) - \sin(\pi x)}{e^{x^2} + \int_0^x t^2 \, dt}

行间公式：麦克斯韦方程组

\begin{array}{lll} \nabla\times E & = & -\;\frac{\partial{B}}{\partial{t}} \ \nabla\times H & = & \frac{\partial{D}}{\partial{t}}+J \ \nabla\cdot D & = & \rho \ \nabla\cdot B & = & 0 \ \end{array}

修改前，发到公众号的样式

修改后，发到公众号的样式

‍

处理链接

处理方法

写 js 代码，处理思源笔记预览模式的超链接，以发送到微信公众号

微信公众号的外链（除了 https://mp.weixin.qq.com/.*以外的链接）是不能直接跳转到，所以要把思源笔记的超链接都变为普通文本，然后链接放在锚文本的后面，即变为 [锚文本](链接)的形式
如果外链锚文本本身就是链接，就不需要用 [text]({href})样式
对转换后的链接添加 color=#338dd6

js 代码

function convertLinksToWechat() {
    // Select all links
    const links = document.querySelectorAll('.b3-typography a');

    links.forEach(link => {
        // Get the href and text content from the link
        const href = link.getAttribute('href');
        const text = link.textContent;

        // Check if the link is not a WeChat internal link
        if (!href.startsWith('https://mp.weixin.qq.com/')) {
            let newTextContent;

            // Check if the text is the same as the href
            if (text === href) {
                // If the text is the same as the href, just use the href
                newTextContent = href;
            } else {
                // Otherwise, format as [text](href)
                newTextContent = `[${text}](${href})`;
            }

            // Create a new span element to hold the text with red color
            const newSpan = document.createElement('span');
            newSpan.style.color = '#338dd6';
            newSpan.textContent = newTextContent;

            // Replace the link with the new span element
            link.parentNode.replaceChild(newSpan, link);
        }
    });
}

处理后的结果

链接样式举例

链接 1，处理为 markdown 源码样式：导出功能添加「是否将链接导出为脚注」 · Issue #11169 · siyuan-note/siyuan
链接 2，本身就为锚文本，不进行转换：https://github.com/siyuan-note/siyuan/issues/11169
公众号链接，粘贴到微信公众号可以保留跳转链接，不进行处理：MOC：面向主题地去管理笔记链接

修改前，发到公众号的样式（注意外链在微信公众号编辑器是有颜色的，但是一旦预览和发布，就会变为普通文本）

修改后，发到公众号的样式

处理多级列表

处理方法

思源笔记目前的渲染是，次级的列表会包含在 <li>中，而微信则是需要次级列表和 <li>同级。
目前复制的多级列表 html 结构为：

<ul>
	<li>
		<ul>
			<li>
				<ul></ul>	
			</li>
		</ul>
	</li>
</ul>

微信公众号需要正常渲染的预期如下：

<ul>
	<li></li>
	<ul>
		<li></li>
		<ul>
               </ul>
	</ul>
</ul>

请写一个 js 代码对思源笔记的列表 DOM 结构进行重新调整，包括

function convertListToWechat() {
    // Select all <ul> and <ol> elements
    const lists = document.querySelectorAll('ul, ol');

    lists.forEach(list => {
        // Get all <li> children of the current list
        const items = Array.from(list.children);

        items.forEach(item => {
            // Check if the <li> has a nested <ul> or <ol> as its direct child
            const nestedList = item.querySelector('ul, ol');
            if (nestedList) {
                // Move the nested list to be a sibling of the current <li>
                item.parentNode.insertBefore(nestedList, item.nextSibling);
            }
        });
    });
}

// Run the function to adjust the list structure
convertListToWechat();

处理后的结果

多级列表举例

多巴胺
1. 基本概念
  - 多巴胺是一种神经递质，属于儿茶酚胺和苯乙胺家族。
  - 它在大脑和身体中扮演着多种角色，尤其是在奖励、动机和愉悦感的调节中。
  - 化学式为C_8H_{11}NO_2，其结构中包含一个苯环和一个胺基。
2. 生理功能
  - 奖励与动机
    - 多巴胺在大脑的奖励系统中起关键作用，影响动机和愉悦感。
    - 它的释放与愉快的体验和行为强化有关。
  - 运动控制
    - 在中脑的黑质区，多巴胺调节运动功能。
    - 多巴胺缺乏与帕金森病有关，导致运动障碍。
  - 情绪与认知
    - 多巴胺影响情绪调节和认知功能。
    - 其失衡可能与精神疾病如抑郁症和精神分裂症有关。
3. 合成与代谢
  - 合成
    - 多巴胺由氨基酸酪氨酸通过一系列酶促反应合成。
    - 关键步骤包括酪氨酸羟化酶催化生成左旋多巴（L-DOPA），然后由多巴脱羧酶转化为多巴胺。
  - 代谢
    - 多巴胺通过单胺氧化酶（MAO）和儿茶酚-O-甲基转移酶（COMT）代谢。
    - 代谢产物包括高香草酸（HVA），可通过尿液排出。
4. 临床相关性
  - 帕金森病
    - 由于黑质区多巴胺神经元的退化，导致运动功能障碍。
    - 治疗通常涉及多巴胺替代疗法，如左旋多巴。
  - 精神疾病
    - 精神分裂症与多巴胺系统的过度活跃有关。
    - 抗精神病药物通常通过阻断多巴胺受体来发挥作用。
  - 成瘾
    - 多巴胺在成瘾行为中起重要作用，许多药物通过增加多巴胺释放或阻止其再摄取来产生愉悦感。
    - 成瘾治疗可能涉及调节多巴胺系统的药物。

修改前，发布到微信公众号的样式

修改后，发到公众号的样式

完整 js 代码片段

切换到预览模式，自动处理公式、链接、多级列表，以发到微信公众号

(async () => {

    // 定义观察DOM变化的函数
    function observeDomChange(targetNode, callback) {
        const config = { childList: true, subtree: true };
        const observer = new MutationObserver((mutationsList) => {
            for (const mutation of mutationsList) {
                if (mutation.type === 'childList') {
                    callback(mutation);
                }
            }
        });
        observer.observe(targetNode, config);
        return observer;
    }

    const targetNode = document.body;

    // 开始观察DOM变化，并在检测到.color__square元素时运行updateColors
    observeDomChange(targetNode, async (mutation) => {
        if (mutation.target.classList.contains("protyle-preview")) {
            // First, convert links
            const hasLink = mutation.target.querySelector('.layout__wnd--active .protyle:not(.fn__none) .protyle-preview>.b3-typography a');
            if (hasLink) {
                convertLinksToWechat();
                await fetchSyncPost('/api/notification/pushMsg', {
                    "msg": "发布到微信公众号：链接样式转换",
                    "timeout": 5000
                });
            }

            // 处理列表结构
            const hasList = mutation.target.querySelector('.layout__wnd--active .protyle:not(.fn__none) .protyle-preview>.b3-typography ul, .layout__wnd--active .protyle:not(.fn__none) .protyle-preview>.b3-typography ol');
            if (hasList) {
                convertListToWechat();
                await fetchSyncPost('/api/notification/pushMsg', {
                    "msg": "发布到微信公众号：列表结构调整",
                    "timeout": 5000
                });
            }

            // 处理公式
            const hasMathBlock = mutation.target.querySelector('.layout__wnd--active .protyle:not(.fn__none) .protyle-preview>.b3-typography div[data-subtype="math"]:not([data-repleaced="true"])');
            const hasInlineMath = mutation.target.querySelector('.layout__wnd--active .protyle:not(.fn__none) .protyle-preview>.b3-typography span[data-type="inline-math"]:not([data-repleaced="true"])');
            if (hasMathBlock || hasInlineMath) {
                await fetchSyncPost('/api/notification/pushMsg', {
                    "msg": "发布到微信公众号：公式转换ing",
                    "timeout": 5000
                });
                loadMathJax(async () => {
                    await Promise.all([renderMathBlocks(), renderInlineMath()]);
                    console.log('MathJax has been loaded!');
                    await fetchSyncPost('/api/notification/pushMsg', {
                        "msg": "发布到微信公众号：公式转换完毕",
                        "timeout": 5000
                    });
                });
            }
        }
    });

    // Function to convert SiYuan note links to plain text with link
    function convertLinksToWechat() {
        // Select all links
        const links = document.querySelectorAll('.b3-typography a');

        links.forEach(link => {
            // Get the href and text content from the link
            const href = link.getAttribute('href');
            const text = link.textContent;

            // Check if the link is not a WeChat internal link
            if (!href.startsWith('https://mp.weixin.qq.com/')) {
                let newTextContent;

                // Check if the text is the same as the href
                if (text === href) {
                    // If the text is the same as the href, just use the href
                    newTextContent = href;
                } else {
                    // Otherwise, format as [text](href)
                    newTextContent = `[${text}](${href})`;
                }

                // Create a new span element to hold the text with red color
                const newSpan = document.createElement('span');
                newSpan.style.color = '#338dd6';
                newSpan.textContent = newTextContent;

                // Replace the link with the new span element
                link.parentNode.replaceChild(newSpan, link);
            }
        });
    }

    // Function to adjust list structure for WeChat
    function convertListToWechat() {
        // Select all <ul> and <ol> elements
        const lists = document.querySelectorAll('.b3-typography ul, .b3-typography ol');

        lists.forEach(list => {
            // Get all <li> children of the current list
            const items = Array.from(list.children);

            items.forEach(item => {
                // Check if the <li> has a nested <ul> or <ol> as its direct child
                const nestedList = item.querySelector('ul, ol');
                if (nestedList) {
                    // Move the nested list to be a sibling of the current <li>
                    item.parentNode.insertBefore(nestedList, item.nextSibling);
                }
            });
        });
    }

    function createRenderer(display) {
        return (mathContent) => {
            const cleanedContent = mathContent.replace(/\\displaystyle\s*{([^}]*)}/g, '$1');

            window.MathJax.texReset();
            const mjxContainer = window.MathJax.tex2svg(cleanedContent, { display });
            const svg = mjxContainer.firstChild;
            const width = svg.style[`min-width`] || svg.getAttribute(`width`);
            svg.removeAttribute(`width`);
            svg.style = `max-width: 70vw !important;`;
            svg.style.width = width;
            svg.style.display = `initial`;
            if (display) {
                return `<section style="box-sizing: border-box; border-width: 0px; border-style: solid; border-color: hsl(var(--border)); user-select: text !important; color: rgb(10, 10, 10); font-family: ui-sans-serif, system-ui, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; text-align: center; overflow: auto;">${svg.outerHTML}</section>`;
            }
            return svg.outerHTML;
        };
    }

    async function renderMathBlocks() {
        const mathBlocks = document.querySelectorAll('.b3-typography div[data-subtype="math"]:not([data-repleaced="true"])');
        const renderBlock = createRenderer(true);

        return Promise.all(Array.from(mathBlocks).map(async (block) => {
            const mathContent = block.getAttribute('data-content');
            try {
                block.innerHTML = renderBlock(mathContent);
                block.setAttribute('data-repleaced', 'true');
            } catch (error) {
                console.error('Error rendering MathJax block:', error);
            }
        }));
    }

    async function renderInlineMath() {
        const inlineMaths = document.querySelectorAll('span[data-type="inline-math"]:not([data-repleaced="true"])');
        const renderInline = createRenderer(false);

        return Promise.all(Array.from(inlineMaths).map(async (span) => {
            const mathContent = span.getAttribute('data-content');
            try {
                span.innerHTML = renderInline(mathContent);
                span.style.verticalAlign = 'middle';
                span.style.lineHeight = '1';
                span.setAttribute('data-repleaced', 'true');
            } catch (error) {
                console.error('Error rendering MathJax inline:', error);
            }
        }));
    }

    function loadMathJax(callback) {
        window.MathJax = {
            tex: {
                inlineMath: [
                    ['$', '$'],
                    ['\\(', '\\)']
                ]
            },
            svg: {
                fontCache: 'none'
            }
        };

        const script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js';
        script.async = true;
        script.onload = callback;
        document.head.appendChild(script);
    }

    async function fetchSyncPost(url, data, returnType = 'json') {
        const init = {
            method: "POST",
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        };
        try {
            const res = await fetch(url, init);
            return returnType === 'json' ? await res.json() : await res.text();
        } catch (e) {
            console.log(e);
            return returnType === 'json' ? { code: e.code || 1, msg: e.message || "", data: null } : "";
        }
    }
})();

[js] 思源笔记粘贴到微信公众号处理公式、链接、多级列表

数学公式处理

处理方法

处理后的结果

处理链接

处理方法

处理后的结果

处理多级列表

处理方法

处理后的结果

完整 js 代码片段

相关帖子

[js] 用代码片段让思源笔记发布到微信公众号支持公式渲染

[css] 去掉写味主题 PDF 摘录样式的灯泡

[js] 鼠标中键折叠块

[js] 实现可手动修改数据库主键引用块的标题

[css] 思源增强器插件左侧 lifelog 弹出框关闭

[js] 实现图片旋转 / 翻转后保存

[css] 大纲缩进线

欢迎来到这里！