在支持 Markdown 的本地笔记软件里，思源笔记的笔记编辑是数一数二的：富文本编辑、悬浮工具栏、可调整字号颜色、图片宽度可以直接调整右键可以用默认程序编辑图片
并且思源笔记本身就有一个预览模式，可以一键笔记到知乎、微信公众号以及复制带图床链接的 Markdown。
但是目前的预览模式复制到知乎、微信公众号、Github 都有一点问题
因此我写了一个代码片段进行改进。
改进之后，对我而言，思源笔记已成为知乎、微信公众号、Github README 最佳写作软件
等后面有时间，我会给思源笔记提交 pr，对原生功能进行改进，或者官方什么时候有空，自己改吧！
1 主要改进点
1.1 图床优化
-
支持使用 picgo 插件的图床链接来替换本地图片链接：官方的预览模式只支持官方图床，需要开会员，代码片段支持自动使用 picgo 插件的图床进行替换图片链接，保证本地笔记是本地图片，发布时才替换为图床链接，方便离线预览笔记、编辑图片
这样只需要安装 picgo 插件，配置好自己的图床，就能一键粘贴图文到指定网站
1.2 知乎
1.2.1 图床优化
1.2.2 支持标题自动编号
1.2.3 列表格式优化
知乎编辑器的问题：
由于知乎不支持列表放图片和代码
- 放图片的有序列表会被拆分，原本序号为 2 的列表，却变为 1
- 列表下放代码块会变为纯文本
我的解决思路：
把有序列表直接改为普通文本
有序列表按 1、1）、A、a、i、1 的顺序循环编号，无序列表则按'✦', '○', '✧', '⟐', '⬧', '⬦'的顺序循环编号
1.2.4 支持直接粘贴带图片标题的图片
思源笔记图片格式
<span contenteditable="false" data-type="img" class="img"> <span> </span> <span> <span class="protyle-action protyle-icons"> <span class="protyle-icon protyle-icon--only protyle-custom cst-copy-png" style="border-top-right-radius:0;border-bottom-right-radius:0"> <svg class="svg"> <use xlink:href="#iconCopy"></use> </svg> </span> <span class="protyle-icon protyle-icon--only" style="border-top-left-radius: 0px; border-bottom-left-radius: 0px;"> <svg class="svg"> <use xlink:href="#iconMore"></use> </svg> </span> </span> <img src="assets/PixPin_2025-07-04_15-39-16-20250704153925-nh8u6hy.png" data-src="assets/PixPin_2025-07-04_15-39-16-20250704153925-nh8u6hy.png" alt="PixPin_2025-07-04_15-39-16" title="测试"> <span class="protyle-action__drag"></span> <span class="protyle-action__title"> <span>测试</span> </span> </span> <span> </span> </span>
需要转换为知乎格式
<figure> <img src="知乎上传后的图片链接" alt="caption"> <figcaption>caption</figcaption> </figure>
1.2.5 粘贴代码块直接高亮
思源笔记格式
<pre class="code-block" data-language="html"> <code class="hljs" data-render="true" style="white-space: pre-wrap; word-break: break-word; font-variant-ligatures: none;"> <span class="hljs-tag"><<span class="hljs-name">pre</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"python"</span>></span> print("hello") <span class="hljs-tag"></<span class="hljs-name">pre</span>></span> </code> </pre>
知乎格式
<pre lang="python"> print("hello") </pre>
1.3 微信公众号
- 图床优化
- 支持标题自动编号
- 因为公众号不支持外部链接，特殊处理外部链接，把外部链接暴露出来
- 根据我搭建的博客数据库自动转化笔记块引为微信公众号链接，如果没有链接存在，则转为普通文本，这样写博客的时候，就可以很方便引用过去的文章。
- 分割线替换为图片，让分割线更美观
- 自动帮我加上引导语和公众号卡片，省去重复粘贴
1.4 复制 Markdown
代码片段代码
// Version: 3.0 // Author: Achuan-2 // // - 20250709 v3.0 // - 粘贴到知乎，支持图片标题 // - 改进复制到知乎的代码块高亮，粘贴支持直接高亮 // - 20250630 v2.0 // - 支持选择图床，选择默认/picgo图床，默认是默认图床，即使用思源笔记图床，使用默认图床，对于微信和知乎，不需要处理，对于Github添加 DEFAULT_IMAGE_PREFIX // - 改进获取微信文章链接方法，如果该笔记没有微信文章链接，但是有其他平台链接，则用其他平台链接 // - 将Github/语雀相关的按钮和处理函数重命名为Markdown // - 20250629 v1.0 // - 完善知乎多级列表，对普通多级列表（没有图片和代码块）也处理为普通文本 // - 添加标题编号功能，导出到微信公众号、知乎、Markdown都支持添加标题编号 (() => { // 常量定义 const CONSTANTS = { // 笔记引用转微信链接 DATABASE_AV_ID: "20230804021554-h0l44hz", WEIXIN_KEY_ID: "20250310104930-o0812vp", // 分割线转图片 SEPARATOR_IMAGE_URL: "https://i0.hdslb.com/bfs/article/4aa545dccf7de8d4a93c2b2b8e3265ac0a26d216.png", // 默认图片前缀（当没有picgo图床映射时使用） DEFAULT_IMAGE_PREFIX: "https://assets.b3logfile.com/siyuan/1610205759005/", // 图床类型 IMAGE_HOST_TYPE: { DEFAULT: "default", PICGO: "picgo" }, // 微信公众号卡片 WECHAT_PROFILE: { nickname: "Achuan同学", alias: "achuan-2-0713", headimg: "http://mmbiz.qpic.cn/mmbiz_png/Xh9XDwqibetTAnPRk6Z89m8u4nibAvLwuIm7icHFHtOklSNqoibTaurdMzWJojPoJzcbcJcySOJaEziavibfibOfY7DiaQ/0?wx_fmt=png", signature: "一条没有故事的巛，记录自己的学习感悟和笔记。", id: "MzU3ODg2NTc3MA==", introduction: "这里是Achuan同学，分享自己的学习笔记和生活随笔，欢迎点赞评论转发我的文章" }, // 知乎自定义多级列表符号 LIST_SYMBOLS: { UNORDERED: ['✦', '○', '✧', '⟐', '⬧', '⬦'], ROMAN_NUMERALS: [ { value: 1000, symbol: 'm' }, { value: 900, symbol: 'cm' }, { value: 500, symbol: 'd' }, { value: 400, symbol: 'cd' }, { value: 100, symbol: 'c' }, { value: 90, symbol: 'xc' }, { value: 50, symbol: 'l' }, { value: 40, symbol: 'xl' }, { value: 10, symbol: 'x' }, { value: 9, symbol: 'ix' }, { value: 5, symbol: 'v' }, { value: 4, symbol: 'iv' }, { value: 1, symbol: 'i' } ] }, // 标题编号配置 HEADING_NUMBER: { ENABLED: true, START_LEVEL: 1, // 从H1开始编号 END_LEVEL: 6, // 到H6结束编号 SEPARATOR: '.' // 编号分隔符 } }; // 工具函数类 class Utils { /** * 转义正则表达式特殊字符 */ static escapeRegExp(string) { return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); } /** * 执行POST请求 */ static async 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 (error) { console.error(`请求失败 ${url}:`, error); return returnType === 'json' ? { code: error.code || 1, msg: error.message || "", data: null } : ""; } } /** * 复制到剪贴板 */ static async copyToClipboard(text) { try { if (navigator.clipboard && window.isSecureContext) { await navigator.clipboard.writeText(text); } else { const textArea = document.createElement('textarea'); textArea.value = text; Object.assign(textArea.style, { position: 'fixed', left: '-999999px', top: '-999999px' }); document.body.appendChild(textArea); textArea.focus(); textArea.select(); document.execCommand('copy'); textArea.remove(); } } catch (error) { console.error('复制到剪贴板失败:', error); throw new Error('复制到剪贴板失败'); } } /** * 显示通知消息 */ static async showNotification(message, timeout = 5000) { return Utils.fetchSyncPost('/api/notification/pushMsg', { msg: message, timeout }); } /** * 获取当前文档ID */ static getCurrentDocumentId() { const activeDocElement = document.querySelector('.protyle:not(.fn__none) .protyle-content .protyle-background[data-node-id]'); return activeDocElement?.getAttribute('data-node-id') || null; } /** * 获取文档属性 */ static async getDocumentAttribute(docId, attributeName) { const data = { id: docId }; const res = await Utils.fetchSyncPost('/api/attr/getBlockAttrs', data); return res?.data?.[attributeName] || null; } } // 数字转换工具类 class NumberConverter { /** * 数字转字母（A-Z 或 a-z） */ static numberToLetter(number, uppercase = true) { let result = ''; let num = number - 1; do { result = String.fromCharCode((uppercase ? 65 : 97) + (num % 26)) + result; num = Math.floor(num / 26) - 1; } while (num >= 0); return result; } /** * 数字转罗马数字 */ static numberToRoman(number) { let result = ''; for (const numeral of CONSTANTS.LIST_SYMBOLS.ROMAN_NUMERALS) { while (number >= numeral.value) { result += numeral.symbol; number -= numeral.value; } } return result; } } // 图片处理类 class ImageProcessor { /** * 替换DOM中的图片URL */ static async replaceImageUrlsInDOM(fileMap) { try { const typographyAreas = document.querySelectorAll('.b3-typography'); typographyAreas.forEach(area => { const images = area.querySelectorAll('img'); images.forEach(img => { const currentSrc = img.getAttribute('src'); if (!currentSrc) return; const fileInfo = Object.values(fileMap).find(info => info.originUrl && info.url && currentSrc === info.originUrl ); if (fileInfo) { img.setAttribute('src', fileInfo.url); console.log('替换图片URL:', fileInfo.originUrl, '->', fileInfo.url); } }); }); } catch (error) { console.error('替换DOM中图片URL时出错:', error); } } /** * 替换markdown中的图片URL */ static async replaceImageUrls(content, picgoFileMapKey) { try { const fileMap = JSON.parse(picgoFileMapKey); let processedContent = content; Object.values(fileMap).forEach(fileInfo => { if (fileInfo.originUrl && fileInfo.url) { const originUrl = fileInfo.originUrl; const newUrl = fileInfo.url; processedContent = processedContent.replace( new RegExp(Utils.escapeRegExp(originUrl), 'g'), newUrl ); const imageRegex = new RegExp( `!\ $$([^\$$ ]*)\\]\$${Utils.escapeRegExp(originUrl)}\$`, 'g' ); processedContent = processedContent.replace(imageRegex, ``); } }); return processedContent; } catch (error) { console.error('替换图片URL时出错:', error); return content; } } /** * 为markdown中的相对路径图片添加默认前缀 */ static addDefaultPrefixToImages(content) { try { // 匹配markdown图片语法中的相对路径（不以http开头的路径） const imageRegex = /! $$([^$$ ]*)\]$(?!https?:\/\/)([^)]+)$/g; return content.replace(imageRegex, (match, altText, imagePath) => { // 如果路径以/开头，去掉开头的/ const cleanPath = imagePath.startsWith('/') ? imagePath.slice(1) : imagePath; const fullUrl = CONSTANTS.DEFAULT_IMAGE_PREFIX + cleanPath; return ``; }); } catch (error) { console.error('添加默认图片前缀时出错:', error); return content; } } } // 链接处理类 class LinkProcessor { /** * 从数据库获取微信链接，如果没有则获取其他平台链接 */ static async getWeixinLinkFromDatabase(blockId) { try { const res = await Utils.fetchSyncPost("/api/av/getAttributeViewKeys", { id: blockId }); if (!res?.data) return null; const foundItem = res.data.find(item => item.avID === CONSTANTS.DATABASE_AV_ID); if (!foundItem?.keyValues) return null; const specificKey = foundItem.keyValues.find(kv => kv.key.id === CONSTANTS.WEIXIN_KEY_ID); if (!specificKey?.values?.length) return null; if (Array.isArray(specificKey.values[0].mAsset)) { // 首先尝试查找微信链接 const weixinLink = specificKey.values[0].mAsset.find(asset => asset.content?.startsWith('https://mp.weixin.qq.com') ); if (weixinLink) { console.log('Found WeChat link for block', blockId, ':', weixinLink.content); return weixinLink.content; } // 如果没有微信链接，尝试查找其他平台链接 const otherPlatformLinks = LinkProcessor.findOtherPlatformLinks(specificKey.values[0].mAsset); if (otherPlatformLinks.length > 0) { console.log('Found alternative platform link for block', blockId, ':', otherPlatformLinks[0].content); return otherPlatformLinks[0].content; } } return null; } catch (error) { console.error('Error fetching WeChat link for block:', blockId, error); return null; } } /** * 查找其他平台链接 */ static findOtherPlatformLinks(assets) { // 定义平台优先级（按重要性排序） const platformPriorities = [ { domain: 'zhihu.com', name: '知乎' }, { domain: 'ld246.com', name: '链滴' }, { domain: 'juejin.cn', name: '掘金' }, { domain: 'csdn.net', name: 'CSDN' }, { domain: 'cnblogs.com', name: '博客园' }, { domain: 'segmentfault.com', name: 'SegmentFault' }, { domain: 'jianshu.com', name: '简书' }, { domain: 'medium.com', name: 'Medium' }, { domain: 'dev.to', name: 'Dev.to' }, { domain: 'github.com', name: 'GitHub' }, { domain: 'gitlab.com', name: 'GitLab' }, { domain: 'gitee.com', name: 'Gitee' } ]; const foundLinks = []; // 查找所有有效的链接 assets.forEach(asset => { if (asset.content && asset.content.startsWith('http')) { // 检查是否匹配已知平台 const matchedPlatform = platformPriorities.find(platform => asset.content.includes(platform.domain) ); if (matchedPlatform) { foundLinks.push({ content: asset.content, platform: matchedPlatform.name, priority: platformPriorities.indexOf(matchedPlatform) }); } else { // 对于未知平台，给较低优先级 foundLinks.push({ content: asset.content, platform: '其他平台', priority: 999 }); } } }); // 按优先级排序 foundLinks.sort((a, b) => a.priority - b.priority); return foundLinks; } /** * 转换markdown中的块链接到微信链接 */ static async convertBlockLinksToWeChat(content) { const blockLinkRegex = / $$([^$$ ]+)\]$siyuan:\/\/blocks\/([^)]+)$/g; let processedContent = content; const matches = [...content.matchAll(blockLinkRegex)]; for (const match of matches) { const [fullMatch, linkText, blockId] = match; try { const weixinLink = await LinkProcessor.getWeixinLinkFromDatabase(blockId); const replacement = weixinLink ? `[${linkText}](${weixinLink})` : linkText; processedContent = processedContent.replace(fullMatch, replacement); } catch (error) { console.error('转换块链接时出错:', blockId, error); processedContent = processedContent.replace(fullMatch, linkText); } } return processedContent; } /** * 转换所有链接到微信格式 */ static async convertLinksToWechat() { const links = document.querySelectorAll('.b3-typography a'); for (const link of links) { const href = link.getAttribute('href'); const text = link.textContent; if (href?.startsWith('siyuan://blocks/')) { await LinkProcessor.processBlockLink(link, href, text); } else if (href?.startsWith('#')) { LinkProcessor.replaceWithSpan(link, text, '#338dd6'); } else if (!href?.startsWith('https://mp.weixin.qq.com/')) { const newTextContent = text === href ? href : `[${text}](${href})`; LinkProcessor.replaceWithSpan(link, newTextContent, '#338dd6'); } } } /** * 转换块引用到微信格式 */ static async convertBlockReferencesToWechat() { const links = document.querySelectorAll('.b3-typography a'); for (const link of links) { const href = link.getAttribute('href'); const text = link.textContent; if (href?.startsWith('siyuan://blocks/')) { await LinkProcessor.processBlockLink(link, href, text); } } } /** * 处理块链接 */ static async processBlockLink(link, href, text) { const blockId = href.replace('siyuan://blocks/', ''); try { const weixinLink = await LinkProcessor.getWeixinLinkFromDatabase(blockId); if (weixinLink) { link.setAttribute('href', weixinLink); } else { LinkProcessor.replaceWithSpan(link, text, '#338dd6'); } } catch (error) { console.error('Error fetching WeChat link for block:', blockId, error); LinkProcessor.replaceWithSpan(link, text, '#338dd6'); } } /** * 用span替换链接 */ static replaceWithSpan(link, text, color) { const newSpan = document.createElement('span'); newSpan.textContent = text; newSpan.style.color = color; link.parentNode.replaceChild(newSpan, link); } } // 列表处理类 class ListProcessor { /** * 预处理有序列表以适配知乎 */ static processOrderedListsForZhihu() { const typographyAreas = document.querySelectorAll('.b3-typography'); typographyAreas.forEach(area => { ListProcessor.processNestedLists(area); }); } /** * 处理嵌套列表 */ static processNestedLists(area) { const orderedLists = Array.from(area.querySelectorAll('ol')); const unorderedLists = Array.from(area.querySelectorAll('ul')); // 按嵌套深度排序（深度越深越先处理） const allLists = [...orderedLists, ...unorderedLists] .sort((a, b) => ListProcessor.getListDepth(b) - ListProcessor.getListDepth(a)); allLists.forEach(list => { const listDepth = ListProcessor.getListDepth(list); // 处理所有列表，不再限制只有包含图片和代码块的列表 if (list.tagName === 'OL') { ListProcessor.processOrderedList(list, listDepth); } else { ListProcessor.processUnorderedList(list, listDepth); } }); } /** * 获取列表的嵌套深度 */ static getListDepth(list) { let depth = 0; let parent = list.parentElement; while (parent) { if (['LI', 'OL', 'UL'].includes(parent.tagName)) { if (['OL', 'UL'].includes(parent.tagName)) { depth++; } } parent = parent.parentElement; } return depth; } /** * 处理单个有序列表 */ static processOrderedList(ol, depth = 0) { const listItems = Array.from(ol.children).filter(child => child.tagName === 'LI'); const parentElement = ol.parentNode; const startNumber = parseInt(ol.getAttribute('start')) || 1; const fragment = document.createDocumentFragment(); listItems.forEach((li, index) => { const currentNumber = startNumber + index; const bulletPrefix = ListProcessor.getOrderedListPrefix(currentNumber, depth); ListProcessor.processListItem(li, bulletPrefix, fragment, index < listItems.length - 1, depth); }); parentElement.insertBefore(fragment, ol); parentElement.removeChild(ol); } /** * 处理单个无序列表 */ static processUnorderedList(ul, depth = 0) { const listItems = Array.from(ul.children).filter(child => child.tagName === 'LI'); const parentElement = ul.parentNode; const fragment = document.createDocumentFragment(); listItems.forEach((li, index) => { const bulletPrefix = ListProcessor.getUnorderedListPrefix(depth); ListProcessor.processListItem(li, bulletPrefix, fragment, index < listItems.length - 1, depth); }); parentElement.insertBefore(fragment, ul); parentElement.removeChild(ul); } /** * 获取有序列表的前缀 */ static getOrderedListPrefix(number, depth) { const level = depth % 6; switch (level) { case 0: return `${number}. `; case 1: return `${number}) `; case 2: return `${NumberConverter.numberToLetter(number, true)}. `; case 3: return `${NumberConverter.numberToLetter(number, false)}. `; case 4: return `${NumberConverter.numberToRoman(number)}. `; case 5: return `${number}. `; default: return `${number}. `; } } /** * 获取无序列表的前缀 */ static getUnorderedListPrefix(depth) { const level = depth % CONSTANTS.LIST_SYMBOLS.UNORDERED.length; return `${CONSTANTS.LIST_SYMBOLS.UNORDERED[level]} `; } /** * 处理单个列表项 */ static processListItem(li, bulletPrefix, fragment, addSpacer, depth = 0) { // 计算缩进（每个层级2个空格） // 使用HTML non-breaking spaces (nbsp) 作为缩进 // 这些会在HTML中占位，但视觉上几乎不可见 const indentSpaces = '\u200d' + ' '.repeat(depth * 2); // 处理列表项中的直接子元素 const children = Array.from(li.children); let firstTextProcessed = false; children.forEach((child, childIndex) => { const clonedChild = child.cloneNode(true); if (child.tagName === 'P') { // 处理段落 - 只为段落添加缩进 if (!firstTextProcessed) { // 第一个段落添加项目符号和缩进 clonedChild.innerHTML = `${indentSpaces}<strong>${bulletPrefix}</strong>${clonedChild.innerHTML}`; firstTextProcessed = true; } else { // 后续段落只添加缩进 clonedChild.innerHTML = `${indentSpaces}${clonedChild.innerHTML}`; } fragment.appendChild(clonedChild); } else if (child.tagName === 'OL' || child.tagName === 'UL') { // 嵌套列表已经在之前处理过了，这里跳过 return; } else { // 其他元素直接添加，不做缩进处理 if (!firstTextProcessed && child.textContent.trim()) { // 如果没有段落但有文本内容，创建一个段落 const contentP = document.createElement('p'); contentP.innerHTML = `${indentSpaces}<strong>${bulletPrefix}</strong>${clonedChild.innerHTML}`; fragment.appendChild(contentP); firstTextProcessed = true; } else { fragment.appendChild(clonedChild); } } }); // 如果没有处理任何文本内容，但列表项有内容，创建一个基本段落 if (!firstTextProcessed && li.textContent.trim()) { const contentP = document.createElement('p'); contentP.innerHTML = `${indentSpaces}<strong>${bulletPrefix}</strong>${li.innerHTML.replace(/<(ol|ul)[^>]*>[\s\S]*?<\/(ol|ul)>/gi, '')}`; fragment.appendChild(contentP); } } } // 内容处理类 class ContentProcessor { /** * 处理引述块 */ static processBlockquote() { document.querySelectorAll("blockquote").forEach((item) => { const section = document.createElement("section"); // 复制属性 Array.from(item.attributes).forEach(attr => { section.setAttribute(attr.name, attr.value); }); // 复制样式 const computedStyle = window.getComputedStyle(item); const styleProps = [ 'margin', 'padding', 'border', 'border-left', 'background', 'background-color', 'color', 'font-size', 'font-weight', 'border-radius', 'line-height' ]; styleProps.forEach(prop => { const value = computedStyle.getPropertyValue(prop); if (value) { section.style.setProperty(prop, value); } }); section.innerHTML = item.innerHTML; item.parentNode.replaceChild(section, item); }); } /** * 添加微信公众号名片 */ static addWeChatCard() { const typographyAreas = document.querySelectorAll('.b3-typography'); typographyAreas.forEach(area => { if (area.querySelector('.mp_profile_iframe_wrp')) return; const elements = ContentProcessor.createWeChatCardElements(); elements.forEach(element => area.appendChild(element)); }); } /** * 创建微信名片元素 */ static createWeChatCardElements() { const separatorP = document.createElement('p'); separatorP.style.textAlign = 'center'; separatorP.innerHTML = `<img src="${CONSTANTS.SEPARATOR_IMAGE_URL}" style="margin: 0px 1px;">`; const introSection = document.createElement('section'); introSection.innerHTML = `<span leaf="">${CONSTANTS.WECHAT_PROFILE.introduction}</span>`; const cardSection = document.createElement('section'); const profile = CONSTANTS.WECHAT_PROFILE; cardSection.innerHTML = ` <section class="mp_profile_iframe_wrp custom_select_card_wrp" nodeleaf=""> <mp-common-profile class="mpprofile js_uneditable custom_select_card mp_profile_iframe" data-pluginname="mpprofile" data-nickname="${profile.nickname}" data-alias="${profile.alias}" data-headimg="${profile.headimg}" data-signature="${profile.signature}" data-id="${profile.id}" data-service_type="1" data-verify_status="1"> </mp-common-profile> <br class="ProseMirror-trailingBreak"> </section>`; return [separatorP, introSection, cardSection]; } /** * 替换hr标签为图片 */ static replaceHrWithImage() { const typographyAreas = document.querySelectorAll('.b3-typography'); typographyAreas.forEach(area => { const hrElements = area.querySelectorAll('hr'); hrElements.forEach(hr => { const pElement = document.createElement('p'); pElement.style.textAlign = 'center'; const imgElement = document.createElement('img'); imgElement.src = CONSTANTS.SEPARATOR_IMAGE_URL; imgElement.style.margin = '0 1px'; pElement.appendChild(imgElement); hr.parentNode.replaceChild(pElement, hr); }); }); } /** * 处理数学公式末尾空格问题 */ static processMathFormulas() { const typographyDivs = document.querySelectorAll('div.b3-typography'); typographyDivs.forEach(typographyDiv => { const lastChild = typographyDiv.lastElementChild; if (lastChild?.matches('div[data-subtype="math"]')) { const newParagraph = document.createElement('p'); newParagraph.innerHTML = ''; typographyDiv.appendChild(newParagraph); } }); } /** * 将span[data-type="code"]转换为code元素（适用于知乎） */ static convertSpanCodeToCodeElement() { const typographyAreas = document.querySelectorAll('.b3-typography'); typographyAreas.forEach(area => { const codeSpans = area.querySelectorAll('span[data-type="code"]'); codeSpans.forEach(span => { const codeElement = document.createElement('code'); // 复制文本内容 codeElement.textContent = span.textContent; // 复制样式（如果需要） const computedStyle = window.getComputedStyle(span); const styleProps = [ 'background-color', 'color', 'font-family', 'font-size', 'padding', 'border-radius' ]; styleProps.forEach(prop => { const value = computedStyle.getPropertyValue(prop); if (value && value !== 'none' && value !== 'auto') { codeElement.style.setProperty(prop, value); } }); // 替换原始span元素 span.parentNode.replaceChild(codeElement, span); }); }); } /** * 将思源笔记图片格式转换为知乎格式（带标题支持） */ static convertSiyuanImagesToZhihuFormat() { const typographyAreas = document.querySelectorAll('.b3-typography'); typographyAreas.forEach(area => { const imageSpans = area.querySelectorAll('span[data-type="img"]'); imageSpans.forEach(span => { const imgElement = span.querySelector('img'); if (!imgElement) return; // 获取图片信息 const src = imgElement.getAttribute('src') || imgElement.getAttribute('data-src'); const alt = imgElement.getAttribute('alt') || ''; const title = imgElement.getAttribute('title') || ''; // 获取标题文本（从 protyle-action__title 中获取） const titleSpan = span.querySelector('.protyle-action__title span'); const captionText = titleSpan ? titleSpan.textContent.trim() : (title || alt); // 创建知乎格式的figure元素 const figure = document.createElement('figure'); // 创建img元素 const newImg = document.createElement('img'); newImg.setAttribute('src', src); figure.appendChild(newImg); // 如果有标题，添加figcaption if (captionText) { const figcaption = document.createElement('figcaption'); figcaption.textContent = captionText; figure.appendChild(figcaption); } // 检查父级p标签是否只包含图片和零宽空格 const parentP = span.closest('p'); if (parentP) { // 获取p标签的文本内容并清理零宽空格 const pTextContent = parentP.textContent || ''; const cleanedText = pTextContent.replace(/[\u200B\u200C\u200D\uFEFF]/g, '').trim(); // 如果p标签只包含图片（清理后无其他文本内容） if (cleanedText === '' || cleanedText === alt || cleanedText === title) { // 直接替换整个p标签 parentP.parentNode.replaceChild(figure, parentP); } else { // 如果p标签还有其他内容，只替换span元素 span.parentNode.replaceChild(figure, span); } } else { // 替换原始的span元素 span.parentNode.replaceChild(figure, span); } }); // 清理包含图片的p标签中的零宽空格 const paragraphs = area.querySelectorAll('p'); paragraphs.forEach(p => { if (p.querySelector('img') || p.querySelector('figure')) { // 清理文本节点中的零宽空格 const walker = document.createTreeWalker( p, NodeFilter.SHOW_TEXT, null, false ); const textNodes = []; let node; while (node = walker.nextNode()) { textNodes.push(node); } textNodes.forEach(textNode => { const cleanedText = textNode.textContent.replace(/[\u200B\u200C\u200D\uFEFF]/g, ''); if (cleanedText !== textNode.textContent) { textNode.textContent = cleanedText; } }); // 如果p标签清理后只剩空白内容和图片/figure，移除p标签保留内容 const remainingText = p.textContent.replace(/[\u200B\u200C\u200D\uFEFF\s]/g, ''); if (remainingText === '' && (p.querySelector('img') || p.querySelector('figure'))) { const children = Array.from(p.children); const parent = p.parentNode; children.forEach(child => { parent.insertBefore(child, p); }); parent.removeChild(p); } } }); }); } /** * 将思源笔记代码块转换为知乎格式（带语言高亮） */ static convertCodeBlocksForZhihu() { const typographyAreas = document.querySelectorAll('.b3-typography'); typographyAreas.forEach(area => { const codeBlocks = area.querySelectorAll('pre.code-block[data-language]'); codeBlocks.forEach(preElement => { const language = preElement.getAttribute('data-language') || ''; const codeElement = preElement.querySelector('code'); if (!codeElement) return; // 提取纯文本内容（去除HTML标签） const codeText = ContentProcessor.extractPlainTextFromCode(codeElement); // 创建新的知乎格式代码块 const newPre = document.createElement('pre'); if (language) { newPre.setAttribute('lang', language); } newPre.textContent = codeText; // 替换原始代码块 preElement.parentNode.replaceChild(newPre, preElement); }); }); } /** * 从代码元素中提取纯文本内容 */ static extractPlainTextFromCode(codeElement) { // 创建一个临时div来处理HTML内容 const tempDiv = document.createElement('div'); tempDiv.innerHTML = codeElement.innerHTML; // 递归提取文本内容，保持换行符 const extractText = (node) => { if (node.nodeType === Node.TEXT_NODE) { return node.textContent; } else if (node.nodeType === Node.ELEMENT_NODE) { if (node.tagName === 'BR') { return '\n'; } let text = ''; for (const child of node.childNodes) { text += extractText(child); } return text; } return ''; }; return extractText(tempDiv).trim(); } } // 标题编号处理类 class HeadingNumberProcessor { /** * 为HTML中的标题添加编号 */ static addNumbersToHTMLHeadings() { const typographyAreas = document.querySelectorAll('.b3-typography'); typographyAreas.forEach(area => { HeadingNumberProcessor.processHeadingsInArea(area); }); } /** * 处理指定区域内的标题 */ static processHeadingsInArea(area) { const headings = area.querySelectorAll('h1, h2, h3, h4, h5, h6'); const numbers = Array(6).fill(0); // 用于存储各级标题的编号 headings.forEach(heading => { const level = parseInt(heading.tagName.substring(1)); // 获取标题级别 if (level >= CONSTANTS.HEADING_NUMBER.START_LEVEL && level <= CONSTANTS.HEADING_NUMBER.END_LEVEL) { // 更新当前级别的编号 numbers[level - 1]++; // 重置更深层级的编号 for (let i = level; i < 6; i++) { numbers[i] = 0; } // 生成编号字符串 const numberStr = HeadingNumberProcessor.generateNumberString(numbers, level); // 检查是否已经有编号 if (!HeadingNumberProcessor.hasExistingNumber(heading)) { HeadingNumberProcessor.addNumberToHeading(heading, numberStr); } } }); } /** * 生成编号字符串 */ static generateNumberString(numbers, level) { const relevantNumbers = numbers.slice(0, level).filter(num => num > 0); return relevantNumbers.join(CONSTANTS.HEADING_NUMBER.SEPARATOR) + ' '; } /** * 检查标题是否已有编号 */ static hasExistingNumber(heading) { const text = heading.textContent.trim(); return /^\d+(\.\d+)*\s/.test(text); } /** * 为标题添加编号 */ static addNumberToHeading(heading, numberStr) { const existingContent = heading.innerHTML; heading.innerHTML = `<strong>${numberStr}</strong>${existingContent}`; } /** * 为markdown内容中的标题添加编号 */ static addNumbersToMarkdownHeadings(content) { const lines = content.split('\n'); const numbers = Array(6).fill(0); let inCodeBlock = false; let codeBlockFence = ''; const processedLines = lines.map(line => { // 检测代码块边界 const codeBlockMatch = line.match(/^(\s*)(```|~~~)(.*)$/); if (codeBlockMatch) { const [, indent, fence, language] = codeBlockMatch; if (!inCodeBlock) { // 开始代码块 inCodeBlock = true; codeBlockFence = fence; } else if (fence === codeBlockFence && indent.length === 0) { // 结束代码块（需要相同的围栏符号且在行首） inCodeBlock = false; codeBlockFence = ''; } return line; } // 如果在代码块内，直接返回原行 if (inCodeBlock) { return line; } // 检测行内代码块（单行） const inlineCodeCount = (line.match(/`/g) || []).length; const hasInlineCode = inlineCodeCount >= 2 && inlineCodeCount % 2 === 0; // 处理标题（只在非代码块内） const headingMatch = line.match(/^(#{1,6})\s+(.+)$/); if (headingMatch && !hasInlineCode) { const level = headingMatch[1].length; const headingText = headingMatch[2]; if (level >= CONSTANTS.HEADING_NUMBER.START_LEVEL && level <= CONSTANTS.HEADING_NUMBER.END_LEVEL) { // 更新当前级别的编号 numbers[level - 1]++; // 重置更深层级的编号 for (let i = level; i < 6; i++) { numbers[i] = 0; } // 检查是否已有编号 if (!/^\d+(\.\d+)*\s/.test(headingText)) { const numberStr = HeadingNumberProcessor.generateNumberString(numbers, level); return `${'#'.repeat(level)} ${numberStr}${headingText}`; } } } return line; }); return processedLines.join('\n'); } } // 按钮处理类 class ButtonHandler { /** * 微信公众号按钮点击处理 */ static async handleWechatButtonClick(event) { const button = event.currentTarget; const wrapper = button.closest('.mp-wechat-enhanced-controls'); const select = wrapper?.querySelector('.link-conversion-select'); const headingNumberSelect = wrapper?.querySelector('.heading-number-select'); const imageHostSelect = wrapper?.querySelector('.image-host-select'); const linkConversionOption = select ? select.value : 'convert'; const addHeadingNumbers = headingNumberSelect ? headingNumberSelect.value === 'yes' : false; const imageHostType = imageHostSelect ? imageHostSelect.value : CONSTANTS.IMAGE_HOST_TYPE.DEFAULT; await Utils.showNotification("发布到微信公众号：样式转换ing"); try { // 根据图床类型处理图片URL if (imageHostType === CONSTANTS.IMAGE_HOST_TYPE.PICGO) { const docId = Utils.getCurrentDocumentId(); if (docId) { const picgoFileMapKey = await Utils.getDocumentAttribute(docId, 'custom-picgo-file-map-key'); if (picgoFileMapKey) { const picgoFileMap = JSON.parse(picgoFileMapKey); await ImageProcessor.replaceImageUrlsInDOM(picgoFileMap); } } } // 使用默认图床时，微信不需要特殊处理 // 添加标题编号 if (addHeadingNumbers) { HeadingNumberProcessor.addNumbersToHTMLHeadings(); } // 处理链接转换 if (linkConversionOption === 'convert') { await LinkProcessor.convertLinksToWechat(); } else if (linkConversionOption === 'no-convert') { await LinkProcessor.convertBlockReferencesToWechat(); } // 处理内容 ContentProcessor.replaceHrWithImage(); ContentProcessor.addWeChatCard(); ContentProcessor.processBlockquote(); // 点击桌面按钮 const desktopButton = document.querySelector('.layout__wnd--active .protyle:not(.fn__none) .protyle-preview .protyle-preview__action > button[data-type="desktop"]'); desktopButton?.click(); await Utils.showNotification("发布到微信公众号：样式转换完成"); // 点击微信复制按钮 const wechatCopyButton = document.querySelector('.layout__wnd--active .protyle:not(.fn__none) .protyle-preview .protyle-preview__action > button[data-type="mp-wechat"]'); wechatCopyButton?.click(); } catch (error) { console.error('微信处理过程中出错:', error); await Utils.showNotification(`处理失败: ${error.message}`); } } /** * 新知乎按钮点击处理 */ static async handleNewZhihuButtonClick(event) { await Utils.showNotification("发布到知乎：样式转换ing"); try { // 获取图床选择 const imageHostSelect = document.querySelector('.image-host-select'); const imageHostType = imageHostSelect ? imageHostSelect.value : CONSTANTS.IMAGE_HOST_TYPE.DEFAULT; // 根据图床类型处理图片URL if (imageHostType === CONSTANTS.IMAGE_HOST_TYPE.PICGO) { const docId = Utils.getCurrentDocumentId(); if (docId) { const picgoFileMapKey = await Utils.getDocumentAttribute(docId, 'custom-picgo-file-map-key'); if (picgoFileMapKey) { const picgoFileMap = JSON.parse(picgoFileMapKey); await ImageProcessor.replaceImageUrlsInDOM(picgoFileMap); } } } // 使用默认图床时，知乎不需要特殊处理 // 添加标题编号 const headingNumberSelect = document.querySelector('.heading-number-select'); const addHeadingNumbers = headingNumberSelect ? headingNumberSelect.value === 'yes' : false; if (addHeadingNumbers) { HeadingNumberProcessor.addNumbersToHTMLHeadings(); } // 转换思源笔记图片格式为知乎格式 ContentProcessor.convertSiyuanImagesToZhihuFormat(); // 转换代码块为知乎格式 ContentProcessor.convertCodeBlocksForZhihu(); // 预处理有序列表 ListProcessor.processOrderedListsForZhihu(); // 转换行内代码元素 ContentProcessor.convertSpanCodeToCodeElement(); await LinkProcessor.convertBlockReferencesToWechat(); await Utils.showNotification("发布到知乎：样式转换完成"); // 点击原始知乎按钮 const originalZhihuButton = document.querySelector('.layout__wnd--active .protyle:not(.fn__none) .protyle-preview .protyle-preview__action > button[data-type="zhihu"]'); originalZhihuButton?.click(); } catch (error) { console.error('知乎处理过程中出错:', error); await Utils.showNotification(`处理失败: ${error.message}`); } } /** * Markdown按钮点击处理 */ static async handleMarkdownButtonClick(event) { await Utils.showNotification("正在处理文档导出到Markdown...", 3000); try { const docId = Utils.getCurrentDocumentId(); if (!docId) { throw new Error('无法获取当前文档ID'); } // 获取图床选择 const imageHostSelect = document.querySelector('.image-host-select'); const imageHostType = imageHostSelect ? imageHostSelect.value : CONSTANTS.IMAGE_HOST_TYPE.DEFAULT; // 导出markdown内容 const markdownContent = await ButtonHandler.exportMarkdownContent(docId); let processedContent = markdownContent; // 获取标题编号选项 const headingNumberSelect = document.querySelector('.heading-number-select'); const addHeadingNumbers = headingNumberSelect ? headingNumberSelect.value === 'yes' : false; // 添加标题编号 if (addHeadingNumbers) { processedContent = HeadingNumberProcessor.addNumbersToMarkdownHeadings(processedContent); } // 根据图床类型处理图片URL if (imageHostType === CONSTANTS.IMAGE_HOST_TYPE.PICGO) { // 如果选择PicGo图床，使用图床映射替换 const picgoFileMapKey = await Utils.getDocumentAttribute(docId, 'custom-picgo-file-map-key'); if (picgoFileMapKey) { processedContent = await ImageProcessor.replaceImageUrls(processedContent, picgoFileMapKey); } else { // 没有图床映射时为相对路径图片添加默认前缀 processedContent = ImageProcessor.addDefaultPrefixToImages(processedContent); } } else { // 如果选择默认图床，为相对路径图片添加默认前缀 processedContent = ImageProcessor.addDefaultPrefixToImages(processedContent); } // 处理块链接 processedContent = await LinkProcessor.convertBlockLinksToWeChat(processedContent); // 复制到剪贴板 await Utils.copyToClipboard(processedContent); await Utils.showNotification("文档已处理完成并复制到剪贴板！", 3000); } catch (error) { console.error('处理文档时出错:', error); await Utils.showNotification(`处理失败: ${error.message}`, 5000); } } /** * 导出markdown内容 */ static async exportMarkdownContent(docId) { const data = { id: docId, yfm: false }; const res = await Utils.fetchSyncPost('/api/export/exportMdContent', data); if (!res?.data?.content) { throw new Error('导出markdown内容失败'); } return res.data.content; } } // UI管理类 class UIManager { /** * 添加自定义按钮 */ static addCustomButton() { const actionContainers = document.querySelectorAll('.protyle-preview .protyle-preview__action'); actionContainers.forEach(container => { // 检查是否已添加按钮以避免重复 if (container.querySelector('.mp-wechat-enhanced-controls') || container.querySelector('.markdown-enhanced-button')) { return; } UIManager.addWeChatEnhancedControls(container); UIManager.addNewZhihuButton(container); UIManager.addMarkdownButton(container); }); ContentProcessor.processMathFormulas(); } /** * 添加微信公众号增强控件 */ static addWeChatEnhancedControls(container) { const controlsWrapper = document.createElement('div'); controlsWrapper.className = 'mp-wechat-enhanced-controls'; Object.assign(controlsWrapper.style, { display: 'inline-flex', alignItems: 'center', marginLeft: '8px', gap: '4px' }); // 创建微信按钮 const wechatButton = UIManager.createButton({ type: 'mp-wechat-enchaced', label: '粘贴到公众号样式适配', icon: '#iconMp', handler: ButtonHandler.handleWechatButtonClick }); // 创建链接转换选择下拉框 const linkSelect = UIManager.createLinkConversionSelect(); // 创建标题编号选择下拉框 const headingSelect = UIManager.createHeadingNumberSelect(); // 创建图床选择下拉框 const imageHostSelect = UIManager.createImageHostSelect(); controlsWrapper.appendChild(wechatButton); controlsWrapper.appendChild(linkSelect); controlsWrapper.appendChild(headingSelect); controlsWrapper.appendChild(imageHostSelect); // 插入到容器中 const originalWechatButton = container.querySelector('button[data-type="mp-wechat"]'); if (originalWechatButton) { container.insertBefore(controlsWrapper, originalWechatButton); } else { container.appendChild(controlsWrapper); } } /** * 添加新知乎按钮 */ static addNewZhihuButton(container) { const zhihuButton = container.querySelector('button[data-type="zhihu"]'); if (!zhihuButton || container.querySelector('button[data-type="new_zhihu"]')) { return; } const newZhihuButton = UIManager.createButton({ type: 'new_zhihu', label: '知乎样式转换（仅处理思源块链接）', icon: '#iconZhihu', handler: ButtonHandler.handleNewZhihuButtonClick }); zhihuButton.parentNode.insertBefore(newZhihuButton, zhihuButton.nextSibling); } /** * 添加Markdown按钮 */ static addMarkdownButton(container) { const markdownButton = UIManager.createButton({ type: 'markdown-enhanced', className: 'markdown-enhanced-button', label: '复制Markdown（图床链接转换）', icon: '#iconMarkdown', handler: ButtonHandler.handleMarkdownButtonClick }); container.appendChild(markdownButton); } /** * 创建按钮 */ static createButton({ type, className = '', label, icon, handler }) { const button = document.createElement('button'); button.type = 'button'; button.dataset.type = type; button.dataset.custom = 'true'; button.className = `b3-tooltips b3-tooltips__w ${className}`; button.setAttribute('aria-label', label); button.innerHTML = `<svg><use xlink:href="${icon}"></use></svg>`; Object.assign(button.style, { color: "var(--b3-theme-primary)", backgroundColor: "#e6f7ff", border: "1px solid #91d5ff", borderRadius: "4px", padding: "4px 8px", marginLeft: "8px" }); button.addEventListener('click', handler); return button; } /** * 创建链接转换选择下拉框 */ static createLinkConversionSelect() { const select = document.createElement('select'); select.className = 'link-conversion-select b3-select'; Object.assign(select.style, { height: '24px', fontSize: '12px', minWidth: '120px' }); const options = [ { value: 'convert', text: '微信公众号外链暴露', selected: true }, { value: 'no-convert', text: '仅处理思源块链接' } ]; options.forEach(({ value, text, selected }) => { const option = document.createElement('option'); option.value = value; option.textContent = text; option.selected = selected || false; select.appendChild(option); }); return select; } /** * 创建标题编号选择下拉框 */ static createHeadingNumberSelect() { const select = document.createElement('select'); select.className = 'heading-number-select b3-select'; Object.assign(select.style, { height: '24px', fontSize: '12px', minWidth: '100px' }); const options = [ { value: 'no', text: '不添加编号', selected: false }, { value: 'yes', text: '添加标题编号', selected: true } ]; options.forEach(({ value, text, selected }) => { const option = document.createElement('option'); option.value = value; option.textContent = text; option.selected = selected || false; select.appendChild(option); }); return select; } /** * 创建图床选择下拉框 */ static createImageHostSelect() { const select = document.createElement('select'); select.className = 'image-host-select b3-select'; Object.assign(select.style, { height: '24px', fontSize: '12px', minWidth: '100px' }); const options = [ { value: CONSTANTS.IMAGE_HOST_TYPE.DEFAULT, text: '默认图床', selected: true }, { value: CONSTANTS.IMAGE_HOST_TYPE.PICGO, text: 'PicGo图床', selected: false } ]; options.forEach(({ value, text, selected }) => { const option = document.createElement('option'); option.value = value; option.textContent = text; option.selected = selected || false; select.appendChild(option); }); return select; } /** * 创建选择下拉框（保持兼容性） */ static createSelect() { return UIManager.createLinkConversionSelect(); } // ...existing code... } // DOM观察器 class DOMObserver { /** * 观察DOM变化 */ static 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; } } // 初始化 function init() { const targetNode = document.body; DOMObserver.observeDomChange(targetNode, (mutation) => { if (mutation.target.querySelector('.b3-typography')) { UIManager.addCustomButton(); } }); } // 启动应用 init(); })();
2 如何使用代码片段
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于