Markdown入门

 
  约 1915 字  预计阅读 4 分钟 

Markdown入门

在通过博客记录我的学习笔记的过程中我发现Markdown这种标记语言使用十分频繁而且在GitHub里也十分通用所以我在学习完之后准备把它的教程作为我博客正式的第一篇文章。

Markdown标题

在Html5中一般是利用标签 hx 来选择使用几级标题,但是在Markdown语言中我们需要利用 # 号标记来实现。
## 二级标题

### 三级标题

#### 四级标题

以此类推需要将该文字设为几级标题就需要在前面加上多少#,除了常规的方法一级和二级标题也可以使用其他符号。

一级标题在选择的文字下面加 =====
二级标题在所选的文字下面加 —–
这样面对种种标题问题均可以迎刃而解。

Markdown段落

在写文章的过程中,文字选择的美观性以及文本的层次感对于一篇好文章来说尤为重要。

  • 字体 斜体文本 可以在需要倾斜的文字前后加 * ,也可以在文字的前后加 _ 。 粗体文本 的写法与斜体类似也是在文字前后加 * 或 _ ,只不过需要加的符号是两个。那么 粗斜体文本 应该怎么写呢?对了就应该在前后加 *** 或 ___ 。

  • 分隔线:你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线,行内不能有其他东西。你也可以在星号或是减号中间插入空格,如下就可以实现了。


  • 删除线:如果段落上的文字要添加删除线,只需要在文字的两端加上两个波浪线 ~~ 即可,实例如下:
    delete

  • 脚注:脚注是对文本的补充说明。在H5虽然很少用这类标记,但是在书写文章和博客中它可发挥着大用处。脚注的格式:

      生成一个脚注1[^footnote].
      [^footnote]: 这里是 **脚注** 的 *内容*.
    

    显示效果为

    欢迎来到我博客1

  • 段落:关于换行Markdown沿用了h5中br标签,除使用标签之还可使用行尾添加空余空格的方式换行。

    这是源文件的写法;

    1
    2
    
    这是第一行文本(它的右边多打了两个空格👉)      
    这是换行的文本
    

    这是实际显示的效果

    这是第一行文本(它的右边多打了两个空格👉)
    这是换行的文本

    或者在即将换行处连按两次回车换行:

    1
    2
    3
    
    这是第一行文本
    
    这是换行的文本(这种方式中间会产生空行)
    

    这是实际显示的效果

    这是第一行文本

    这是换行的文本(这种方式中间会产生空行)

Markdown列表

作为h5中十分重要的标记,怎么可能少了他的出现。

  • 无序列表:无序列表使用星号(*)、加号(+)或是减号(-)作为列表标记:
    • 第一项
    • 第二项
    • 第三项
  • 有序列表:有序列表使用数字并加上 . 号来表示,如:
    1. 第一项
    2. 第二项
    3. 第三项
  • 列表嵌套:只需在子列表中的选项添加四个空格即可:
    • 第一项:
      1. 第一项嵌套的第一个元素
      2. 第一项嵌套的第二个元素
    • 第二项:
      1. 第二项嵌套的第一个元素
      2. 第二项嵌套的第二个元素

Markdown链接

关于链接的写法有两种一种是将链接直接表现出来:<链接地址> 另外是将链接隐藏到指定文字当中相当于h5中的a标签:[连接名称](链接地址)两种链接如下:
http://techbear.blog.quxing.org/
这是技术熊的主页

Mrkdown图片

图片对于好的博客文章来说就犹如如虎添翼,让读者可以更容易理解文章。那么如何在Markdown里面插入图片呢?

格式:
![alt 属性文本](图片地址 "可选标题")
开头一个感叹号 !千万不能忘记了,接着一个方括号,里面放上图片的替代文字,之后一个普通括号,里面放上图片的网址,最后还可以用引号包住并加上选择性的 ‘title’ 属性的文字。

如下面这段代码

![techbear 头像](http://techbear.blog.quxing.org/images/avatar.png "techbear")  

最终显示效果为:

techbear 头像
techbear

相信大家学会了如何插入图片之后,定能给文章增色不少!但是又有读者说如果这样直接插入不能达到我想要的效果怎么办,因为Markdown还没有办法指定图片的高度与宽度,如果你需要的话,你可以使用普通的 img 标签。

Markdown表格

Markdown 制作表格使用 | 来分隔不同的单元格,使用 - 来分隔表头和其他行。在h5中我们需要利用table和tr,td等标签,略微有一些繁琐,但是在Markdown中却十分简单。Markdown 制作表格使用 | 来分隔不同的单元格,使用 - 来分隔表头和其他行。就好像自己在纸上画表格一样。
示例:

1
2
3
|foo|bar|
|-|-|
|baz|bim|

如果想要居中或是右对齐效果可以:

1
2
3
| abc | defghi |
:-: | -:
bar | baz

上述为源文件的写法,这类标签需要遵循GitHub的gfm规范,介于我的博客不支持这类标签,就不在这里演示效果了。

大家可以根据不同需要更改文字和表格大小。

Markdown代码

当你写博客的时候需要贴相关代码你应该怎么办呢?如果是段落上的一个函数或片段的代码可以用反引号把它包起来(`),例如:

printf()函数
当你想特意为代码贴出一片区块时可以使用 4 个空格或者一个制表符(Tab 键)或者利用```包裹代码。

通过上面的学习我们也了解了许多Markdown的使用方法,希望我的文章能对你有帮助!


  1. 关注我的博客不迷路哦! ↩︎