Shortcode

Hugo 用 shortcode 可以很优雅地内嵌代码演示。这里展示三种方式： 先用一张图确定边界：原生 shortcode、CodePen iframe 和 CodeSandbox 分别适合不同复杂度，也把代码放在不同的执行与隔离位置。 三条嵌入路径：简单且需要版本控制的效果优先用原生 shortcode；可分享片段适合 CodePen；完整交互应用再使用 CodeSandbox。 1. 内联 CSS demo（无需外部服务） # 直接在文章里跑一个旋转加载动画： 纯 CSS 旋转加载器 一个渐变色文字动画：

Hugo shortcodes make it easy to embed live code demos. Here are three ways: The diagram first separates their boundaries: a native shortcode, a CodePen iframe, and a CodeSandbox app serve different complexity levels and execute code in different places. Three embed paths: prefer a native shortcode for simple, versioned effects; CodePen for shareable snippets; and CodeSandbox for a complete interactive application. 1. Inline CSS Demo (No External Service) # A spinning loader animation, right in the article: