老部落
我们在撰写前端文案的时候是不是有经常遇到需要展现代码的。常规的方法是直接将代码贴成文本格式，这样虽然代码可以看到，但是体验效果一般。如果能可以直接演示出来就更好。在这里，我们推荐这款CodePen在线工具，可以将需要演示的代码插入到网页中可以作为演示效果。
当然，CodePen 是有付费和免费的版本，前者功能更多，后者日常够用。
这里，我们在注册账号后可以看到后台界面，创建代码块后可以输入HTML、CSS、JS 部分，在右侧可以看到实时演示效果。
右侧底部的 Embed 可以看到可以分享到我们的网页中，常规的有HTML部分，或者如果是WordPress网站的话可以贴短代码，当然前提是我们可以安装对应支持的插件。
| Self-Hosted WordPress | WordPress.com | |
|---|---|---|
| Block Editor (Gutenberg) | Use an HTML Block | Use an HTML Block |
| Block Editor (Gutenberg) | Use our Block Editor Plugin (recommended for most control) | With the Business or eCommerce plan, you can install plugins, so you can install our Block Editor Plugin. |
| Block Editor (Gutenberg) | Use our codepen_embed Shortcode Plugin | Shortcode plugin not supported |
| Block Editor (Gutenberg) | Just paste the URL and let the Embed Block handle it | Just paste the URL and let the Embed Block handle it |
| Classic Editor | Use our codepen_embed Shortcode Plugin | N / A |
| Classic Editor | As long as you’re not in the “Visual Editor”, you can paste in the HTML | N / A |
| Classic Editor | Drop the URL in content, and allow oEmbed to embed it, which requires either Jetpack installed or our oEmbed Plugin. | oEmbed works automatically |
不同的WordPress编辑器可以用到不同的支持扩展插件。
这样，我们在网页中前端可以看到HTML、CSS、JS 代码的的同时，可以直接看到演示的效果。比我们将代码贴到本地在调试方便很多，甚至可以直接看到有些朋友分享的代码是否真的可以运行进行快速的检测。
