Strapdown.js 简单优雅的 Markdown 语法解释器
Strapdown.js 可以让你非常简单的创建优雅的 Markdown 文档,无需服务器端编译支持,只需要简单的复制 HTML 代码并修改标题和 Markdown 文本即可。
有些新手认为使用 Markdown 建站有个缺陷是需要服务器支持,如 jeklly 或 higridcms 等,其实并不是这样的。对只有静态空间的朋友,Strapdown.js 是一个不错的选择。
Strapdown.js 是一个简单优雅的 Markdown 语法解释器,并且带有界面效果,不需要你写 CSS 样式,只要在 HTML 页面里面写 Markdown,他就會把你写的文字解析然后在浏览器呈现出用户体验良好的布局。
使用方法
只需在 html 文件中引用 strapdown.js
,然后在 <xmp>
标签内书写 Markdown 内容即可。浏览器加载时会自动将 Markdown 渲染为 HTML。再方便不过。
<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>
特性
- 搜索引擎友好
- 跨浏览器支持
- 支持解析 Github-flavored Markdown
- 可定制主题
显示主题
从 bootswatch.com 上下载 Bootstrap 主题是很方便使用的。只引入下列主题的名字在你的 <XMP> 标签属性的主题选项中即可,默认使用 vanilla Bootstrap 主题:
托管CDN加速
为方便广大的开发者使用,Strapdown.js 提供了免下载安装的 CDN 加速位于 strapdownjs.com,如果你喜欢自己搭建开发环境,请你务必引入在 /v/<version_number>
文件夹下的所有文件,为 Strapdown.js 动态加载提供必要的样式表。
<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>
安装
通过npm安装,需要你的Node.js版本大于0.6.x和CoffeeScript构造器。在项目目录中捆绑/编译 Strapdown.js:
$ npm install $ coffee bundle <version_number>
错误修正应该在最新的版本,无需打破它。新功能或任何改变旧的行为应该进入一个分支的版本。
局限性
这是一个极少发生甚至是不可能的情况下,但由于 Strapdown.js 使用了 <XMP>
标签来包裹你的 HTML 代码,这样用户不必转义特殊 HTML 字符,所以你的文本中不能包含字符串 </XMP>
。
特别鸣谢
一切归功于以下项目成就了 Strapdown.js:
- Marked - Fast Markdown parser in JavaScript
- Google Code Prettify - Syntax highlighting in JavaScript
- Twitter Bootstrap - Beautiful, responsive CSS framework
- Bootswatch - Additional Bootstrap themes
利用 PHP 会使 Strapdown.js 更有效
使用 Strapdown.js 写 markdown 当然没有问题,存在的缺陷是整 个站点都是静态的,当博客文章多了就不方便组织。现在很多人都有动态空间,加上 PHP 一点小代码,就可以做成一个 Blog 了。
相关连接
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论