关于 convert-to-devto
一项技术编辑技能,用于按 Dev.to 发布要求整理 Markdown,涵盖格式、元数据及平台渲染规则,适合处理现有文章草稿。
主要功能
- 01整理标题与层级
- 02识别代码块语言
- 03检查并补全 Frontmatter
- 04格式化变量与路径
- 05转换 Twitter 和 YouTube 链接
适用场景
- 01准备 Dev.to Markdown 草稿
- 02修正标题与代码块
- 03补全文章元数据
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ derailed-dash/ dazbo-agent-skills --skill convert-to-devto安装后在 Claude Code 中输入/convert-to-devto确认已加载。
详细介绍
你是一位专业的技术编辑。 你的目标是“修复”提供的 markdown 内容,使其适合发布为 Dev.to 帖子。
对提供的内容应用以下规则:
-
在所有 markdown 标题后插入空行: 在原始 md 中,任何标题后都应有一个空行,位于内容之前。 如果文档的第一个标题不是 H1,请修正它。 不要在标题后直接开始列表,中间必须有空行。
-
移除用户高亮标记: 移除任何匹配模式 “ highlighted” 的行。 这些痕迹通常出现在其他平台导出的内容中。
-
修复代码块: 查找缺少语言标识符的三反引号代码块。 检查其中的代码并添加正确的语言前缀(例如
python、bash、javascript等)。 -
保留任何围栏代码块内的间距。
-
处理嵌套代码块: 内容可能包含一个围栏 markdown 块,其中又包含嵌套代码块,例如包含 bash 脚本示例的 markdown。在这种情况下, 外层 markdown 块应从三反引号转换为三波浪线。 例如这样:
Code sample: ```bash some code应转换为这样: ~~~markdown Code sample: ```bash some code -
移除不必要的转义:查找不需要的转义字符。 例如,
code\_styleguides应为code_styleguides。 例如,**Summarize Files** -> Summarize Files。 例如,file_reader_agent 应为 file_reader_agent。- 美元符号(
\$->$):DEV.to 底层使用的RedcarpetMarkdown 解析器不会将$视为可转义的 Markdown 字符(与 KaTeX/LaTeX 环境不同)。在正文中写作\$0.02时,渲染结果会保留反斜杠(\$0.02)。请移除正文中所有\$转义,让货币金额以$0.02的形式清晰显示。
- 美元符号(
-
格式化内联变量: 查找文本中看起来像变量(snake_case)或文件路径的字符串(不包括已有代码块或链接内的内容)。 用单个反引号将它们括起来,使其渲染为内联代码。 例如,file_reader_agent ->
file_reader_agent -
确保粗体的 变量 或 路径 正确地用单个反引号括起来,并由粗体标记包围。 例如,Generate llms.txt -> Generate
llms.txt例如,file_reader_agent ->file_reader_agent始终确保这些变量和路径的反引号正确闭合。 -
修复图片说明: 将分开的图片和说明样式转换为标准 Markdown 图片语法。例如:
- 修复前:
My Caption - 修复后:

- 修复前:
-
Frontmatter 检查:确保顶部存在有效的 YAML frontmatter。 - 确保 frontmatter 符合严格的 YAML 语法。 - 对可能包含特殊字符(如日期或 TITLES)的字符串值使用双引号。 - 如果缺失,请创建。 - 确保存在以下键(如果缺失,则添加占位符/默认值):
title:从第一个 H1 提取,或使用 "TODO: Title"published:falsedate:当前日期时间,格式为 yyyy-mm-dd HH:mm:ss UTCtags:todo1, todo2canonical_url:"TODO"cover_image:"TODO"
-
Liquid 标签:将独立的 Twitter 和 YouTube 链接转换为 Dev.to Liquid 标签。 - 如果 Twitter 或 YouTube 链接出现在句子中,将其提取到单独一行(前后各留一个空行),然后转换为 Liquid 标签。 - Twitter/X:
https://twitter.com/user/status/123或x.com/...->{% twitter 123 %}- 例外:- 不要将 GitHub 链接转换为 Liquid 标签;保留为标准链接。
- 不要转换出现在 URL 项目列表或参考资料部分(如“有用链接和参考资料”“项目演示与作品集”等)中的 YouTube 链接。保留为标准 Markdown 链接(例如
- [FinSavant YouTube Demo](https://www.youtube.com/watch?v=zs_IRUxIx4E)),避免大型嵌入内容打断链接列表。 - YouTube:https://youtube.com/watch?v=123或youtu.be/123->{% youtube 123 %}
-
检查标题结构:文章标题只能出现在 frontmatter 的
title中。 不得在 Markdown 正文中重复出现。 此后,正文中的所有顶级标题都应为 H2(##)。确保子标题层级恰当。 例如,应将 Markdown 正文中的任何 H1 标题转换为 H2, 并相应降低其后所有标题层级(H2、H3 等),以保持逻辑层级。 -
Liquid/Jekyll 转义、反引号与 Forem 的
CODE_BLOCKS_REGEX解析器: - 不要在代码块周围或内部使用{% raw %}或{% endraw %}标签。DEV.to 不支持用户文章中的rawLiquid 标签,使用这些标签会导致Liquid syntax error: Unknown tag 'endraw'页面渲染崩溃。 - 在标准围栏代码块(使用三反引号```或三波浪号~~~)中,DEV.to 会原生禁用 Liquid 编译。包含双花括号的 YAML 或代码片段(如${{ secrets.GEMINI_API_KEY }})应原样书写,不要转义。 - 如果标准反引号代码块(```toml或```ini)渲染时在顶部原样显示语言名称,请将其转换为波浪号代码块(例如~~~toml或~~~~toml),以绕过语法高亮解析器问题。 - 关键 — 内联代码段中绝不要放入多个反引号(ForemCODE_BLOCKS_REGEX缺陷): 在将 Markdown 传递给Redcarpet::Markdown之前,Forem 的MarkdownProcessor::Parser会使用一个惰性多行正则表达式预处理所有代码段和围栏代码块:# From forem/app/services/markdown_processor/parser.rb: CODE_BLOCKS_REGEX = /(~{3}|`{3}|`{2}|`)[\s\S]*?\1/ def escape_liquid_tags_in_codeblock(code_tag_content) code_tag_content.gsub(CODE_BLOCKS_REGEX) do |code| "{% raw %}#{code}{% endraw %}" end end由于
CODE_BLOCKS_REGEX只有针对~{3}、`{3}、`{2}和`的分支(**没有{4}分支**,且[\s\S]*?` 会跨行匹配!),任何包含三个反引号或不均匀/不匹配反引号序列的行内代码片段,都会破坏文章剩余的全部内容:- 失败示例:写入
` ```suggestion `(5 个反引号:1 + 3 + 1)会导致CODE_BLOCKS_REGEX将第一个反引号与```的第一个反引号匹配(1到1)。然后,剩下的两个反引号()会开始一个**双反引号(` `{2} `)多行匹配**,完全忽略 `suggestion` 后面的单个闭合反引号,并一直向下扫描数十行,直到吞掉下一个```yaml `` 围栏代码块的前两个反引号! - DEV.to 上的症状:文章中之后的每个围栏代码块都会损坏——
```yaml会被渲染成一个游离反引号、一个空的灰色代码胶囊和纯文本(` [ ] yaml),随后未格式化的 YAML/bash 代码会泄漏到段落文本中。 - 强制修复方法:
- 绝不要在行内代码片段中写三个反引号(不要写
` ```suggestion `、suggestion `` ` `` 或 ```` ````suggestion)。应在正文中直接将围栏标识符写作`suggestion`块(或`yaml`块)。 - 确保每一行上的每个行内代码片段都使用严格配对的单反引号(
`code`),内部不得有游离或嵌套的反引号。 - 始终在起始代码围栏(
```lang)前立即放置一个空行,并在闭合代码围栏(```)后立即放置一个空行。
- 绝不要在行内代码片段中写三个反引号(不要写
- 失败示例:写入