让站点支持MarkDown语法~(转)
Markdown是一种可以使用普通文本编辑器编写的标记语言，通过类似HTML的标记语法，它可以使普通文本内容具有一定的格式。Markdown的语法简洁明了、学习容易，而且功能比纯文本更强，因此有很多人用它写博客。
最近开发项目，客户也要求后台加入MarkDown编辑功能，下面就来分享一下关于MarkDown的研究成果。
考虑到有些人之前可能没了解过markdown或者关于markdown的语法已经忘了差不多了，同时也为了自己以后有个参考，所以这里就再把markdown常用的基本语法再敲一边，如果经常使用markdown的人可以直接跳过这一节。
1、MarkDown简介
Markdown 是一种轻量级的「标记语言」，它的优点很多，目前也被越来越多的写作爱好者，撰稿者广泛使用。看到这里请不要被「标记」、「语言」所迷惑，Markdown 的语法十分简单。常用的标记符号也不超过十个，这种相对于更为复杂的 HTML 标记语言来说，Markdown 可谓是十分轻量的，学习成本也不需要太多，且一旦熟悉这种语法规则，会有一劳永逸的效果。
用markdown编写完后，我们可以导出到html发布到网站或者导出pdf保存到本地，十分的方便。最重要的是markdown源文件是纯文本文件，也就是意味着可以跨平台，使用 Markdown 的优点如下：
- 专注你的文字内容而不是排版样式，安心写作。
- 轻松的导出 HTML、PDF 和本身的 .md 文件。
- 纯文本内容，兼容所有的文本编辑器与字处理软件。
- 随时修改你的文章版本，不必像字处理软件生成若干文件版本导致混乱。
- 可读、直观、学习成本低。
这里先给大家推荐一款我最喜欢的MarkDown在线编辑器，CmdMarkDown,网址为：https://www.zybuluo.com/mdeditor，大家可以先在这里学习基本语法。
2.MarkDown基本语法
1) 标题
标题是每篇文章都需要也是最常用的格式，在 Markdown 中，如果一段文字被定义为标题，只要在这段文字前加 # 号即可。
# 一级标题 //对应html标签<h1>
## 二级标题 //对应html标签<h2>
### 三级标题 //对应html标签<h3>
以此类推，总共六级标题，建议在井号后加一个空格，这是最标准的 Markdown 语法。
这里要注意的是#和后面的内容之间要有空格隔开。
2)粗体和斜体
Markdown 的粗体和斜体也非常简单，用两个 * 包含一段文本就是粗体的语法，用一个 * 包含一段文本就是斜体的语法。
*Markdow* //斜体
**Markdow** //粗体
3)分割线
分割线也比较简单，markdown语法为：
---
或者
***
4) 列表
这里的列表指的就是我们html中常用的有序列表和无序列表，及<ul>和<ol>.这里不再给出截图，大家可以自己动手实践。
其语法如下：
无序列表：
* 1 或者 - 1 或者 + 1
* 2 或者 - 2 或者 + 2
* 3 或者 - 3 或者 + 3
这里要注意的是有使用*就都是用*号，使用 '-' 就都用 '-' 号，混合使用会出错的。还有就是* 和内容之间要加一个空格。
有序列表比较简单，写法如下：
1. Item1
2. Item2
3. Item3
当然，这里前面的序号可以随便写，总之后面会得到与之相同的输出。
5）引用
如果你需要引用一小段别处的句子，那么就要用引用的格式。引用的语法就是在文字前面加 > ,如：
> 这里是引用
输出如下：
当然，不同的markdown编辑器输出的显示略有不同.
6) 超链接
超链接的写法比较特殊，但是也很好记忆，如我们加一个百度的超链接，markdown语法如下：
[百度](http://www.baidu.com)
当我们导出到html中时，就会得到一个<a>标签的输出。
如果我们要加入一张图片，其语法如下：
跟文字链接相比，也就是前面多了一个感叹号！。
7) 表格
markdown的表格我感觉写起来并不是那么简便，我们先来看一下表格的写法：
| Tables | Are | Cool |
| ------------- |:-------------:| -----:|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |显示结果如下：
这里值得注意的是第二行，|:------------:|,这里两边加冒号就是居中，如果只有一边加冒号就是哪边对齐，如Cool那一列就是右对齐。默认左对齐。
8) 代码框
程序员写东西，难免会插入一些代码，在 Markdown下实现也非常简单，只需要用两个 ` 把中间的代码包裹起来，代码的语法如下：
· -- 代码内容-- ·
注意这里的`不是单引号，而是键盘左边那个~上的`。
上面说了那么多，都是markdown的基本语法，下面我们开始说怎么让自己的网站后台支持markdown，首先，我们必须要明白一点的是，之所以在网站中可以使用markdown是因为markdown可以导出html，所以我们做的就是把markdown转换成html就ok了。
关于markdown转换成html，网上已经有开源的js库了，我们没有必要再去重复造轮子，这里我们使用开源项目showdown.js：
GitHub地址为：https://github.com/showdownjs/showdown
这个插件使用方法十分简单，使用方法如下：
最后一行代码，makeHtml()这个方法会返回导出的html代码，然后我们将其显示出来就可以了。
下面我们下载showdownjs，放到本地，写一个demo来测试一下，我们新建一个html文件，添加js引用，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>MarkDown</title>
<script type="text/javascript" src="showdown.min.js"></script>
</head>
</style>
<body> </body>
</html>
然后，我们添加一个<textare>用来输入markdown内容，再添加一个div来显示markdown的输出结果。然后，编写javascript代码，取出用户输入的内容，然后把导出的html代码显示在div中，整体页面代码如下：
<!DOCTYPE html>
<html>
<head>
<title>MarkDown</title>
<script type="text/javascript" src="showdown.min.js"></script>
</head>
<style>
body {
font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
font-size: 16px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
ul li {
line-height: 24px;
}
blockquote {
border-left:#eee solid 5px;
padding-left:20px;
}
code {
color:#D34B62;
background: #F9F2F4;
}
</style>
<body>
<div>
<textarea id="content" style="height:400px;width:600px;" onkeyup="compile()"></textarea>
<div id="result"></div> </div>
<script type="text/javascript">
function compile(){
var text = document.getElementById("content").value;
var converter = new Showdown.converter();
var html = converter.makeHtml(text);
document.getElementById("result").innerHTML = html;
}
</script>
</body>
</html>
这里我们给<textare>添加onkeyup事件，这样就可以实时的看到编辑结果了。页面运行效果如下：
这里我加了一些css样式对显示结果进行渲染，这样看起来会好看一些，大家可以根据输出的html标签，然后自己添加css样式进行渲染，这里我简单写了一下，修改了引用和代码的样式。
有一点遗憾的是，貌似这个showdownjs不支持table。
作者：雲霏霏
QQ交流群：243633526
博客地址：http://www.cnblogs.com/yunfeifei/
声明：本博客原创文字只代表本人工作中在某一时间内总结的观点或结论，与本人所在单位没有直接利益关系。非商业，未授权，贴子请以现状保留，转载时必须保留此段声明，且在文章页面明显位置给出原文连接。
如果大家感觉我的博文对大家有帮助，请推荐支持一把，给我写作的动力。
让站点支持MarkDown语法~(转)的更多相关文章
- 【Markdown】notepad++ 支持 markdown语法、预览
Notepad++中支持Markdown 最近在学习Markdown语言的使用,很想在XP主机上使用Markdown的离线编辑器,但MarkdownPad.作业部分的离线客户端都不能再XP上运行, ...
- vim 支持 markdown 语法
/************************************************************************* * vim 支持 markdown 语法 * 说明 ...
- sublime 如何安装插件实现高效输入，如何支持markdown 语法，并实时预览
啊,一直想鼓捣markdown的语法,但是配置什么的有点麻烦.不过用起来的话,真心顺手.无需考虑格式与语法点来点去影响效率, 用心去搬砖,用脚修bug 一.初识 Package Control 首先, ...
- HelloDjango 第 09 篇：让博客支持 Markdown 语法和代码高亮
作者:HelloGitHub-追梦人物 文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 为了让博客文章具有良好的排版,显示更加丰富的格式,我们使用 Markdown 语法来书 ...
- Vim安装插件支持 MarkDown 语法、实时预览等
使用 markdown-preview.vim 插件可以实时通过浏览器预览 markdown 文件 使用该插件需要 vim 支持py2/py3 安装 使用 vim-plug: 在 .vimrc 或 i ...
- 第 8 篇：内容支持 Markdown 语法，接口返回包含解析后的 HTML
作者:HelloGitHub-追梦人物 在 Django博客教程(第二版) 中,我们给博客内容增加了 Markdown 的支持,博客详情接口应该返回解析后的 HTML 内容. 来回顾一下 Post 模 ...
- markdown语法说明
1.先写一个标题 # 一级标题.相当于 <h1> ## 二级标题.相当于 <h2> ### 三级标题.相当于 <h3> #### 四级标题.相当于 <h4&g ...
- Markdown 语法总结
Markdown 语法总结 Markdown是一个神奇的语言,他比html简单,它巧妙地将内容和格式结合起来.很多平台支持Markdown语法编辑,比如github.博客园等. 下面总结一Markdo ...
- 简单说说Markdown语法
# 简单说说 MarkDown 语法 html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr ...
随机推荐
- C++模板总结
在编写含有模板的程序的时候,我还是按照一个头文件声明,一个源文件的方法来组织,结果编译的时候总出现一些很奇怪的语法问题,但程序明明是没有问题的.后来经过查阅才知道原来是因为C++编译器不支持对模板的分 ...
- LeetCode(30)-Pascal's Triangle
题目: Given numRows, generate the first numRows of Pascal's triangle. For example, given numRows = 5, ...
- shc/unshc加/解密shell脚本
一.加密软件shcshc是linux的一款加密脚本的插件东西比较安全我们可以利用wget将文件放在root目录下也可以通过sftp放在root目录也可以直接利用cd命令选择目录一切随意shc官网:ht ...
- 解决：MySQL 报错：1045 - Access denied for user 'root'@'localhost'(using password YES)
一.前言 今年疯狂迷上了开源,只要看到好的开源项目,就会不顾一切一股脑扎进去研究,五一期间发现一个很好的关于众筹的开源项目,但不巧,这个项目竟然是 PHP 写的,没学过 PHP,自然对这个开源项目毫无 ...
- java并发包分析之———AQS框架
一.什么是同步器 多线程并发的执行,之间通过某种 共享 状态来同步,只有当状态满足 xxxx 条件,才能触发线程执行 xxxx . 这个共同的语义可以称之为同步器.可以认为以上所有的锁机制都可以基 ...
- centos 5.3 安装（samba 3.4.4)
centos 5.3 安装(samba 3.4.4) 博客分类: 操作系统 Linux 随着Linux的普及,如何共享Linux下的文件成为用户关心的问题.其实,几乎所有的Linux发行套件都提供 ...
- WebRTC MCU( Multipoint Conferencing Unit)服务器调研
接触过的有licode.kurento. licode的缺陷:文档支持有限,licode的app client库只有js的 kurento的优势:文档齐全,Demo俱备,封装API比较齐全.它的主要特 ...
- PyCOn2013大会笔记
DAE的设计 By洪强宁 hongon@douban.com 3个aaS服务都不能模块化灵活组合服务 DAE的起因:代码横向拆分模块化,重用基础设施 最佳实践对新App复用 Scale SA D ...
- 帧同步（LockStep）该如何反外挂
在中国的游戏环境下,反挂已经成为了游戏开发的重中之重,甚至能决定一款游戏的生死,吃鸡就是一个典型的案例.目前参与了了一款动作射击的MOBA类游戏的开发,同步方案上选择了帧同步技术(LockStep而非 ...
- Java并发-取消与关闭
如果外部代码可以再某个操作正常完成之前就将其置入"完成"状态,那么这个操作就是可以取消的.取消的原因有:用户请求取消.有时间限制的操作.应用程序事件.错误和关闭等 中断 如果使用某 ...