使用strapdown.js解析markdown

181 阅读 0 评论 120 点赞

我是靠谱客的博主自信春天，这篇文章主要介绍使用strapdown.js解析markdown，现在分享给大家，希望可以做个参考。

在知道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 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>

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