需求

进行记录的时候, 常常会希望一段js/html/css代码可以作为代码进行展示, 同时嵌入到页面上.

在尝试时间展示页面的时候, 基于 AsciiDoc Passthrough + Hugo Shortcodes 实现了一个简单的代码展示+嵌入同步方案.

使用样例

时间展示页面-AsciiDoc

实际代码

Shortcode内容为(layouts/shortcodes/htmldoc.adoc):

++++
{{ .Inner  }}
++++

[source,html]
----
{{ .Inner  }}
----

使用方式为:

实现代码如下:
{{% htmldoc %}}
<div id="tsdiv" style="font-size: 1.5em"></div>
<script>
const tsDom = document.querySelector('div#tsdiv');
const reqAF = (
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    function (callback) { window.setTimeout( callback, 1000 / 60 ) }
);
(function setTs() {
    tsDom.innerHTML = (new Date()).toISOString();
    reqAF(setTs);
})();
</script>
{{% /htmldoc %}}