Markdown-入门指南及网站整合
Markdown-入门指南及网站整合
一.Markdown介绍
Markdown 是一种用来写作的轻量级「标记语言」，它用简洁的语法代替排版，而不像一般我们用的字处理软件 Word 或 Pages 有大量的排版、字体设置。它使我们专心于码字，用「标记」语法，来代替常见的排版格式。例如此文从内容到格式，甚至插图，键盘就可以通通搞定了。目前来看，支持 Markdown 语法的编辑器有很多，包括很多网站（例如简书）也支持了 Markdown 的文字录入。Markdown 从写作到完成，导出格式随心所欲，你可以导出 HTML 格式的文件用来网站发布，也可以十分方便的导出 PDF 格式，这种格式写出的简历更能得到 HR 的好感。甚至可以利用 七牛 这种云服务工具直接上传至网页用来分享你的文章，全球最大的轻博客平台 Tumblr，也支持使用 Mou 这类 Markdown 工具进行编辑并直接上传,同时GitHub也支持Markdown语法进行文本编辑。
下面我们可以看见官方的Markdown语法规则,不过后面我也会介绍语法规则给大家
二.Markdown编辑器
2.1 在线编辑器类
1.dillinger 漂亮强大，支持md, html, pdf 文件导出。支持dropbox, onedrive，google drive, github. 来自国外，可能不够稳定.
2.简书 一个非常不错的博客平台，每几秒钟便会自动存入一个备份。可以直接从本地拖入照片生成链接，一直在不断优化。作为一个博客平台，需要注册账号后方能进行写作.
2.2 Chrome插件类
1.Marxico中文名马克飞象，因为印象笔记不支持Markdown，而这款可以直接把文本存到印象笔记的编辑器对于重度印象笔记用户是个不错的选择。付费软件，可以免费试用。
2.3 Windows平台
1.MarkdownPad一款全功能的编辑器，被很多人称赞为windows 平台最好用的markdown编辑器.
2.4 Mac OS平台
1.Mou这款免费且十分好用的 Markdown 编辑器，它支持实时预览，既左边是你编辑 Markdown 语言，右边会实时的生成预览效果，笔者文章就是 Mou 这款应用写出来的。
2.5 Linux 平台
1.Remarkable是Linux平台用的Markdown编辑器,支持PDF,Html等相关文档的生成.
当然很多文本编辑器提供了对Markdown插件的集成,如Sublime Test,可以自己安装支持Markdown插件
本模块借鉴了:
三.Markdown语法
3.1 标题
标题是每一篇文章都需要也是最常用的文本格式,Markdown提供了很好的语法支持:
# 一级标题
## 二级标题
### 三级标题
.…
显示效果如下
一级标题
二级标题
三级标题
Markdown共有六级标题,建议在井号后面添加一个空格,这是标准的Markdown语法.
3.2 列表
学过Html的同学都知道列表分为 有序列表 和 无序列表. 在Markdown中,列表的显示只需要在文字前加上 * 即可.
无序列表写法如下:
* 1
* 2
Tab + * 2.1
* 3
无序列表显示如下
- 1
- 2
- 2.1
- 3
有序列表写法如下:
\1. 1
\2. 2
Tab + \1. 2.1
\3. 3
有序列表显示如下
- 1
- 2
- 2.1
- 3
* 或者 1. 与文字之间要有空格
3.3 文本粗体与斜体的控制
Markdown语法也支持文本粗体与斜体的控制
实现粗体的写法:
** 粗体文本 **
显示如下:
粗体文本
实现斜体的写法:
* 斜体文本 *
显示如下:
斜体文本
3.4 代码框的实现(也就是Html里的<code>标签)
代码框实现的写法:只需要用两个`(~线的按钮)把中间的代码包裹起来就好了
` #include <iostream\> `
显示如下
#include<iostream>
3.5 引用的实现
如果你需要引用一小段别处的句子,或者需要到引用的格式,可以这样写
> 这是引用
显示如下:
这是引用
3.6 Html里的<pre>标签的实现
<pre>标签可以格式化显示文本,Markdown只需要这样做即可实现<pre>标签的样式显示
<pre>标签,Markdown实现只需要在文本前输入4个空格或者1个制表符(Tab键)
(Tab +) 测试文本
效果如下
测试文本
3.7 分割线
Markdown中实现了分割线的显示.语法中只要单独一行输入3个*即可出现Html里的<hr />
测试分割线
***
显示效果
3.8 Markdown语法中还支持对图片的插入与连接的插入
连接插入
插入连接的格式[连接显示文本](连接Url)
测试连接文本
[GC博客](http://int32.me)
显示结果
图片插入
插入图片跟插入连接的格式特别相似,只需要在插入连接的方式前加 ! 即可
插入图片测试
显示结果
本部分内容仅仅是写了Markdown常用的语法,其中中划线,表格等特殊的语法并不是所有的Markdown编辑器都能支持,所有不再叙述. 本部分借鉴Te_Lee的Markdown-入门指南
四.网站整合Markdown
既然Markdown这么好用,可以在无格式文本编辑器里写出Word 或 Pages 的排版、字体设置,能使我们专心于码字.那么你的网站是不是也想整合Markdown来显示你的文本呢? 下面,我们来学习如果在网站上整合Markdown.
- 如何整合Markdown?
整合Markdown其实就是在文本显示页面增加Markdown解释器,将符合Markdown语法的文本解释成Html标签, 以此来实现文本多彩的显示.
-
如何在文本显示页面添加Markdown解释器?
- 首先,你应该去下载解释器showdown.js
- 在你的文本显示页面引入该js文件
-
js代码框里添加如下代码:
var converter = new showdown.Converter(), text = '你想显示的符合Markdown格式的文本', html = converter.makeHtml(text);
经过上面的转换,变量html里面装的则是经过Markdow解释器showdown.js解释的文本了.直接将该变量的值显示出来即可
下面是一段测试代码
<!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>
本部分借鉴雲霏霏 的让你的站点也支持MarkDown
本片文章到此已经对Markdown的相内容介绍完毕了,你是不是也心动了呢?赶快让你的网站支持Markdown吧…
本片内容为GC纯手敲的,其中的部分内容借鉴了一些大神们的博客,也在内容中标注出来了.再次感谢这些大神提供的资源共享.
文章中避免不了错误的出现,如果有读者发现文章中的错误,或者有疑问的地方,请留言/Email To Gc
请转发OR复制的同学,标注出处,尊重作者劳动成果,谢谢亲
博客迁移自 GC-CSDN