前阵子大聪明的带带弟弟排版器[1]在飞书上发布了，很受欢迎。大家普遍反馈最棒的一点是图片可以一次性复制粘贴。
我之前一直用阿禅可能吧的排版器[2]排公众号文章，对于图片我有一套很顺畅的换图方式，一篇文章几十张图操作不超过半分钟，就感觉也还好。这回尝试了下大聪明的排版器，能批量贴图真的开心很多，才想起该迭代工具。
但是，我日常笔记都在 Obsidian 里，更喜欢本地用 markdown 写文章，不想换飞书。那就自己动手丰衣足食啦。
效果展示
我用键盘敲下的字符是这样的（图片部分通过复制粘贴得到）
在 Obsidian 里显示是这样的：
复制粘贴到公众号编辑器里是这样的：
实现步骤一、给 Obsidian 安装插件
（Obsidian 本身的安装和使用可以看小七姐写的保姆级教程[3]，本文就不啰嗦了。）
打开 Obsidian 的第三方插件库，搜 html，看到好多转换器，其中第二排第二个说复制内容 as HTML，并且包含图片。就它了！
点击安装后进入设置界面，把 Embed external images 打开，这样图片就能直接复制了。
再设个好记的快捷键，我选 shift+ctrl+c。
找一篇本地和网络各种来源的几十张图片的笔记，shift+ctrl+c，去公众号粘贴，果然，所有图片都稳稳当当出现在公众号里了。好用！
二、修改 CSS
目前粘贴出来的内容几乎没有任何格式，要让它好看就得定制自己的 css。
把设置里“custom template”选项打开，复制默认的 css 文本，贴给 claude。
提出我的格式要求：
把 claude 帮我写的 css 贴回设置里的文本框，再次尝试，复制粘贴出来的文章就有格式了。再提出一些修改意见让 claude 迭代。两轮后完工。
最后贴到设置里的 css 是这样的：
/* 标题样式 */
h1, h2, h3, h4, h5, h6 {
color: #ff4c00;
margin: 1.5em 0 0.8em;
font-weight: 600;
line-height: 1.4;
}
h1 {
font-size: 36px;
border-bottom: 3px solid #ff4c00;
padding-bottom: 0.3em;
}
h2 {
font-size: 30px;
border-bottom: 2px solid rgba(255, 76, 0, 0.8);
padding-bottom: 0.2em;
}
h3 {
font-size: 24px;
border-bottom: 1px solid rgba(255, 76, 0, 0.6);
padding-bottom: 0.1em;
}
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }
/* 基础段落样式 */
p {
font-size: 15px;
line-height: 1.6;
color: #333;
margin: 1em 0;
}
/* 脚注中的段落样式 */
.footnotes p,
section[class="footnotes"] p {
font-size: 12px !important;
color: #666 !important;
line-height: 1.5 !important;
}
/* 强调文本 */
strong, b {
color: #ff4c00;
font-weight: 600;
}
/* 列表样式 */
ul, ol {
padding-left: 1.5em;
margin: 1em 0;
}
ul li {
list-style: disc;
}
ul li span {
color: #333;
font-weight: normal;
}
ol li {
font-weight: 600;
}
ol li span {
color: #333;
font-weight: normal;
}
/* 代码块 */
code, kbd, pre {
font-family: "Roboto Mono", "Courier New", Courier, monospace;
font-size: 14px;
background-color: #fff5f2;
border-radius: 4px;
}
pre {
padding: 1em;
margin: 1em 0;
overflow-x: auto;
border: 1px solid rgba(255, 76, 0, 0.1);
}
/* 图片 */
img {
max-width: 100%;
border-radius: 8px;
margin: 1em 0;
}
/* 表格 */
table {
width: 100%;
border-collapse: collapse;
margin: 1em 0;
background: white;
border: 1px solid #eee;
}
table th {
background-color: #fff5f2;
color: #ff4c00;
font-weight: 600;
text-align: left;
padding: 0.8em;
border: 1px solid #eee;
}
table td {
padding: 0.8em;
border: 1px solid #eee;
}
/* Callout 样式 */
div[style*="callout"] {
margin: 1em 0;
padding: 1em;
border-radius: 8px;
border: 1px solid rgba(255, 76, 0, 0.1);
background: #fff5f2;
}
div[style*="callout-title"] {
padding: 0.8em;
color: #ff4c00;
font-weight: 600;
border-bottom: 1px solid rgba(255, 76, 0, 0.1);
}
div[style*="callout-content"] {
padding: 1em;
background-color: white !important;
}
/* 任务列表 */
li[style*="task-list-item"] {
list-style: none;
padding-left: 0;
}
input[type="checkbox"] {
margin-right: 0.5em;
}
/* 引用块 */
blockquote {
margin: 1em 0;
padding: 0.5em 1em;
border-left: 4px solid #ff4c00;
background-color: #fff5f2;
color: #666;
}
/* 链接样式 */
a {
color: inherit;
text-decoration: underline;
}
/* 分隔线 */
hr {
border: none;
border-top: 2px solid rgba(255, 76, 0, 0.2);
margin: 2em 0;
}
/* 代码块 */
pre {
padding: 1em;
margin: 1em 0;
max-height: 350px;
overflow-y: auto; /* 只保留垂直滚动 */
border: 1px solid rgba(255, 76, 0, 0.1);
white-space: pre-wrap; /* 允许自动换行 */
word-wrap: break-word; /* 确保长单词也能换行 */
overflow-x: hidden; /* 隐藏横向滚动条 */
}
code, kbd, pre {
font-family: "Roboto Mono", "Courier New", Courier, monospace;
font-size: 14px;
background-color: #fff5f2;
border-radius: 4px;
white-space: pre-wrap; /* 允许自动换行 */
word-wrap: break-word; /* 确保长单词也能换行 */
}
再次测试，就是你们看到的这篇文章的样式了。满意，收工。
一些感想
从开始有想法到最终搞定这个功能其实只花了一小时（中间还有十几分钟尝试做网页版插件的歪路）。但直到用起来了，我才感受到写公众号发文章体验能有多丝滑：现在我的每一个小笔记都想发就发完全零阻力，改动也是零阻力每次改后更新只需两秒钟。
立刻觉得自己之前的将就是多么不可原谅了……是的我有一些借口：审美不行 CSS 调不出可能吧的效果，流程已经优化过了也不算麻烦，需求总会变总有些边边角角功能搞不定还是得手动……但比起现在享受到的顺畅，以及这种顺畅可能带来的质的变化，之前的理由太立不住脚了啊。
还是得勤快点多折腾。有 AI 在，折腾这些事儿，都超级简单呢。
带带弟弟排版器
阿禅的可能吧 Markdown 转公众号排版
小七姐的保姆级 Obsidian 教程
扫码下载今日头条
网页，又叫Web，其实就是一个后缀名为.html的文本文件。HTML文件采用超级文本标记语言(HyperText Markup Language)书写而成，最终由客户端浏览器解释并呈现给用户。
Web由HTML内容、CSS样式、JavaScript前端行为三要素组成。开发一个网页，就好比设计一出舞台剧，首先要决定舞台上有哪些演员(HTML网页内容)、演员的扮相(CSS网页样式)、演员的动作及剧情(JavaScript网页前端行为)。
1 HTML
HTML使用标记标签来描述网页，标记标签是HTML语言中最基本的单位，是HTML中最重要的组成部分。
标记是HTML文档中一些有特定意义的符号，这些符号指明网页内容的含义或结构。
标记即标签，不同的标记能实现不同的功能。HTML标记按功能可大致分为六大类。分别是语义标记、元标记、文本标记、容器标记、嵌入式标记，以及表单和表单元素标记六大类。
(1) 语义标记。又称结构标记，是指尽量使用有相对应结构含义的HTML标记。语义标记的逐渐增加便于开发者阅读并写出优雅美丽的代码，同时让浏览器的“爬虫”和机器更好地解析检索。在没有CSS的情况下，语义标记让页面也能呈现出很好的内容、代码结构。简而言之，语义标记的使用，即是为了网页“裸奔时也好看”。
(2) 元标记。是指位于HTML文件头部的一些特殊代码，是解释说明的标记。其主要功能就是对文档进行说明，描述HTML文档的整体信息。元标记向浏览者提供某一页面的附加信息，告诉我们它是谁。当客户机找服务器要东西时，它帮助一些搜索引擎进行页面分析，使导出的某一页面检索信息能正确地放入合适的目录中。
HTML元标记出现于网页头标签处，主要包括标题标记、关键词标记、描述标记等，合理运用元标记会使网页在搜索引擎中表现更为突出。
(3) 文本标记。这是最重要、最基本的标记，一般只能嵌套文本、超链接的标签。为了让网页中的文本看上去编排有序、整齐美观、错落有致，就要设置文本的标题、字号大小、字体颜色、字体类型以及换行、换段等。而为实现这一目的所使用的特定的HTML语言，就叫作文本标记。
(4) 容器标记。又称作内容组织标记，可以简单地理解为它是能嵌套其他所有标签的标签，是用来装东西的容器。容器与容器之间也可以相互嵌套，表现为父级容器和子级容器。
如div标签中可以镶嵌span标签，div可以看作是一个可以装入其他标签的大容器，span是一个只能装文本的小容器，大容器当然可以放得下小容器。
(5) 嵌入式标记。常用于嵌入图像、音频、视频、flash动画、插件等多媒体元素，使网页呈现方式更加多样化，还可以嵌套某些标签来指定视频文件的路径或者网址路径，决定多媒体元素的属性和 方式等。
(6) 表单和表单元素标记。多用于制作网页和用户交互的界面、控件，是客户端与服务器端进行信息交流的途径。用户可以使用诸如文本域、列表框、复选框及单选按钮之类的表单元素输入信息，然后单击某个按钮提交这些信息。
2 CSS
如果说HTML语言规定了网页的具体内容，那么CSS(cascading style sheets)就是为了给这些内容进行规整和装饰而存在的。CSS最初的诞生，就是因为HTML为了满足页面设计者的显示要求而变得臃肿复杂，因而需要一种样式表语言达到控制页面呈现内容的效果。CSS让整个页面可视化程度更强，可以说是网页的门面。如果将网页比作一个舞台，HTML是舞台上的演员，那么CSS就是演员的扮相，更完美地将节目(即页面内容)呈现在观众面前。
CSS即层叠样式表。作为一种用来表现HTML或者XML的计算机语言,CSS可以对网页元素位置的排版进行像素级别的精确控制,可以静态地修饰网页,也可以配合脚本语言(如后文会提到的JavaScript)动态地格式化网页元素。
所谓层叠，是即样式可以层层叠加。
每个HTML元素都有一组样式属性,它们可以通过CSS来设定。这些属性涉及背景(background)、字体(fonts)、颜色(color)、链接(link)、边框(border)、列表样式(url)等。CSS就是一种先选择HTML元素,然后设定选中元素属性的机制。
CSS选择器和要应用的样式构成了一条CSS规则。
CSS规则由两个主要的部分构成：选择器及一条或多条声明。选择器(selector)就是想要改变样式的HTML元素;每条声明(declaration)由一个属性(property)和一个值(value)构成。属性是想要设置的样式属性(style attribute),每个属性有一个值。属性和值被冒号(:)分开,CSS声明总是以分号(;)结束,声明组以大括号({ })括起来。
3 JavaScript
JavaScript最早是由Netscape Communication(网景)公司开发出来的一种客户端脚本语言,将JavaScript代码直接嵌入在HTML页面中，能对HTML页面中的HTML、CSS和JavaScript本身进行增加、删除、修改、查询等操作，使得客户端静态页面变成支持用户交互并响应相应事件的动态页面(DHTML=HTML+CSS+JavaScript)。它的出现弥补了HTML语言的缺陷，使得开发客户端Web应用程序成为可能。
HTML Web运行在浏览器中，这就是说浏览器是Web的实际运行环境。如果将运行环境视为一个京剧表演的舞台，则在这个舞台上有网页内容HTML(演员)、网页样式CSS(演员的扮相)、网页行为JavaScript(演员的动作)。JavaScript只能在自己的舞台上表演，能对舞台上的既有存在(HTML、CSS、JavaScript)进行操作(增、删、改、查)，而不能跨越到舞台外面表演(功能受限，JavaScript程序不能操作浏览器之外的事物)。
更进一步思考与观察，会发现两个有趣的现象:
① 当网站被服务器软件架设起来时(如同京剧正式开演)，由于遵守网络安全协议，JavaScript这个演员的功能受限于表演的舞台(也就是浏览器客户区)。也就是说，此时JavaScript是存在功能受限的，能对HTML、CSS、JavaScript进行增删改查，而不能对浏览器客户区之外做任何事情，如不能操作硬盘等本地资源等。为了在互联网上搭建网站，让所有人都能看到的，还需要租用域名、空间。
② 当直接双击运行本地Web文件时(如同京剧在做排练)，JavaScript的功能相对不受限制。此时JavaScript可以访问本地资源，如读取本机IP、操纵本地文件系统等。但这样架设的Web不能被他人通过网络访问，也不能被百度检索。事实上，我们可以在本地放置无数个网页，只要我们的硬盘容量足够大。
JavaScript包含了三个部分的内容：JavaScript脚本语言规范EMCAScript(语言核心)、文档对象模型DOM(以面向对象的方式操纵文档内容)、浏览器对象模型BOM(以面向对象的方式操纵浏览器窗口元素)。
3.1 语言核心EMCA Script
EMCA 是欧洲计算机制造商协会(EuropeanComputer Manufacturers Association)的缩写，EMCAScript就是这个协会制定的标准化脚本语言。我们知道，JavaScript是一门编程语言，而每一种语言都有它自己的基本语法如数据类型等，这些概念必须遵循一定的规范，浏览器开发者要严格依据这个规范来开发编译器，JavaScript程序员要严格依据这个规范来调用API。也就是说，EMCAScript是JavaScript的语法规范，规定了JavaScript脚本的核心内容。打个比方，新华字典(也算是一种语言规范)规定了“血”这个字，而无论在“血液”中的读“xuè”，还是在“血晕”中的读“xiě”。新华字典规范了汉字，EMCAScript规范了JavaScript。
3.2 文档对象模型DOM
文档对象模型(document object model)是针对HTML和XML文档的应用程序编程接口。DOM 把整个页面规划成由多个节点构成的文档，我们可以用DOM API将页面内容绘制成一个树状图。在这种模型下，页面中的每个部分都是可用程序操纵的节点，我们可以通过DOM 来方便地控制页面的结构和内容(增加、删除、修改、查询等)，如我们就可以用document.getElementById()通过id号来查询文档中的元素。DOM 使得用户页面可以动态地变化，用户可以和Web文档内容进行交互。
3.3 浏览器对象模型
浏览器对象模型BOM(browser object model)是针对浏览器的应用程序编程接口。我们可以通过BOM 对浏览器窗口进行访问和操作，例如弹出新的浏览器窗口，移动、关闭和更改浏览器窗口，提供详细的网络浏览器信息(navigator object)、详细的页面信息(location object)、详细的用户屏幕分辨率的信息(screen object)等。BOM 方便我们从浏览器上获得信息，更好地和浏览器进行交互。例如，我们可以用window.alert()弹出消息框，用window.prompt()弹出提示框，使得用户可以和浏览器窗口进行交互。
4 案例分析：选项卡控制
点击没同选项卡，实现如下切换效果：
代码：
tab control
道德经
岳阳楼记
中庸
上善若水。
水善利万物而不争，处众人之所恶，故几於道。
居善地，心善渊，与善仁，言善信，正善治，事善能，动善时。
夫唯不争，故无尤。
不以物喜，不以己悲
惟江上之清风，与山间之明月
耳得之而为声，目遇之而成色
博学，审问，慎思，明辨，笃行。
学之要能，问之要知，思之要得，辨之要明，行之要笃。
虽愚必明，虽柔必强。
ref：
王小峰《大话Web开发：基于知识管理角度》
－End－
