MarkDown 使用总结

码上解忧铺2016-01-25 18:20:18笔记MarkDown

如果你是个经常码字的人,你肯定有所体会,码字过程一半时间用在遣词造句,一半时间则在死磕排版。那么有没有一种方法能够自动排版,且各处通用呢?
Markdown是一种轻量级的「标记语言」。是为那些经常需要码字或者进行文字排版的、对码字手速和排版顺畅度有要求的人群设计的,他们希望用键盘把文字内容打出来的同时搞定排版,最好从头到尾都不要使用鼠标。这些人最常见的是经常需要写文档的码农,另外包括博客写手、网站小编、出版业人士等等。

Markdown的特点

易写易读是Markdown语法的最大亮点,也是它为什么能提高书写效率的原因。

易写

Markdown语法十分简单,常用的标记符号不超过十个,用于日常写作记录绰绰有余,非程序员人群不到半小时完全能够掌握。但这十个不到的标记符号,却能让人优雅地沉浸式写作,专注内容而 不纠结排版,大大提高书写效率。名副其实的「码字神器」。

易读

兼顾“什么人都能打开” 和 “版样式不变”。 所谓“什么人都能打开”是指,Markdown属于兼容性极强的纯文本,可以用所有文本编辑器打开,避免了“用 Windows 的人打不开 .pages 文件”的情况发生;Markdown文本轻松可转成HTML、电子书等格式,而HTML 是整个万维网(web)的标记语言,也是目前主流电子书格式( EPUB、mobi、Kindle专有格式 .azw)所用的标记语言。人们如果采用Markdown 标注格式,对日后的文件转换工作将大有裨益。

所谓“排版样式不变”是指,在转化为富文本/HTML等格式后依然可以保留原本的排版和阅读体验。不会出现“我这篇稿子是用旧版 Word 写的,你用新版 Word 看可能格式会有点问题”的情况。

这是因为,实质上markdown的本质仍是一种基本文本,并非word等后期加工自我渲染的结果。这与html其实非常相似。但是html有几个比较明显的缺陷。比如对于非专业认识来说认知困难,另外html的过于强大和驳杂的标记也对安全造成了比较大的影响。
而Markdown实质上是html其中的几个标记的友好宏定义,使其对书写更加的便利和方便。

Markdown使用指南

标题

Markdown语法:

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
大标题
=
小标题
-

预览效果:

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

大标题

小标题

粗体、斜体

Markdown语法:

**粗体**
__粗体__
*斜体*
_斜体_

预览效果:

粗体粗体斜体斜体

分割线

Markdown语法:
---
***
~~文字删除线~~

预览效果:



文字删除线

列表

Markdown语法:

- 无序列表项目
- 无序列表项目
- 无序列表项目

* 无序列表项目
* 无序列表项目
* 无序列表项目

1. 有序列表项目
2. 有序列表项目
3. 有序列表项目

- 外层列表项目
 + 内层列表项目
 + 内层列表项目
 + 内层列表项目
- 外层列表项目

预览效果:

  • 无序列表项目
  • 无序列表项目
  • 无序列表项目
  • 无序列表项目
  • 无序列表项目
  • 无序列表项目
  1. 有序列表项目
  2. 有序列表项目
  3. 有序列表项目
  • 外层列表项目
  • 内层列表项目
  • 内层列表项目
  • 内层列表项目
  • 外层列表项目

添加超链接、图片

Markdown语法:


[MarkDown 使用](链接地址 "描述")
![MarkDown 使用](http://shbvy1zni.sabkt.gdipper.com/2016-01-25-02.jpg "描述")

[MarkDown 使用][1]
![MarkDown 使用][2]

[1]:链接地址 "描述"
[2]:链接地址 "描述"

[无链接的链接][null-link]
[null-link]: chrome://not-a-link

效果预览:

添加表格

Markdown语法:

| ABCD | EFGH | IJKL |
| -----|:----:| ----:|
| a    | b    | c    |
| d    | e    |  f   |
| g    | h    |   i  |

ABCD | EFGH | IGKL
-----|------|----
a    | b    | c
d    | e    | f
g    | h    | i

预览效果:

ABCDEFGHIJKL
abc
def
ghi
ABCDEFGHIGKL
abc
def
ghi

添加代码

Markdown语法:

`字符`(简短文字添加代码框)

`Tab`或
    四个空格(大段文字添加代码框,每行前添加)

预览效果:

字符(简短文字添加代码框)

Tab或 四个空格(大段文字添加代码框,每行前添加)

引用

Markdown语法:

> 引用的文字
> 引用的文字
> 引用的文字

---
> 引用的文字引用的文字引用的文字引用的文字引用的文字引用的文字引
用的文字引用的文字引用的文字引用的文字引用的文字引用的文字引用
的文字引用的文字引用的文字

---
> 引用的文字引用的文字引用的文字引用的文字引用的文字

---
 >> 引言内的引言引言内的引言引言内的引言

---
> 引用的文字引用的文字引用的文字引用的文字引用的文字

预览效果:

引用的文字 引用的文字 引用的文字


引用的文字引用的文字引用的文字引用的文字引用的文字引用的文字引 用的文字引用的文字引用的文字引用的文字引用的文字引用的文字引用 的文字引用的文字引用的文字


引用的文字引用的文字引用的文字引用的文字引用的文字


引言内的引言引言内的引言引言内的引言


引用的文字引用的文字引用的文字引用的文字引用的文字

单行长文字

Markdown语法:

在需要以单行长文字显示的文字两段各加三个`~`,即`~~~`

在需要以单行长文字显示的文字段落前加四个空格

预览显示:

单行长文字单行长文字单行长文字单行长文字单行长文字单行长文字单行长文字单行长文字单行长文字单行长文字单行长文字单行长文字单行长文字单行长文字

首行缩进

Markdown语法:

 缩进一个字符缩进一个字符缩进一个字符缩进一个字符缩进一个字符缩进一个字符

 缩进两个字符缩进两个字符缩进两个字符缩进两个字符缩进两个字符缩进两个字符

  缩进四个字符缩进四个字符缩进四个字符缩进四个字符缩进四个字符缩进四个字符

预览效果:

 缩进一个字符缩进一个字符缩进一个字符缩进一个字符缩进一个字符缩进一个字符

 缩进两个字符缩进两个字符缩进两个字符缩进两个字符缩进两个字符缩进两个字符

  缩进四个字符缩进四个字符缩进四个字符缩进四个字符缩进四个字符缩进四个字符

添加脚注

Markdown语法:

![添加脚注](http://upload-images.jianshu.io/upload_images/1064727-49caf145bf6c2a97.png)添加脚注

预览效果:

[1]open in new window

创建链接

为输入的URL或邮箱自动创建链接,如[email protected]
Markdown语法:

<[email protected]>

预览效果:

[email protected]open in new window

转义字符

在特殊字符,如*、[、>等前面加\可使特殊格式字符转换为正常字符打出(有序列表符号如1.,须在. 前加\)。

Markdown语法:

\\
\`
\*
\_
\{\}
\[\]
\(\)
\#
\+
\-
\.
\!

预览效果:

\ ` * _ {} [] () # + - . !

小型文本

Markdown语法:

<small>文本内容</small>

预览效果:

文本内容

样式调整

Markdown 写的表格最终会被解析成 HTML 代码,如果使用的编辑器支持自定义 CSS,就能方便的调整样式。如果可以引入 JavaScript,样式自适应也能较好地实现。

基础概念

<table>: 表格
<thead>: table header 表头区
<th>: table headings 表头单元格内容
<tbody>: table body 表格内容区
<tr>: table row 表行
<td>: table data 单元格内容

基本样式

table {
    width: 100%; /*表格宽度*/
    max-width: 65em; /*表格最大宽度,避免表格过宽*/
    border: 1px solid #dedede; /*表格外边框设置*/
    margin: 15px auto; /*外边距*/
    border-collapse: collapse; /*使用单一线条的边框*/
    empty-cells: show; /*单元格无内容依旧绘制边框*/
}

table th,
table td {
  height: 35px; /*统一每一行的默认高度*/
  border: 1px solid #dedede; /*内部边框样式*/
  padding: 0 10px; /*内边距*/
}

表头样式

table th {
    font-weight: bold; /*加粗*/
    text-align: center !important; /*内容居中,加上 !important 避免被 Markdown 样式覆盖*/
    background: rgba(158,188,226,0.2); /*背景色*/
}

隔行变色

  • 使用选择器选取复数行设置背景色。一般 Markdown 表格编译后都有 <tbody> 包裹内容,那下面就相当于从表格第二行开始计数
table tbody tr:nth-child(2n) {
    background: rgba(158,188,226,0.12);
}

悬浮变色

  • 鼠标悬浮时该行改变背景色
table tr:hover {
    background: #efefef;
}

自适应优化

表格用 Markdown 书写,编辑器解析,因而只能在已经生成好的代码上进行自适应优化。

表头不换行

  • 设置表头单元格内容不换行,这样可以通过表头控制该列的最小宽度,避免浏览器窗口缩小时内容被压缩得太紧
table th {
    white-space: nowrap; /*表头内容强制在一行显示*/
}

首列不换行

  • 表格第一列单元格内容不换行,多数情况下表格首列不应该被压缩换行
table td:nth-child(1) {
    white-space: nowrap;
}

表格滚动条

  • 添加 JavaScript 代码,用一个 <div> 把表格包裹起来,父元素宽度不足时显示横向滚动条,避免表格撑破布局
[].slice.call(document.querySelectorAll('table')).forEach(function(el){
    var wrapper = document.createElement('div');
    wrapper.className = 'table-area';
    el.parentNode.insertBefore(wrapper, el);
    el.parentNode.removeChild(el);
    wrapper.appendChild(el);
})
  • jQuery
$("table").wrap("<div class='table-area'></div>");
  • 同时添加如下 CSS
.table-area {
    overflow: auto;
}

参考资料:

在线编辑 gitbookopen in new window

新手指南 Markdown入门学习小结open in new windowMarkdown 简明教程open in new windowMarkdown語法說明(繁體中文版)open in new windowMarkdown 语法说明(简体中文版)open in new window维基百科open in new windowMarkdown词条open in new window

hexo你的博客open in new window如何搭建一个独立博客——简明Github Pages与Hexo教程open in new window

简书open in new window献给写作者的 Markdown 新手指南open in new windowLawrence Liopen in new window为什么作家应该用 Markdown 保存自己的文稿open in new window阳志平open in new window「Markdown写作浅谈」open in new windowCasa Novaopen in new window為什麼文科生也該用markdown寫作?open in new windowGnatopen in new windowMarkdown 简明教程open in new windowGnatopen in new windowMarkdown 写作规范参考open in new windowTe_Leeopen in new windowMarkdown——入门指南open in new window怀瑾握瑜open in new windowMarkdown语法纪要open in new window唐衣可俊open in new windowMarkDown使用小技巧open in new window温谦open in new window怎样使用Markdownopen in new windowLeo Chin open in new windowMarkdown 11种基本语法open in new windowEquation 85open in new windowMarkdown语法示例open in new window

Markdown 免费编辑器

在线编辑器 MaHuaopen in new windowDillinger.ioopen in new windowMarkable.inopen in new windowmarxiopen in new window

浏览器插件 MaDeopen in new window

Windows 平台 GitHub Atomopen in new windowMarkdownPadopen in new windowMarkPadopen in new window

Linux 平台 ReTextopen in new window

Mac 平台 Mouopen in new window

高级应用(Sublime Text 2 + MarkdownEditing 教程) Sublime Text 2open in new windowMarkdownEditingopen in new window教程open in new window

Last Updated 8/3/2024, 10:56:46 AM