使用strapdown.js解析markdown

来源：互联网发布：java异步日志系统编辑：程序博客网时间：2024/06/09 21:02

在知道markdown之前一直觉得像csdn博客这种网站页面很高大上，比如文字格式、添加代码块等，也以为很难实现，后来才知道有markdown，这样实现这些就so easy，但是我这个人还是太懒了，不想自己写markdown翻译的代码，就用了strapdown.js这个库，下面说说具体的使用

项目地址：http://strapdownjs.com/

使用很简单，在页面中引入这个库就可以了

<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>

不过由于是国外的网站，速度有时候比较慢，所以建议把js和相关css代码拷到本地使用

strapdown.js提供了多种样式，有：amelia、cerulean、cyborg、journal、readable、simplex、slate、spacelab、spacelab、spruce、superhero、united等，使用方法很简单

<!-- 替换theme属性值就可以换样式 -->

<xmp theme="readable" style="display:none;">

这是官方的例子：

<!DOCTYPE html><html><title>Hello Strapdown</title><script async src="http://c.cnzz.com/core.php"></script><xmp theme="united" style="display:none;"># Markdown text goes in here## Chapter 1Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut laboreet dolore magna aliqua. ## Chapter 2Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum.</xmp><script src="http://strapdownjs.com/v/0.2/strapdown.js"></script></html>

那么想像csdn博客一样显示代码块应该怎么办？很简单，只需要在代码前后加上```就可以了

效果是这样的

0 0