Markdown 预览器

工具说明

左边写 Markdown，右边实时看到最终效果。下方有字数 / Token 估算，方便你把内容切到合适长度。

使用方式：直接写。全部在浏览器本地运行，不会上传任何数据。

Markdown 输入

链接<svg class="hx:inline hx:rtl:rotate-270 hx:align-baseline" height="1em" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 <path d="m9.1716 7.7574h7.0711m0 0v7.0711m0-7.0711-8.4853 8.4853" stroke-linecap="round" stroke-linejoin="round"/>
</svg></a></li>
<li><code>inline code</code> 和代码块</li>
</ul>
<div class="hextra-code-block hx:relative hx:mt-6 hx:first:mt-0 hx:group/code">

<div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-python" data-lang="python">def hello():
 print(\"Hello, world!\")
```"></textarea>
 </div>

 <div>
 <div class="counter-controls">
 <label class="counter-label">实时预览</label>
 </div>
 <div id="md-output" class="md-output"></div>
 </div>
 </div>

 <div class="check-list" style="margin-top:16px;padding:14px;border:1px dashed rgba(148,197,255,0.3);border-radius:12px;">
 <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;">
 <div><strong style="color:#22d3ee;">字符数：</strong><span id="stat-char">0</span></div>
 <div><strong style="color:#22d3ee;">中文字数：</strong><span id="stat-cn">0</span></div>
 <div><strong style="color:#22d3ee;">英文单词数：</strong><span id="stat-en">0</span></div>
 <div><strong style="color:#22d3ee;">估算 Tokens（GPT 风格）：</strong><span id="stat-token">0</span></div>
 </div>
 </div>

 <div style="margin-top:10px;">
 <button type="button" class="btn btn-ghost" id="md-copy">复制 Markdown</button>
 <button type="button" class="btn btn-ghost" id="md-copy-html">复制 HTML</button>
 <button type="button" class="btn btn-ghost" id="md-clear">清空</button>
 </div>
</div>

<script>
(function () {
 var input = document.getElementById("md-input");
 var output = document.getElementById("md-output");

 function escapeHtml(s) {
 return s.replace(/[&<>"']/g, function (c) {
 return ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c];
 });
 }

 // 一个非常轻量的 Markdown 渲染器（仅用于在线预览）
 function renderMarkdown(text) {
 if (!text) return "\"color:#94a3b8;font-style:italic;\">在左侧输入一些内容……";

 var lines = text.split("\n");
 var html = [];
 var i = 0;
 var inCode = false;
 var codeLang = "";
 var codeBuf = [];

 function flushParagraph(buf) {
 if (buf.length) {
 html.push("" + inline(buf.join(" ")) + "");
 }
 buf.length = 0;
 }

 function inline(s) {
 // 粗体
 s = s.replace(/\*\*(.+?)\*\*/g, "$1");
 // 斜体
 s = s.replace(/\*([^\*]+?)\*/g, "$1");
 // 行内代码
 s = s.replace(/`([^`]+)`/g, "<code>$1</code>");
 // 链接
 s = s.replace(/\[([^\]]+)\]\(([^)]+)\)/g, "<a href=\"$2\" target=\"_blank\" rel=\"noopener nofollow\">$1</a>");
 return s;
 }

 var paragraphBuf = [];

 while (i < lines.length) {
 var line = lines[i];

 // 代码块开始
 if (line.trim().startsWith("```") && !inCode) {
 flushParagraph(paragraphBuf);
 inCode = true;
 codeLang = line.trim().slice(3).trim();
 codeBuf = [];
 i++;
 continue;
 }

 // 代码块结束
 if (line.trim() === "```" && inCode) {
 inCode = false;
 var langAttr = codeLang ? (" class=\"language-" + codeLang + "\"") : "";
 html.push("<pre><code" + langAttr + ">" + escapeHtml(codeBuf.join("\n")) + "</code></pre>");
 codeLang = "";
 codeBuf = [];
 i++;
 continue;
 }

 // 代码块内
 if (inCode) {
 codeBuf.push(line);
 i++;
 continue;
 }

 // 标题
 if (line.match(/^#{1,6}\s/)) {
 flushParagraph(paragraphBuf);
 var level = line.match(/^(#+)\s/)[1].length;
 html.push("<h" + level + ">" + inline(line.replace(/^#+\s/, "")) + "</h" + level + ">");
 i++;
 continue;
 }

 // 水平分割线
 if (line.trim().match(/^---+$/) || line.trim().match(/^\*\*\*+$/)) {
 flushParagraph(paragraphBuf);
 html.push("<hr/>");
 i++;
 continue;
 }

 // 无序列表
 if (line.match(/^\s*[-*]\s/)) {
 flushParagraph(paragraphBuf);
 var list = [];
 while (i < lines.length && lines[i].match(/^\s*[-*]\s/)) {
 list.push("<li>" + inline(lines[i].replace(/^\s*[-*]\s/, "")) + "</li>");
 i++;
 }
 html.push("<ul>" + list.join("") + "</ul>");
 continue;
 }

 // 有序列表
 if (line.match(/^\s*\d+\.\s/)) {
 flushParagraph(paragraphBuf);
 var list2 = [];
 while (i < lines.length && lines[i].match(/^\s*\d+\.\s/)) {
 list2.push("<li>" + inline(lines[i].replace(/^\s*\d+\.\s/, "")) + "</li>");
 i++;
 }
 html.push("<ol>" + list2.join("") + "</ol>");
 continue;
 }

 // 空行
 if (line.trim() === "") {
 flushParagraph(paragraphBuf);
 i++;
 continue;
 }

 // 默认：段落
 paragraphBuf.push(line);
 i++;
 }

 flushParagraph(paragraphBuf);

 if (inCode) {
 html.push("<pre><code>" + escapeHtml(codeBuf.join("\n")) + "</code></pre>");
 }

 return html.join("\n");
 }

 function estimateTokens(text) {
 if (!text) return 0;
 // 粗略估算：中文每个字约 1.5 tokens，英文每个词约 1 token
 var cn = (text.match(/[\u4e00-\u9fa5]/g) || []).length;
 var en = (text.match(/[a-zA-Z]+/g) || []).length;
 var other = Math.max(0, (text.length - cn - en) / 4);
 return Math.round(cn * 1.5 + en + other);
 }

 function updateStats(text) {
 document.getElementById("stat-char").textContent = text.length;
 var cnCount = (text.match(/[\u4e00-\u9fa5]/g) || []).length;
 document.getElementById("stat-cn").textContent = cnCount;
 var enWords = (text.match(/[a-zA-Z]+/g) || []).length;
 document.getElementById("stat-en").textContent = enWords;
 document.getElementById("stat-token").textContent = estimateTokens(text);
 }

 function handleInput() {
 var text = input.value;
 output.innerHTML = renderMarkdown(text);
 updateStats(text);
 }

 input.addEventListener("input", handleInput);

 // 按钮
 document.getElementById("md-copy").addEventListener("click", function () {
 navigator.clipboard.writeText(input.value);
 });
 document.getElementById("md-copy-html").addEventListener("click", function () {
 navigator.clipboard.writeText(output.innerHTML);
 });
 document.getElementById("md-clear").addEventListener("click", function () {
 input.value = "";
 handleInput();
 });

 // 首次渲染
 handleInput();
})();
</script>

<style>
.md-output {
 background: rgba(15,23,42,0.45);
 border: 1px solid rgba(148,197,255,0.15);
 border-radius: 10px;
 padding: 20px;
 min-height: 320px;
 overflow-y: auto;
 line-height: 1.7;
 color: #cbd5e1;
}
.md-output h1, .md-output h2, .md-output h3 { color: #e2f7ff; font-weight: 700; margin: 0 0 10px 0; }
.md-output h1 { font-size: 1.6rem; margin-top: 16px; }
.md-output h2 { font-size: 1.3rem; margin-top: 14px; }
.md-output h3 { font-size: 1.1rem; margin-top: 12px; }
.md-output p { margin: 0 0 12px 0; }
.md-output ul, .md-output ol { margin: 0 0 12px 20px; padding: 0; }
.md-output li { margin-bottom: 4px; }
.md-output code { background: rgba(15,23,42,0.8); padding: 2px 6px; border-radius: 4px; font-family: Consolas, monospace; font-size: 0.9em; color: #67e8f9; }
.md-output pre { background: rgba(15,23,42,0.8); padding: 14px; border-radius: 8px; overflow-x: auto; border: 1px solid rgba(148,197,255,0.15); }
.md-output pre code { background: transparent; padding: 0; color: #e2f7ff; }
.md-output hr { border: none; border-top: 1px solid rgba(148,197,255,0.2); margin: 16px 0; }
.md-output a { color: #22d3ee; }
</style></code></pre></div></div><div class="hextra-code-copy-btn-container hx:opacity-0 hx:transition hx:group-hover/code:opacity-100 hx:flex hx:gap-1 hx:absolute hx:m-[11px] hx:right-0 hx:top-0">
 <button
 class="hextra-code-copy-btn hx:group/copybtn hx:cursor-pointer hx:transition-all hx:active:opacity-50 hx:bg-primary-700/5 hx:border hx:border-black/5 hx:text-gray-600 hx:hover:text-gray-900 hx:rounded-md hx:p-1.5 hx:dark:bg-primary-300/10 hx:dark:border-white/10 hx:dark:text-gray-400 hx:dark:hover:text-gray-50"
 title="复制代码"
 aria-label="复制代码"
 data-copied-label="已复制！"
 >
 <div class="hextra-copy-icon hx:group-[.copied]/copybtn:hidden hx:pointer-events-none hx:h-4 hx:w-4"></div>
<div class="hextra-success-icon hx:hidden hx:group-[.copied]/copybtn:block hx:pointer-events-none hx:h-4 hx:w-4"></div>
 </button>
</div>
</div>

</div>
 <div class="tool-related">
 <h3>同分类工具</h3>
 <div class="tool-related-grid">
 <a class="tool-related-card" href="/tools/word-counter/">
 📝
 字数统计器
 </a>
 <a class="tool-related-card" href="/tools/text-cleaner/">
 🧹
 文本清理器
 </a>
 <a class="tool-related-card" href="/tools/simple-replacer/">
 🔤
 批量替换器
 </a>
 <a class="tool-related-card" href="/tools/case-converter/">
 🔠
 大小写转换器
 </a>
 </div>
 </div>

</main><aside class="side-right" aria-label="信息栏">
 <div class="widget widget-timeline reveal">
 <div class="widget-head">
 近期大事记
 <a class="widget-more grad-link" href="/timeline/">全部</a>
 </div>
 <ol class="widget-list">
 
 <li>
 2026·06
 <a href="/timeline/2026-06-01-cost-down/" class="widget-link">推理成本再下台阶:文本 AI 从『偶尔用』变成『放心用』</a>
 </li>
 
 <li>
 2026·03
 <a href="/timeline/2026-03-01-open-source-code/" class="widget-link">开源模型的代码能力追上 GPT-4</a>
 </li>
 
 <li>
 2025·12
 <a href="/timeline/2025-12-15-claude-code-interpreter/" class="widget-link">Claude Code Interpreter 发布</a>
 </li>
 
 </ol>
 </div>
 
 <div class="widget widget-blog reveal">
 <div class="widget-head">
 最新博客
 <a class="widget-more grad-link" href="/blog/">全部</a>
 </div>
 <ol class="widget-list">
 
 <li>
 06·18
 <a href="/blog/2026-06-18-ai-workflow-copy-paste/" class="widget-link">5 套我验证过、可直接抄作业的 AI 工作流</a>
 </li>
 
 <li>
 06·16
 <a href="/blog/2026-06-16-inference-cost/" class="widget-link">当推理成本降到原来的 1/40:我如何重新设计我的 AI 工作流</a>
 </li>
 
 <li>
 06·15
 <a href="/blog/2026-06-15-team-ai-adoption/" class="widget-link">我们在团队推 AI 工具的第 6 个月:从人人兴奋到没人用</a>
 </li>
 
 </ol>
 </div>
 
 <div class="widget widget-graph reveal">
 <div class="widget-head">
 AI 星链
 <a class="widget-more grad-link" href="/nav/">探索</a>
 </div>
 <div class="widget-graph-stats">
 <div class="widget-graph-stat">
 44
 节点
 </div>
 <div class="widget-graph-sep">//</div>
 <div class="widget-graph-stat">
 65
 连接
 </div>
 </div>
 <a class="widget-graph-thumb" href="/nav/" aria-label="查看完整星图">
 
 
 
 
 
 打开星图 →
 </a>
 </div>
 
 <div class="widget reveal">
 <div class="widget-head">
 话题标签
 19 个
 </div>
 <div class="tag-cloud">
 
 <a class="tag-chip" href="/tags/%E5%B7%A5%E4%BD%9C%E6%B5%81/">工作流</a>
 
 <a class="tag-chip" href="/tags/prompt/">Prompt</a>
 
 <a class="tag-chip" href="/tags/cursor/">Cursor</a>
 
 <a class="tag-chip" href="/tags/claude/">Claude</a>
 
 <a class="tag-chip" href="/tags/%E5%AE%9E%E6%88%98/">实战</a>
 
 <a class="tag-chip" href="/tags/%E6%88%90%E6%9C%AC/">成本</a>
 
 <a class="tag-chip" href="/tags/%E6%8E%A8%E7%90%86/">推理</a>
 
 <a class="tag-chip" href="/tags/%E6%9E%B6%E6%9E%84/">架构</a>
 
 </div>
 </div>
 <div class="widget reveal">
 <div class="widget-head">
 订阅源
 </div>
 <div class="rss-list">
 <a class="rss-item" href="/index.xml">
 ◎
 全站 Feed
 XML
 </a>
 <a class="rss-item" href="/blog/index.xml">
 ✎
 博客 Feed
 XML
 </a>
 </div>
 </div>

</aside>
 </div><button class="theme-toggle boop" id="themeToggle" aria-label="切换明亮/深色模式" title="切换主题">
 🌙
 </button><footer class="site-footer" role="contentinfo">
 <div>
 国鑫实验室
 · 
 工具、效率、AI 与个人项目的实验室 —— 记录工具、效率、AI、内容创作与个人项目。
 </div>
 <div style="margin-top:8px; font-size:11px; color:var(--text-2);">
 © 2026 · 所有数字均由内容自动计算 · Built with Hugo
 </div>
 </footer><script>
 document.documentElement.classList.add('is-ready');