前言
Markdown让我们的写作变得更加的简洁方便，不过书写markdown经常需要一个专业的markdown编辑器。但是我又想在自己的demo里面书写markdown语法然后转化成HTML怎么办?
让Strapdown.js帮助你！！！Strapdown.js使创建优雅的Markdown文档变得非常简单。无需服务器端编译。使用它来快速记录项目，创建教程，主页等。
正文
Strapdown.js官网入口
strapdown.js优点
- 搜索引擎友好
- 跨浏览器兼容（通过移动Safari，IE 8/9，Firefox，Chrome测试）
- Github风格的Markdown（表格，语法高亮等）
- 主题化
使用方法
- 在文档body底部插入strapdown.js 的script标签。
- 插入xmp标签（或textarea标签），在标签内书写markdown语法，<xmp theme="united" style="display:none;">theme是您使用的主题。
模板
<!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>
主题
Bootswatch.com的 Bootstrap主题包含在您的方便之中。只需theme在<xmp>标记中包含以下主题名称之一的属性（默认为vanilla Bootstrap）：
注意
由于strapdown.js会加载官网的主题css和其他样式文件，由于是国外的网站，加载速度堪忧，同学们可以自行下载这些文件并修改配置即可，非常简单。
CSS文件及strapdown.js源码地址
- strapdown.css
- bootstrap-responsive.min.css
- united.min.css
-
strapdown.js
下载后要将这些文件放到同一文件夹下，并修改strapdown.js 的加载CSS文件的代码：
// Stylesheets
var linkEl = document.createElement('link');
linkEl.href = originBase + '/themes/'+theme+'.min.css';
linkEl.rel = 'stylesheet';
document.head.appendChild(linkEl);
var linkEl = document.createElement('link');
linkEl.href = originBase + '/strapdown.css';
linkEl.rel = 'stylesheet';
document.head.appendChild(linkEl);
var linkEl = document.createElement('link');
linkEl.href = originBase + '/themes/bootstrap-responsive.min.css';
linkEl.rel = 'stylesheet';
document.head.appendChild(linkEl);
将每个 linkEl.href的内容改成相应的路径，如：
//Stylesheets
var linkEl = document.createElement('link');
linkEl.href = theme+'.min.css';
linkEl.rel = 'stylesheet';
document.head.appendChild(linkEl);
var linkEl = document.createElement('link');
linkEl.href = 'strapdown.css';
linkEl.rel = 'stylesheet';
document.head.appendChild(linkEl);
var linkEl = document.createElement('link');
linkEl.href = 'bootstrap-responsive.min.css';
linkEl.rel = 'stylesheet';
document.head.appendChild(linkEl);
每个CSS文件的效果不同，可自行添加修改和删除。
但是做到这儿，有同学发现，加载速度还是很慢，打开浏览器调试工具，我们会发现有个https://fonts.googleapis.com/css?family=Ubuntu的加载资源失败了，而且耗时三秒多。
在哪儿能找到他呢？打开主题文件united.min.css 第一行代码就能看到它。
将这行注释掉就行了！
至此就大功告成！希望能对同学们有帮助！
网友评论