<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>我读完 @trq212 那条推之后, 把所有 markdown 都换成了 HTML</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Noto+Sans+SC:wght@300;400;500;600&family=Noto+Serif+SC:wght@500;700;900&display=swap" rel="stylesheet">
<style>
  :root { --ink:#1a1a1a; --paper:#fafaf7; --line:#e7e5e0; --mute:#6b6760; --accent:#b8553a; --twitter:#1d9bf0; }
  body { font-family:'Inter','Noto Sans SC',sans-serif; background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased; }
  .serif { font-family:'Noto Serif SC',Georgia,serif; }
  .ornament { display:flex; align-items:center; justify-content:center; gap:14px; margin:48px 0; color:var(--mute); }
  .ornament::before, .ornament::after { content:""; flex:1; max-width:60px; height:1px; background:var(--line); }
  .article p { font-size:1.0625rem; line-height:1.8; color:#262421; margin:1.1em 0; max-width:65ch; }
  .article h2 { font-family:'Noto Serif SC',serif; font-size:1.875rem; font-weight:700; margin:2.4em 0 0.8em; letter-spacing:-0.01em; }
  .article blockquote { border-left:3px solid var(--accent); padding:0 0 0 20px; margin:1.6em 0; font-style:italic; color:var(--mute); font-family:'Noto Serif SC',serif; font-size:1.0625rem; line-height:1.7; }
  .article a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
  .grain::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:0.4; background-image:radial-gradient(circle at 12% 18%, rgba(106,92,56,0.05), transparent 45%), radial-gradient(circle at 88% 72%, rgba(106,92,56,0.04), transparent 50%); }
</style>
</head>
<body class="grain">
<article class="article max-w-[720px] mx-auto px-6 pt-20 pb-32">

  <!-- Source banner — clearly attributes the inspiration -->
  <a href="https://x.com/trq212/status/2052809885763747935" target="_blank" rel="noopener" class="!no-underline group block mb-10 rounded-2xl border border-[var(--line)] bg-white/70 hover:bg-white transition-colors p-4 flex items-start gap-4">
    <div class="shrink-0 w-10 h-10 rounded-full bg-[var(--twitter)] grid place-items-center text-white">
      <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
    </div>
    <div class="min-w-0 flex-1">
      <div class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[var(--mute)] mb-1">灵感来自 / Source</div>
      <div class="text-[14px] font-medium text-[var(--ink)] leading-snug">@trq212 关于 "在 AI 时代, HTML 已经取代 markdown 成为最终形态" 的推文</div>
      <div class="text-[12px] text-[var(--mute)] mt-1 break-all group-hover:text-[var(--accent)] transition-colors">x.com/trq212/status/2052809885763747935  ↗</div>
    </div>
  </a>

  <div class="text-[11px] font-medium tracking-[0.22em] uppercase text-[var(--accent)] mb-5">Essay · 2026.05 · 评论 / 延伸</div>
  <h1 class="serif text-[3rem] leading-[1.08] font-black tracking-tight mb-5">
    我读完 <a href="https://x.com/trq212/status/2052809885763747935" target="_blank" rel="noopener" class="italic font-bold !no-underline" style="color:var(--accent)">@trq212</a> 那条推之后,<br/>
    把所有 markdown 都换成了 HTML
  </h1>
  <p class="text-[1.125rem] leading-relaxed text-[var(--mute)] font-light max-w-[60ch] mb-8">
    简而言之: 在 AI 写作 / 编辑器 / 代理时代, markdown 这个 "中间态" 已经撑不住了 —— HTML 才是面向读者的最终形态。
  </p>
  <div class="flex items-center gap-3 text-[12px] text-[var(--mute)] pb-12 border-b border-[var(--line)]">
    <div class="w-8 h-8 rounded-full bg-gradient-to-br from-[#c96442] to-[#e9b94a]"></div>
    <span class="font-medium text-[var(--ink)]">Tom Pan</span>
    <span>·</span><span>5 月 11 日</span>
    <span>·</span><span>4 分钟阅读</span>
  </div>

  <h2>让我点头的三个观察</h2>
  <p><span class="serif font-bold text-[1.5rem] float-left mr-2 leading-none mt-1.5" style="color:var(--accent)">第</span>一, 我们对 markdown 的爱, 主要是写起来爽。但读者从来没投过票。读者拿到的永远是某个 markdown 渲染器吐出来的结果 —— 而那个渲染器属于平台, 不属于你。</p>
  <p>第二, 截图发推这件事, markdown 输了。随便挑一段 markdown, 截图发出去都是被 GitHub 默认主题压扁的灰白方块。HTML 可以是壁纸级图片。</p>
  <p>第三, 公众号 / 知乎 / 小红书 / Notion / 飞书 —— 每一家解释 markdown 的方式都不一样。你写一份, 5 个平台得调 5 次。<strong class="font-semibold text-[var(--ink)]">HTML + 内联 CSS, 一次粘贴, 任何平台都还原</strong>。</p>

  <h2>但 HTML 太啰嗦, 这是真的</h2>
  <p><code class="px-1.5 py-0.5 rounded bg-[#f0ece5] text-[0.92em] font-mono text-[#7a3d27]">&lt;div class="..."&gt;</code> 写多了想吐, 这是事实。之前没人愿意花成本写 HTML, 因为同样的内容, markdown 30 秒, HTML 30 分钟。</p>
  <blockquote>变量是 —— AI 把这 30 分钟降到 30 秒了。<br/>你写 markdown, AI 把它升级成可交付的 HTML。你管最终形态, AI 管啰嗦细节。</blockquote>

  <h2>我们顺手做了一个工具</h2>
  <p>灵感来自原推, 加上 Claude Code 团队的实践, 我们做了 <a href="#">HTML Anything</a>。左侧贴 markdown / CSV / JSON, 选一个模板 (杂志、PPT、海报、小红书、数据报告 …), 按 ⌘+Enter —— 本地的 Claude / Cursor / Codex 在你<strong class="font-semibold text-[var(--ink)]">已经登录</strong>的 session 里跑, 几秒后右侧就是一份可以直接复制到公众号 / 推特 / 知乎的 HTML。</p>
  <p>不需要 API Key, 不浪费 token (二次编辑只跑 diff)。</p>

  <h2>结论</h2>
  <p>如果你也觉得 "markdown → 编辑器手动重排" 这件事浪费了你的人生 —— 看一眼原推, 看一眼 Claude Code 团队的迁移, 然后试试任何一个能把 markdown 自动升格为 HTML 的工具。</p>

  <div class="ornament"><span class="serif italic">·  ·  ·</span></div>

  <div class="rounded-2xl border border-[var(--line)] bg-white/60 p-6 mt-12 flex items-start gap-4">
    <div class="text-2xl shrink-0">📩</div>
    <div>
      <div class="font-semibold text-[var(--ink)] mb-1">题图致敬: 推文中那个 "everything is HTML" 的瞬间。</div>
      <div class="text-[13px] text-[var(--mute)]">阅读原推 → <a href="https://x.com/trq212/status/2052809885763747935" target="_blank" rel="noopener" style="color:var(--accent)">x.com/trq212/status/2052809885763747935</a></div>
    </div>
  </div>
</article>
</body>
</html>