前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

高逼格写作Markdown标记详解

写在前面

如果你还不了解 Markdown 是什么,那么现在就是最好的时机去了解它,想象一下你用写文档或者说明资料的时候的场景,用txt编写是非常简洁且容易的,但是写出来的格式不够好看,使用Office软件写出来好看,但并不方便(因为你要去调整各种格式),而且对于程序员来说,用Office来插入代码段简直是一场噩梦。

那么,你的救世主来了,使用 Markdown 吧,可以让你像写 txt 一样方便,写出支持代码段、表格、插入图片、链接、甚至是数学公式,但又有着Office效果的排版,你唯一需要做的,就是记住这篇文章里列出来的这些标记方法。

虽然头条还未支持 Markdown 格式书写,但在例如简书,CSDN等平台都逐步增加了对Markdown的支持,至于使用什么工具来书写,在另一篇文章《如何快速写出高质量文档(Markdown篇)》里有讲述,如果你没有下载任何软件,那么创建一个txt文件就可以写了,最后记得把后缀改为md哦。


标记段落

这里的“段落”是指在你的文章里,显示的是一种内容的形式,比如标题,正文,图片,图表等。


标题

  • 支持2种样式使用下划线(=-)?
这是一级标题
==========

这是二级标题
----------
  • 使用井字符(#)?
# 这是一级标题 
## 这是二级标题 
###### 这是六级标题

  • 另外,你还可以在后面也加上井字符来让格式看起来更好看?
# 这是一级标题 # 
## 这是二级标题 ## 
###### 这是六级标题 ###### 

  • 效果图



段落和换行符

  • 段落是一个或多个连续的文本行,由一个或多个空行分隔。
  • 空行可以是任何形式的空行,一个换行符,若干个空格符,或者Tab制表符,任何被认为是空的字符;
  • 可以使用以下2种方式:
使用两个或多个空格结束,然后敲回车;
使用 <br /> 标记;
  • 不推荐使用无意义的换行来分隔段落,可以使用列表的方式会呈现更好的效果;


引用

  • 使用的方式借鉴了电子邮件中的格式,右尖括号(>)来包括一段文字:
> 这里是一段引用的文字
  • 显示出来的效果就是本段落标题“引用”2个字的显示效果;
  • 当引用文字特别长跨越了多行的时候,在每行开头添加一个标记符号(>);
  • 引用符号可以嵌套来使用,还可以嵌入其他Markdown标记元素,包括标题,列表,代码块等?
> ## 这是内嵌的标题 
> 
> 这是内嵌的列表 
> 1. 第一项 
> 2. 第二项 
> 
> > 内嵌的引用效果


列表

  • 支持有序和无序的两种列表
  • 无序列表可以使用以下3种方式,他们的效果是一样的

1. 使用星号(*)?

   * 第一项 
   * 第二项 
   * 第三项

2. 使用加号(+)?

  + 第一项
  + 第二项
  + 第三项

3. 使用连字符(-)?

  - 第一项 
  - 第二项 
  - 第三项
  • ?有序列表则直接使用编号后面加点(.)来表达使用编号(N.)?
  1. 第一项
  2. 第二项
  3. 第三项
  • ?特别的,这里的数字对于输出的结果并没有什么影响,如果你先写3后写1,或者都写1,结果都一样。
  • 列表从最最左边开始,最多可以缩进3个空格,但标记符号后必须跟一个或多个空格。
  • 如果列表项之间有一个空行,则显示出来的表单项会被段落标记 <p> 包裹:?
  * 第一项
    (这里至少空了一行,则表示包裹了至少一个段落, 
     它可以包裹多个段落,但每个后续的段落都必须 
     缩进4个空格,或1个制表符) 
  * 第二项
    (如果包含了一个引用效果,则>符号也要缩进)
  * 第三项 
    (如果是代码块,需要缩进2次,即8个空格或者2个
     制表符)
  • 还有一种情况,刚好你的开头是一个数字,后面是一个句号的圆点(.),会被误解转成一个有序列表,这个时候需要使用转义符(\)?
    1987\. 是一个伟大的年份
  • 效果图



表格

  • 使用竖线(|)和连字符(-)的组合来显示
  • 使用连字符分隔表格头部
   |   标题1   |   标题2   |   标题3 | 
   | --------  | --------  |---------| 
   | 行1内容 | 行1内容 | 行1内容 |
   | 行2内容 | 行2内容 | 行2内容 | 
  • ?其中的连字符需要不少于3个,而竖线并不是必须对齐的,使用一定的空格是为了整体效果的好看
  • 表格的宽度是自动适配的
  • 效果图



代码块

  • 使用3个反引号(`)来包裹一段代码,代码行的上面和下面都需要3个反引号,在上面3个反引号的后面还可以加上代码语言,使用小写字母表达
```javascript
    //实现一个加法逻辑 
    function add(num1, num2) {
            return num1 + num2; 
    }
```
  • ?显示效果:



图片

  • 使用感叹号(!),中括号([])和小括号(())的组合方式实现
 ![百度logo](https://www.baidu.com/img/logo.gif "提示") 
 ![百度logo](images\logo.gif)
  • ?其中方括号内占位文字,当图片未加载出来时显示该文字;
  • 小括号里的是图片的链接,支持2种方式:
  1. 使用网络 url 路径指向的网络图片;
  2. 使用文件路径(全路径或相对路径)指向的本地图片;
  • 使用双引号可以增加鼠标放在上面的提示效果;
  • 效果图:



链接

  • 链接的表达与图片相似,其实图片也是一种链接,去掉前面的感叹号后就是一个普通的链接了。
  • 使用中括号([])和小括号(())的组合
[点击打开百度](http://www.baidu.com "显示标题") 
  • ? 方括号中的内容是显示的文本;
  • 小括号中的内容是链接的地址;
  • 小括号链接后双引号内输入显示标题;
  • 如果你只是想显示链接的效果,而不是真的跳转到某个地址,那么可以仅使用一组方括号
  • 还可以定义文档内的链接效果?
这是一个 [链接例子][markdown] 参考效果;
[markdown]: http://daringfireball.net/projects/markdown/syntax "作者网站" 


注释

  • 使用HTML语言中的注释标记,在某些功能如(hexo)中注释有特殊的功能。
< ! -- 这一行是一行注释 -- >


公式块

  • 有些markdown软件支持公式功能,使用一对美元符号包裹起来,并输入有效的公式?
$ 
         f(x) = ax^2 + bx + c 
$


流程图

  • 有的软件还能支持流程图的效果,如下代码:
 flow
    st=>start: Start
    op=>operation: Your Operation
    cond=>condition: Yes or No?
    e=>end
    st->op->cond
    cond(yes)->e
    cond(no)->op
  • 效果图:


脚注

  • 在书写论文时,经常需要在合适的地方标注一下词语的解释,或者说明来源,此时需要脚注的效果,通过以下格式可以满足:?
 这是一个来自约翰·格鲁伯[^1]的网站 
 
 [^1]:Markdown语言的作者


任务列表

  • 任务列表,就是常用的待办事项,可以通过列表的变体来显示,只需要在无序列表后面增加空格和一个中括号即可,注意这里的中括号中间需要有空格
  - [ ] 待办事项1
  - [ ] 待办事项2


标记格式

这里的“格式”是指对文章中的内容进行了增强的效果,比如加粗,倾斜,下划线等。


加粗效果

  • 有2种方式表达加粗的强调效果
  • 使用2个星号(*)包裹,即前后4个?
 这是一个**重要**的内容。 
  • ?使用2个下划线(_)包括,即前后4个?
这也是一个__强调__的内容。 
  • ?显示效果:这是一个重要的内容。


倾斜效果

  • 有2种方式表达加粗的强调效果
  • 使用1个星号(*)包裹,即前后2个?
这是一个*引用*的内容。
  • 使用1个下划线(_)包括,即前后2个?
这也是一个_歪着_的内容。
  • 显示效果:这是一个歪着的内容。


下划线

  • 使用一组 <u> 标记来显示下划线效果,其实是使用了HTML的标记?
这是一个<u>下划线</u>的文字效果。


删除线

  • 使用2个波浪线(~)来包裹一段文字,呈现出删除线的效果?
这里显示了一段~~删除~~了的文字。


高亮效果

  • 使用1个或者2个反引号包裹起来的部分会显示出高亮的效果。?
这里有一个 `高亮` 的文字。


标记效果

  • 使用2个等号包括起来的部分可以显示出标记效果。?
这里有一个==标记==的文字。 


分割线

  • 使用以下几种方式都可以创建一条分割线
  • 使用3个或更多星号(*)
  • 使用3个或更多连字符(-)?
********** 
----------


参考内容

最后,为了方便大家记忆,在另一篇文章《如何快速写出高质量文档(Markdown篇)》里有思维导图可以更便捷的记住这些内容,这里也再贴出来一次。


发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言