夜雨聆风学习资料网

ARTICLE · 1250926

技术流文章怎么排版?也许这个开源软件能帮到你!

发布时间：2026-10-26 04:02:59 最近访问：2026-10-26 04:02:59
技术流文章怎么排版?也许这个开源软件能帮到你!
引言
大家好 ，我是木子，一个人。
今天这一期准备开源一个工具：小黑喵创作台。
小黑喵创作台是什么呢？
我将它定义为一个将知识和数据沉淀下来的技术流创作平台。
为什么要搞它？
最开始，我只是需要一个方便编辑技术文章的在线网页，随编随弃。
这样的一个平台，必须支持Markdown语法，
必须能够做到实时渲染，同时必须支持行内公式、行间公式转换为SVG，同时还要支持行内代码块和行间代码块。支持添加快捷菜单。
但是鼠标点点点的方式还是不够快，最好可以不用鼠标，完全用键盘完成排版。（此处需要优化）
然后，需要能够导入HTML和MD文件，
同时也可以保存为HTML和MD文件。
最后，直接点击复制就可以把排版的内容复制到微信公众号上。
这就是小黑喵创作台2.0
但是，2.0的问题是每次改完都要保存为HTML或者MD，文件不能形成体系，这就很不妙。
于是，小黑喵创作台3.0 横空出世
相对于V2.0，V3.0套了一个Electron的壳子，内容做了持久化，同时增加和notion、微信的联动。
notion -- 小黑喵创作台 -- 微信
什么是notion
notion是一款笔记软件，最独特的地方在于它的“块”结构和数据库能力，用户可以把任何内容都看作一个可以自由拖拽、组合的块。
配置 
notion.so/developers/tokens 可以创建notion的token, 用这个token就可以访问、创建文章。
在公众号后台->设置与开发->基本配置可以设置微信公众号的API 和app secret。在创作台助手中配置完成后可以直接将文章推送到后台。（这里采用Electron的壳子，目的是方便文件落盘，app secret这些都会自动加密存储在本地，不会造成泄露。）
工作流
微信公众号编辑的工作流变成了：
先在 notion当中把内容编辑好，然后导入到小黑喵创作台，会将图片转换为base64的格式嵌入，之后可以进行微调、排版，最后可以推送到微信公众号上，或者一键复制，直接粘贴到微信公众号上。 
最后将编辑的内容更新到notion中。
下一步
到目前为止，小黑喵创作台不是一个完善的作品，
但它已经基本成型。
它并不准备干翻notion和其它的markdown编辑软件。
它的定位很明确：它就是一款技术文章排版辅助器。
它能做的就是让公众号中分享的内容能够真正沉淀下来。
后面准备怎么做？
按照主流的做法是加一个AI，让AI帮助完成创作。但是作者想了一下，真的有必要什么东西都加上AI吗？
AI可以给我们提供一些灵感，但是真正能够让一篇内容具有可读性的还是依靠人的经验，所以也许AI选题这一块可以先不做。
下一步做什么，数据看板+AI分析？。
因为微信对个人订阅公众号的限制，文章的点赞、浏览量数据这些都不能通过后台直接扒下来，所以数据看板这条路被堵死了，只能看到后台的素材、草稿数据。
小黑喵创作台V4到底会是一个怎么样的形态?目前还没有想好。
但是准备开源V3。
大家可以自行下载体验，也欢迎提出宝贵意见，或者二次开发。
这个软件有什么用？我也不知道，也许有用，也许没有用。
但是有一件事是确定的，在开发这个软件的过程中作者积累了宝贵的全栈开发经验。
最重要的是明白了：
解决问题的关键是找到关键的问题。
我是木子，一个人。
将继续给大家分享软件开发和仿真。
如果你觉得有用，欢迎一键三连。
前端已死，全栈当立

小黑喵创作台 · 更新日志

v3.0.0 (2026-10-25)

新增：Notion 模块（网页版 V3）

  • blackcat-v3.html
    ：在 V2（v2.7.0）基础上追加自包含 Notion 模块，V2 原文件未改动
  • 搜索 / 导入 Notion 笔记：行内与区块公式还原（MathJax 输出 SVG，微信要求）、callout/表格/折叠块/高亮自动转换
  • Notion 图片自动下载转 base64（6 路并行 + 会话内缓存），可直接粘贴进微信编辑器
  • 「标记为已发布并回写」：发布记录自动追加到对应 Notion 笔记末尾
  • 详见 README-V3.md

新增：桌面版（Electron，desktop/ 目录）

  • 主进程代理全部 Notion / 微信 API：无 CORS 限制、耗时操作排队执行并回传进度
  • Notion Token / 公众号 AppSecret 经 Windows DPAPI（safeStorage）加密存储，网页侧拿不到原文
  • 一键推送公众号草稿箱：图片自动传微信图床换 mmbiz.qpic.cn URL、封面传永久素材、正文限制预检（< 2 万字符 / 1M）
  • 文稿库：多篇文稿管理，持久化到 userData，关掉应用不丢
  • 局域网服务
    ：一键开启（默认端口 8899），手机连同一 Wi-Fi 访问 http://电脑IP:8899 即可在手机上导入与排版（浏览器模式降级为只读导入；本次已修复手机端 native-module.js 404 导致助手面板不加载的问题）
  • 打包产物：单文件便携版 + NSIS 安装包（见 Releases v3.0.0）；打包流程见 desktop/BUILD-打包说明.md

v2.7.0 (2026-09-09)

新增功能

  • 5 个新排版组件
    （侧边栏新增「金句」「分隔」「关注」「签名」「副题」快捷按钮）：
    • 副标题
      （:::subtitle 副标题文字）：居中、加宽字距的强调色副标题。
    • 作者签名
      （:::signature 作者名）：右对齐的「—— 作者名」签名块，带强调色短横线。
    • 引导关注
      （:::follow 公众号名称）：虚线边框的关注引导卡片，含「立即关注」按钮样式，用于文章结尾引导读者关注。
    • 分隔线
      （:::divider 文字）：居中文字分隔线，可带可选的中间标签文字。
    • 金句卡片
      （:::quote 金句文字）：左侧强调色竖线 + 大号装饰引号 + 斜体金句，适合引用名人名言或点睛之笔。
  • 新增 12 款标题样式
    ：
    • 二级标题装饰样式新增：渐变文字、序号标签、3D 下划线、柔和卡片、角标色条。
    • 一级标题装饰样式新增：渐变标题框、四角线框、左色块、斜纹背景、描边胶囊、居中色条。

优化

  • 帮助文档补充 5 个新组件的语法说明。

v2.6.0 (2026-09-09)

新增功能

  • 文章头图组件
    （:::cover 标题）：居中品牌标签（主题名 + 圆点 + ARTICLE）+ 大标题 + 强调色短横线，复现墨格「MOGE GREEN • ARTICLE」头图样式。
  • 章节标题组件
    （:::section 01 标题）：大号章节编号 + SECTION 01 英文标签 + 章节标题，复现墨格大号章节编号样式。
  • 看点卡片组件
    （:::highlights ... :::end）：横向排列的看点卡片，每张卡片带 01/02/03 大号编号，复现墨格「本文看点」卡片样式。
  • 侧边栏新增「头图」「章节」「看点」三个快捷插入按钮。
  • 新增「学术教程」演示模板（激光光学主题），完整展示头图 + 看点卡片 + 章节编号的组合排版效果。

v2.5.0 (2026-09-09)

新增功能

  • 手机/电脑端预览切换
    ：预览区面板新增「手机」「电脑」切换按钮，默认手机端预览（375px 宽度 + 手机外框），可一键切换到电脑端宽屏预览（680px）。适配微信公众号主要在移动端阅读的场景。
  • 模板视觉缩略图
    ：模板面板中每个模板卡片新增配色缩略图预览，展示对应主题的强调色条、标题色块、正文色条，一目了然地呈现每个模板的视觉风格。

v2.4.0 (2026-09-09)

新增功能

  • 6 套墨格风格排版模板
    ：参考墨格（moyufang.cn）排版方案，新增 6 套精选主题模板：
    • 橄榄手记
      （#1e1f23/#5a6b4a）：深色衬线风，编辑手记感，适合深度评测、案例复盘
    • 摸鱼票据
      （#059669）：票据视觉风，适合工具对比、创意评测
    • 留白禅意
      （#4A5D52）：大留白衬线风，呼吸感最强，适合随笔、生活感悟
    • 石墨极简
      （#52525B）：灰阶克制极简风，高端质感，适合科技评论、专业观点
    • 红白色系
      （#DC2626）：经典编辑风格，力量感强，适合深度分析、观点文章
    • 摸鱼绿
      （#059669）：清新绿色调，卡片丰富，适合教程、测评、工具盘点
  • 每套模板包含对应的配色方案（字体、标题样式、代码块、引用块、目录等全套样式）和示例文章内容

v2.3.0 (2026-09-07)

新增功能

  • 内部锚点跳转
    ：支持 [跳转到标题](#标题) 语法，点击后平滑滚动到目标标题位置。支持所有级别标题（h1-h6），标题含空格时也能正确跳转。
  • 行首空格保留
    ：在编辑区段落开头直接输入空格（半角/全角/Tab），预览区会正确保留缩进效果，无需 CSS 语法。
  • 首行缩进按钮
    ：侧边栏新增「缩进」按钮，一键插入首行缩进样式块。
  • 撤销/重做增强
    ：编辑区输入内容、粘贴内容后，上一步/下一步按钮可以撤销这些编辑操作，同时保留光标位置。

修复

  • CSS 模板双重包裹
    ：修复自定义 CSS 模板插入时出现两层 :::style...:::end 嵌套的问题。现在自动检测模板内容是否已包含完整语法，避免重复包裹。
  • CSS 模板内联样式
    ：内联 CSS 属性（如 text-indent: 2em;）不再产生额外 <div> 包裹，直接应用到 <p> 标签上。
  • Markdown 列表层级缩进
    ：修复嵌套列表在正文和框线中不能正确层级显示的 bug，支持多级缩进。
  • 主题切换
    ：修复快捷切换配色不生效的问题，配色更改时自动切换到默认主题。
  • 界面文字
    ：暖色调改名为暖色橙，剩余英文文本中文化。

优化

  • 自定义 CSS 样式和公式按钮使用模板名称作为按钮文字，不再显示图标。
  • 目录按钮从图标改为文字"目录"。
  • 模板创建对话框移除图标输入字段。

v2.0 (2026-08)

初始版本

  • 实时 Markdown 预览
  • 6 套预设主题 + 自定义配色
  • MathJax 数学公式支持（SVG 输出）
  • highlight.js 代码高亮
  • 中英双语界面
  • 字体分离设置（中文/英文）
  • 文字颜色与对齐
  • 模板系统（8 套内置模板 + 自定义模板）
  • HTML 直渲模式 + ECharts 图表
  • 一键复制到微信
  • 导入/导出（MD/HTML/PDF）
  • 快捷键支持

相关学习资料