htmlewislulu-html-ppt-skill/html-ppt/templates/single-page/code.html

34 lines
1.7 KiB
HTML

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>Code</title>
<link rel="stylesheet" href="../../assets/fonts.css">
<link rel="stylesheet" href="../../assets/base.css">
<link rel="stylesheet" id="theme-link" href="../../assets/themes/tokyo-night.css">
<link rel="stylesheet" href="../../assets/animations/animations.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.10.0/styles/tokyo-night-dark.min.css">
<script src="https://cdn.jsdelivr.net/npm/highlight.js@11.10.0/lib/core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highlight.js@11.10.0/lib/languages/javascript.min.js"></script>
<script>addEventListener('DOMContentLoaded',()=>{hljs.registerLanguage('javascript',window.hljsLangJavascript||window.hljs.getLanguage('javascript'));document.querySelectorAll('pre code').forEach(el=>hljs.highlightElement(el))})</script>
</head><body class="single">
<div class="deck"><section class="slide is-active" data-title="Code">
<p class="kicker">Snippet · 运行时核心</p>
<h2 class="h2">按一下键盘,幻灯片就跑起来了</h2>
<pre class="card mt-m" style="padding:24px"><code class="language-javascript">// runtime.js — keyboard-driven deck
function go(n) {
n = Math.max(0, Math.min(total - 1, n));
slides.forEach((s, i) => {
s.classList.toggle('is-active', i === n);
});
idx = n;
barFill.style.width = ((n + 1) / total * 100) + '%';
history.replaceState(null, '', '#/' + (n + 1));
}
document.addEventListener('keydown', (e) =&gt; {
if (e.key === 'ArrowRight' || e.key === ' ') go(idx + 1);
if (e.key === 'ArrowLeft') go(idx - 1);
if (e.key === 't') cycleTheme();
});</code></pre>
</section></div>
<script src="../../assets/runtime.js"></script>
</body></html>