为方便代码调式和预览,在文章中嵌入nicetheme,提升代码的演示效果。

效果预览

前言

理论上wordpress都可支持,在这里只演示nicetheme主题下嵌入方式

准备

打开后台面板进入:外观 -> 自定义 -> 自定义css,填入一下代码

pre.runkit-embed {
    margin: 1.5rem -100px;
    padding: 0;
    background-color: transparent;
}

pre.runkit-embed iframe {
    margin: 0px !important;
    width: 100% !important;
}

进入:积木 -> 网站优化 -> 自定义

自定义头部

<script src="https://embed.runkit.com"></script>

自定义底部

<script>
const elements = [...document.getElementsByClassName('runkit-embed')]
const notebooks = elements.reduce((notebooks, element) => {
    const innerText = element.firstChild
    const currentCell = window.RunKit.createNotebook({
        element,
        hidesActionButton: true, // 隐藏运行按钮
        evaluateOnLoad: true, // 默认直接输出结果
        source: innerText.textContent,
        onLoad: () => innerText.remove()
    })
  return notebooks
}, [])
</script>

发布文章

在文章中写入一下代码,发布即可看到效果

<pre class="runkit-embed">
<代码部分>
</pre>