Markdown 代码块：围栏、语法高亮与图片导出
从围栏和语言标识入手，把具体 JavaScript 示例导出为可读的代码图片。学习如何处理长行、挑选最终尺寸下清晰的主题，检查标点和闭合括号，并在导出前移除敏感信息，分享时提供可复制源码和上下文解释。
在幻灯片或公告里，代码图片能让读者直接看到一个小例子，旁边再提供可复制的源码会更实用。独立片段可以打开代码转图片处理；需要结合上下文说明时，则把围栏代码块保留在完整 Markdown 文档里。
围栏代码块把内容作为代码显示，避免其中的符号被当成普通 Markdown。起始围栏独占一行，后接 javascript 之类的语言标识，最后一行代码之后再闭合。句子里的短标识用行内反引号，多行代码用代码块。
下面直接展示围栏的写法。本文的外层使用四个反引号，所以内层三个反引号可以原样呈现。
```javascript
console.log("Ready");
```
渲染器支持对应语言时，语言标识帮助选择高亮规则。它不会执行代码、安装依赖，也不能证明示例能运行。配色不对时，先检查语言标识和主题，不要急着改程序。
将下面的 JavaScript 复制进代码转图片工具，选择 JavaScript，并检查预览。示例保存三个颜色名称，再生成一个状态字符串；这是演示代码，不是产品性能测试。
const palette = ["cyan", "amber", "coral"];
function renderStatus(format) {
return `${format}: ${palette.length} colors`;
}
console.log(renderStatus("PNG"));
这张图可以用于教程预告或幻灯片，讲解函数如何读取数组长度。标题和说明放在程序外面，帮助读者区分解释文字与可执行源码。
很长的 URL、嵌套表达式或宽对象都会让代码图难读。先判断读者是否需要完整示例。可以删除无关初始化，但剩余片段仍应讲得通，而且要说明代码经过节选。
然后加宽画布，或在不改变语法的地方重新排版。不要为适应卡片而在字符串中随意换行，也别依赖水平滚动：静态图片无法显示捕获范围外的代码。下载后检查最长一行和最后的闭合括号。
按最终展示大小检查主题，让注释、字符串和标点都看得清。颜色用于辅助解释，别只靠颜色传达含义。导出前从原稿中删除令牌、私有地址和个人数据，只在成图后裁掉会留下有风险的源文件。
把源码作为可选中的文字发布，或链接完整示例。替代文本可以说明代码演示了什么，长篇代码转写则放在附近正文中。输出分页文档时，还要检查分页，不能因为图片排版好就推断 PDF 一定合适。
制作代码图片。文档导出可继续看 PDF 代码高亮保留指南，周边正文与列表写法可参考 Markdown 实用速查。