一：介绍 官方文档
1 2 Strapdown.js使创建优雅的Markdown文档变得非常简单。无需服务器端编译。使用它可以快速记录您的项目，创建教程，主页等。（例如，您正在阅读的页面是由Strapdown生成的）。 只需复制下面的HTML模板并将其放在任何静态文件服务器上：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!DOCTYPE html> <html> <title>Hello Strapdown</title> <xmp theme="united" style="display:none;"> # Markdown text goes in here ## Chapter 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ## Chapter 2 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </xmp> <script src="http://strapdownjs.com/v/0.2/strapdown.js"></script> </html>
二：特性
搜索引擎友好
跨浏览器兼容（已通过移动Safari，IE 8/9，Firefox，Chrome测试）
Github风格的Markdown（表格，语法突出显示等）
主题化的
三：主题 为了方便起见，包含了bootswatch.com 的 Bootstrap主题。只需theme将
<![CDATA[标签中的属性包含以下主题名称之一即可（默认值为Vanilla Bootstrap）：<br>如: <xmp theme="spacelab" style="display:none;"></p>
<p><img src="https://static.tohours.com/jren/20191116/1573879063.png" alt="1573879063.png"></p>
</div>
<!--文末结束语-->
<div style="text-align:center;color: #ccc;font-size:24px;"> <div style="color:#00968C;font-size:20px;padding-bottom:20px;">*************感谢您的阅读*************</div> </div>
<!--页脚广告-->
<div class="mdui-divider"></div>
<nav>
<a rel="prev" class="post-nav-item mdui-float-left" href="/2019/11/24/%E5%89%8D%E7%AB%AF/%E5%93%8D%E5%BA%94%E5%BC%8F%E7%9A%84%E4%BC%81%E4%B8%9A%E5%AE%98%E7%BD%91%E6%A8%A1%E6%9D%BF/">
<i class="iconfont icon-angle-left"></i>
<span>响应式的企业官网模板</span>
</a>
<a rel="next" class="post-nav-item mdui-float-right" href="/2019/11/15/java/%E6%95%B0%E6%8D%AE%E5%BA%93/mysql/mysql%20JDBC%E5%87%BA%E7%8E%B0The%20server%20time%20zone%20value%20%E2%80%98%C3%96%C3%90%C2%B9%C3%BA%C2%B1%C3%AA%C3%97%C2%BC%C3%8A%C2%B1%C2%BC%C3%A4%E2%80%99%20is%20unrec%E9%97%AE%E9%A2%98/">
<span>mysql JDBC出现The server time zone value ‘Öйú±ê׼ʱ¼ä’ is unrec问题</span>
<i class="iconfont icon-angle-right"></i>
</a>
</nav>
</article>
<div class="toc-button" style="z-index: 100;">
<button class="mdui-fab mdui-ripple mdui-color-indigo" mdui-menu="{target: '#toc'}"><i class="iconfont icon-list"></i></button>
<ul class="mdui-menu" id="toc">
<li class="mdui-menu-item">
<a href="/2019/11/16/markdown/Strapdown.js%E4%BC%98%E9%9B%85%E7%9A%84%E5%88%9B%E5%BB%BAmarkdown/" id="toc-header" class="mdui-ripple">文章目录</a>
<ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%80%EF%BC%9A%E4%BB%8B%E7%BB%8D"><span class="toc-number">1.</span> <span class="toc-text">一：介绍</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%8C%EF%BC%9A%E7%89%B9%E6%80%A7"><span class="toc-number">2.</span> <span class="toc-text">二：特性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%89%EF%BC%9A%E4%B8%BB%E9%A2%98"><span class="toc-number">3.</span> <span class="toc-text">三：主题</span></a></li></ol>
</li>
</ul>
</div>
</main>
<footer id="footer" class="mdui-text-center mdui-m-t-5 mdui-p-b-2 mdui-p-t-4 mdui-color-theme">
<div class="mdui-container">
<!-- 备案号 -->
<div class="mdui-row">
豫ICP备16027737号
</div>
<!-- 时间和作者 -->
<div class="mdui-row">
<a href="https://beian.miit.gov.cn" rel="noopener" target="_blank"></a>
<span>
© 2018 - 2025
<span style="color:#d9333f" class="iconfont icon-heart"></span>
RenJie
</span>
</div>
<!-- 注释
<div class="mdui-row">
<div class="mdui-col-xs-6 mdui-text-right">
<span>Powered by <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a></span>
</div>
<div class="mdui-col-xs-6 mdui-text-left">
<span>Theme: <a href="https://github.com/kb1000fx/Meadow" rel="noopener" target="_blank">Meadow</a></span>
</div>
</div>
-->
<!-- 访问的PV和UV -->
<div class="mdui-row">
<div class="mdui-col-xs-6 mdui-text-right">
<span id="busuanzi_container_site_uv" style="display: none;"> <span class="iconfont icon-user"></span>总访客量 <span id="busuanzi_value_site_uv"></span></span>
</div>
<div class="mdui-col-xs-6 mdui-text-left">
<span id="busuanzi_container_site_pv" style="display: none;"> <span class="iconfont icon-eye"></span>总访问量 <span id="busuanzi_value_site_pv"></span></span>
</div>
</div>
</div>
</footer>
<!-- 微信分享 -->
<script type="text/javascript" src="//static.tohours.com/jren/js/jweixin-1.4.0.js"></script>
<script type="text/javascript" src="//static.tohours.com/jren/source/blog_resources/miho/jquery.min.js"></script>
<script type="text/javascript" src="//static.tohours.com/jren/source/blog_resources/share_blog.js"></script>
<!-- code增加复制按钮 start -->
<style>
.copy-btn {
display: inline-block;
padding: 6px 12px;
font-size: 13px;
font-weight: 700;
line-height: 20px;
color: #333;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-color: #eee;
background-image: linear-gradient(#fcfcfc, #eee);
border: 1px solid #d5d5d5;
border-radius: 3px;
user-select: none;
outline: 0;
}
.highlight-wrap .copy-btn {
transition: opacity .3s ease-in-out;
opacity: 0;
padding: 2px 6px;
position: absolute;
right: 4px;
top: 8px;
}
.highlight-wrap:hover .copy-btn,
.highlight-wrap .copy-btn:focus {
opacity: 1
}
.highlight-wrap {
position: relative;
}
</style>
<script>
$('.highlight').each(function (i, e) {
var $wrap = $('<div>').addClass('highlight-wrap');
$(e).after($wrap);
$wrap.append($('<button>').addClass('copy-btn').append('复制').on('click', function (e) {
var code = $(this).parent().find('.code').find('.line').map(function (i, e) {
return $(e).text();
}).toArray().join('\r\n');//增加换行符
var ta = document.createElement('textarea');
document.body.appendChild(ta);
ta.style.position = 'absolute';
ta.style.top = '0px';
ta.style.left = '0px';
ta.value = code;
ta.select();
ta.focus();
var result = document.execCommand('copy');
document.body.removeChild(ta);
if(result){
$(this).text('复制成功');
}else{
$(this).text('复制失败');
}
$(this).blur();
})).on('mouseleave', function (e) {
var $b = $(this).find('.copy-btn')
setTimeout(function () {
$b.text('复制')
}, 300)
}).append(e)
})
</script>
<!-- code增加复制按钮 end -->
<button id="gotop" class="mdui-fab mdui-fab-fixed mdui-fab-hide mdui-ripple mdui-color-indigo" style="z-index:100;"><i class="iconfont icon-arrowup"></i></button>
<script async src="//static.tohours.com/jren/source/blog_resources/busuanzi.pure.proxy.mini.js"></script>
<script src="https://static.tohours.com/jren/source/blog_resources/mermaid-8.4.8/dist/mermaid.min.js"></script>
<script>mermaid.initialize({
startOnLoad: true,
theme: "default"
});</script>
<script src="/js/mdui.min.v1.0.0.js"></script>
<script src="/js/meadow.js"></script>
</body>
</html >]]> 