本文最后更新于：2024年3月20日 中午
strapdown.js HTML 内嵌 Markdown 的静态解决方案
简介： 只需在 html 文件中引用strapdown.js，然后在
<![CDATA[标签内书写 Markdown 内容即可。浏览器加载时会自动将 Markdown 渲染为 HTML。再方便不过。</p>
<p><a target="_blank" rel="noopener" href="http://strapdownjs.com/">strapdown.js</a>使得基于 Markdown 编写网页极其便利：</p>
<p>只需在 html 文件中引用<code>strapdown.js</code>，然后在<code><xmp></code>标签内书写 Markdown 内容即可。浏览器加载时会自动将 Markdown 渲染为 HTML。再方便不过。</p>
<h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h2><figure class="highlight html"><table><tr><td class="gutter"><div class="code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></div></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span><br><br><span class="hljs-tag"><<span class="hljs-name">html</span>></span><br><br><span class="hljs-tag"><<span class="hljs-name">title</span>></span>Hello Strapdown<span class="hljs-tag"></<span class="hljs-name">title</span>></span><br><br><span class="hljs-tag"><<span class="hljs-name">xmp</span> <span class="hljs-attr">theme</span>=<span class="hljs-string">"united"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"display:none;"</span>></span><br><br># Markdown text goes in here<br><br>## Chapter 1<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore<br><br>et dolore magna aliqua. <br><br>## Chapter 2<br><br>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut<br><br>aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse<br><br>cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in<br><br>culpa qui officia deserunt mollit anim id est laborum.<br><br><span class="hljs-tag"></<span class="hljs-name">xmp</span>></span><br><br><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"http://strapdownjs.com/v/0.2/strapdown.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span><br><br><span class="hljs-tag"></<span class="hljs-name">html</span>></span><br></code></pre></td></tr></table></figure>
<h2 id="特性"><a href="#特性" class="headerlink" title="特性"></a>特性</h2><ul>
<li>搜索引擎友好</li>
<li>跨浏览器支持</li>
<li>支持解析 Github-flavored Markdown</li>
<li>可定制主题</li>
</ul>
<p><img src="https://s2.loli.net/2023/07/16/fhBYGJPAHjyadoI.png" srcset="/img/loading.gif" lazyload alt="8d80b65f7d8e4de5b85ffa33a79353db.png"></p>
<h2 id="项目主页"><a href="#项目主页" class="headerlink" title="项目主页"></a>项目主页</h2><ul>
<li><a target="_blank" rel="noopener" href="http://strapdownjs.com/">http://strapdownjs.com</a></li>
</ul>
</div>
<hr>
<div>
<div class="post-metas mb-3">
<div class="post-meta mr-3">
<i class="iconfont icon-category"></i>
<a class="hover-with-bg" href="/categories/Coding/">Coding</a>
<a class="hover-with-bg" href="/categories/Coding/JavaScript/">JavaScript</a>
</div>
<div class="post-meta">
<i class="iconfont icon-tags"></i>
<a class="hover-with-bg" href="/tags/JavaScript/">JavaScript</a>
<a class="hover-with-bg" href="/tags/Markdown/">Markdown</a>
<a class="hover-with-bg" href="/tags/strapdown/">strapdown</a>
</div>
</div>
<p class="note note-warning">
本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！
</p>
<div class="post-prevnext">
<article class="post-prev col-6">
<a href="/2023/07/20/python_markdown_change_html/">
<i class="iconfont icon-arrowleft"></i>
<span class="hidden-mobile">Python-Markdown将Markdown格式文本转为html</span>
<span class="visible-mobile">上一篇</span>
</a>
</article>
<article class="post-next col-6">
<a href="/2023/07/18/in_html_page_use_markdown_editor/">
<span class="hidden-mobile">在HTML页面中引用Markdown编辑器（Editor.md）</span>
<span class="visible-mobile">下一篇</span>
<i class="iconfont icon-arrowright"></i>
</a>
</article>
</div>
</div>
<!-- Comments -->
<article class="comments" id="comments" lazyload>
<head>
<script src="//cdn.jsdelivr.net/npm/@waline/client"></script>
</head>
<div id="waline"></div>
<script type="text/javascript">
Fluid.utils.loadComments('#waline', function() {
Fluid.utils.createScript('https://lib.baomitu.com/waline/2.14.8/Waline.min.js', function() {
var options = Object.assign(
{"serverURL":"https://waline.waahah.xyz","path":"window.location.pathname","placeholder":null,"meta":["nick","mail","link"],"requiredMeta":["nick"],"lang":"zh-CN","emoji":["https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo"],"dark":"html[data-user-color-scheme=\"dark\"]","avatar":"retro","avatarCDN":"https://seccdn.libravatar.org/avatar/","avatarForce":false,"wordLimit":0,"pageSize":10,"highlight":true},
{
el: '#waline',
path: window.location.pathname,
comment: true, // 评论数统计
pageview: false // 浏览量统计
}
)
new Waline(options);
wa_ccc = "waline-comment-count-container"
var i=document.getElementById(wa_ccc)
i.style.display = 'inline'
Fluid.utils.waitElementVisible('#waline .vcontent', () => {
Fluid.plugins.initFancyBox('#waline .vcontent img:not(.vemoji)');
})
});
});
</script>
<noscript>Please enable JavaScript to view the comments</noscript>
</article>
</article>
</div>
</div>
</div>
<div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
<div id="toc">
<p class="toc-header vvd_contents"><i class="iconfont icon-list"></i> 目录</p>
<div class="toc-body" id="toc-body"></div>
</div>
</div>
</div>
</div>
<!-- Custom -->
<a id="scroll-top-button" aria-label="TOP" href="#" role="button">
<i class="iconfont icon-arrowup" aria-hidden="true"></i>
</a>
<div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">搜索</h4>
<button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<input type="text" id="local-search-input" class="form-control validate">
<label data-error="x" data-success="v"
for="local-search-input">关键词</label>
</div>
<div class="list-group" id="local-search-result"></div>
</div>
</div>
</div>
</div>
<div class="col-lg-7 mx-auto nopadding-x-md">
<div class="container custom mx-auto">
<meting-js class="aplayer no-destroy" id="7455077979" server="tencent" type="playlist" order="random" fixed="true" preload="auto" mini="true" listfolded="false" autoplay="false" mutex="true"></meting-js>
</div>
</div>
</main>
<footer class="text-center mt-5 py-3" style="color: #ddd;">
<div class="footer-content">
<a href="javascript:void(0)" target="" rel="nofollow noopener"><span style="color:#ddd;" id="years"></span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/waahah/waahahSite" target="_blank" rel="nofollow noopener"><span style="color:#007bff;">无名小站</span></a> <div style="font-size: 0.85rem"> <span id="timeDate">载入天数...</span> <span id="times">载入时分秒...</span> <script src="/vvd_js/duration.js"></script> </div>
</div>
<div class="statistics">
<!-- 不蒜子统计PV -->
<span id="busuanzi_container_site_pv" style="display: block">
总访问量
<span id="busuanzi_value_site_pv"></span>
次
</span>
<!-- 不蒜子统计UV -->
<span id="busuanzi_container_site_uv" style="display: block">
总访客数
<span id="busuanzi_value_site_uv"></span>
人
</span>
</div>
<div class="statistics">
<a href="#" id="hitokoto_text"><span style="color: #DDD;" id="hitokoto"></span></a>
<script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
</div>
<div class="statistics">
<a href="https://icp.gov.moe/?keyword=20230422" target="_blank"><span style="color: #DDD;" >萌ICP备20230422号</span></a>
</div>
<!-- 备案信息 -->
<div class="beian">
<span>
<a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener">
豫ICP备2023018733号-1
</a>
</span>
<span>
<a
href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=41102502000199"
rel="nofollow noopener"
class="beian-police"
target="_blank"
>
<span style="visibility: hidden; width: 0">|</span>
<img src="/img/police_beian.png" srcset="/img/loading.gif" lazyload alt="police-icon"/>
<span>豫公网安备 41102502000199号</span>
</a>
</span>
</div>
</footer>
<!-- SCRIPTS -->
<script src="https://cdn.jsdelivr.net/npm/nprogress@0/nprogress.min.js" ></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0/nprogress.min.css" />
<script>
NProgress.configure({"showSpinner":false,"trickleSpeed":100})
NProgress.start()
window.addEventListener('load', function() {
NProgress.done();
})
</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/js/bootstrap.min.js" ></script>
<script src="/js/events.js" ></script>
<script src="/js/plugins.js" ></script>
<!-- Plugins -->
<script src="/js/local-search.js" ></script>
<script src="/js/img-lazyload.js" ></script>
<script type="text/javascript">
/*窗口监视*/
var originalTitle = document.title;
window.onblur = function(){document.title = "我藏好了哦~ 无名小站"};
window.onfocus = function(){document.title = originalTitle};
</script>
<script src="https://cdn.jsdelivr.net/npm/tocbot@4/dist/tocbot.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3/dist/jquery.fancybox.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/anchor-js@4/anchor.min.js" ></script>
<script defer src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js" ></script>
<script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2/lib/typed.min.js" ></script>
<script>
(function (window, document) {
var typing = Fluid.plugins.typing;
var title = document.getElementById('subtitle').title;
typing(title);
})(window, document);
</script>
<!-- Baidu Analytics -->
<script defer>
var _hmt = _hmt || [];
(function () {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?79876be6988867ae9c0aed3f5c7d23ef";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<!-- Google Analytics -->
<script defer>
window.ga = window.ga || function () { (ga.q = ga.q || []).push(arguments) };
ga.l = +new Date;
ga('create', 'UA-265548584-1', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- 51.la Analytics -->
<script defer type="text/javascript" src="//js.users.51.la/21618851.js"></script>
<script src="/js/yandex_send_url.js"></script>
<script src="/js/xiaoxingxing.js"></script>
<script src="//cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
<script src="/js/tag-dark-color.js"></script>
<!-- 主题的启动项 保持在最底部 -->
<script src="/js/boot.js" ></script>
<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"log":false,"model":{"jsonPath":"/live2dw/assets/assets/kesyoban.model.json"},"display":{"position":"left","width":300,"height":310},"mobile":{"show":false},"react":{"opacity":1}});</script></body>
</html>
]]>