Markdown文本编辑

Posted 月下美妞1314

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Markdown文本编辑相关的知识,希望对你有一定的参考价值。

Markdown入门学习小结

字数2501 阅读42497 评论29 

在遇到简书之前,我从来不知道Markdown是什么。简书所转载的阳志平所作「Markdown写作浅谈」一文中提到:

Markdown让我们专注写作,而不是关注排版。

这让我对Markdown产生了极大的兴趣,于是下决心学习它。

我首先研读了简书「献给写作者的 Markdown 新手指南」,对Markdown有了初步的认识。接着,又学习了Markdown专题以及其它网络资源当中数篇Markdown相关文章,总结了一些Markdown的常用语法。

一、通过以下文章学习Markdown

谨对以上文章作者表示感谢。



二、Markdown常用语法总结

1. 标题

Markdown语法:

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

预览效果:

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

大标题

小标题



2. 粗体、斜体

Markdown语法:

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

预览效果:

粗体
粗体
斜体
斜体



3. 分割线

Markdown语法:

---
***
~~文字删除线~~

预览效果:



文字删除线



4. 列表

Markdown语法:

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

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

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

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

预览效果:

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


5. 添加超链接、图片

Markdown语法:

[简书](链接地址)
![简书slogan](链接地址)

[简书][1]
![简书slogan][2]

[1]:链接地址
[2]:链接地址

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

效果预览:

简书

简书slogan
简书slogan

简书

简书slogan
简书slogan

无链接的链接



6. 添加表格

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
a b c
d e f
g h i
ABCDEFGHIGKL
a b c
d e f
g h i


7. 添加代码

Markdown语法:

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

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

预览效果:

字符


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


8.引用

Markdown语法:

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

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

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

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

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

预览效果:

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


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


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

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

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



9. 单行长文字

Markdown语法:

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

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

预览显示:

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


10. 首行缩进

Markdown语法:

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

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

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

预览效果:

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

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

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



11. 添加脚注

Markdown语法:

添加脚注
添加脚注

预览效果:

[1]



12. 创建链接

为输入的URL或邮箱自动创建链接,如test@domain.com。

Markdown语法:

<test@domain.com>

预览效果:

test@domain.com



13. 转义字符

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

Markdown语法:

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

预览效果:

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



14. 小型文本

Markdown语法:

<small>文本内容</small>

预览效果:

文本内容

或:

文本内容

注:小型文本的使用,需感谢简叔在其文章「千字练习的正确方式」中提供的范例。



三、Markdown语法使用中的输入法问题

1. 中英文模式转换

Markdown语法中所使用的标记字符,基本为英文输入状态下所能输入的字符,在使用Markdown进行中文写作时,往往需要频繁转换中英文状态,这一点在使用体验上确实是一点小瑕疵。
我在学习Markdown的过程中,发现简书作者user2982的文章「测试Markdown语法」也提到了相同的问题。

2. 可能的解决方案

方案一:

一般输入法的设置中,都会有自定义标点设置,在设置中可以修改在中文输入状态下某些符号的输入形式,如下图:

自定义标点
自定义标点

通过这种方式,可以把常用的Markdown标记字符设置成为中文输入状态下可以输入的形式。

方案二:

在简书作者继续海阔天空的文章「如何输入直角引号(「『』」 )?----我用的方法」当中,提到了快速输入直角引号的方法。于是我联想到,Markdown语法中常用的一些标记字符,也许同样可以使用这种方法快速输入,即在输入法的属性设置中,设置自定义短语,如下图:

自定义短语
自定义短语

例如:要设置大于号>的快速输入方式,可以在自定义短语一栏输入>,并在缩写一栏输入你希望的字母,例如你可以输入dy。这样,在下一次使用>这一字符时,便可以直接用输入法打出dy,在候选词列表的第一位就是>



结语

对于Markdown的认识,我仍在入门阶段,许多内容还只是照着葫芦画瓢。以上所总结的内容,是我在此阶段关于Markdown的学习笔记,也相当于对Markdown学习成果的一次练习。希望运用这种写作方式,保持自己的写作热情。

以上是关于Markdown文本编辑的主要内容,如果未能解决你的问题,请参考以下文章

集成 Markdown 所见即所得文本编辑器

如何使用Markdown编辑器编辑文本

HTML:Marked-js+Bootstarp简单实现Markdown文本编辑器

软输入键盘隐藏编辑文本

给vue添加一个超级好用的富文本编辑器 markdown

又一个神器!只需一行代码,纯文本秒变Markdown