AsciiDoc

需求 进行记录的时候, 常常会希望一段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 %}}

测试Tex公式在网页上的展示效果-Asciidoc

测试Tex公式在网页上的展示效果-Asciidoc+Mathjax

一个简单的时间展示页面, 用于帮助计算多屏延迟 实现代码如下: <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>