Markdown快速入门指南

前言与准备

  • 这份教程主要是在Typora编辑器中编写的,其语法是基于GIthub的。但显示效果与GIthub的有少许差异,基本上以针对GIthub,在语言上进行了修改。
  • 这份教程是基于GIthub的Markdown语法,GitHub Flavored Markdown
  • 教程仍在完善中,会继续丰富更多的内容
  • 在不同编辑器中,也许显示效果或者语法有稍许不同,耐心参考下编辑器提供的帮助文档,或者Google下
  • 边阅读边操作,可以获得即时反馈,学习效率会更高。你可以下载Typora编辑器或者打开CSDN,登陆后点击写博客,可以立刻实战,左边是Markdown语法,后边可以直接看到显示结果,还是很棒的
  • Github: Markdown快速入门指南(推荐,链接部分的有些效果无法再CSDN演示,请见谅)

如何使用

面对一份教程,往往不知道该怎么做?这份教程,目前内容还不是很多。推荐两种使用方式:

  • 将其熟悉一遍,边看边做,基本可以掌握常用的一些语法了
  • 将这份教程当作工具书,需要使用什么的时候,查阅什么。比如,需要插入图片的时候,可以从下面的目录查找如何插入图片(善用页面查找,Ctrl+F

目录

段落、换行:如何换行

标题:创建一级标题、二级标题之类的,为了让文章有主次之分,表示各部分之间的关系

引用:创建引用文字

列表:创建有序列表,就是123这样的,或者无序列表

任务列表:在文字前面有个勾选框,一般记录待办事项

代码:输入代码和代码高亮

表格:创建表格

分割线:创建分割线

链接:链接到其他文件,其他标题,或者其他网址

链接网址

相对路径:学会链接的必要知识

链接当前目录文件

链接其他目录文件

链接某一个标题

链接到某一个文件的某一个标题

插入图片

斜体

加强(加粗)

符号指示:像这样,就这样

删除线

开始

段落和换行符

段落,通常指的是一行或者多行连续的文本。

默认情况下,段落之间是以多个空行进行分隔的。我们只需要按下回车键 就可以完成段落分隔。
在这里插入图片描述

这是段落分隔

有些编辑器中,会忽略掉换行。进行换行操作的时候,可以使用Shift + 回车
在这里插入图片描述

这是换行

也许有的编辑器不支持,你可以尝试在文字后面输入两个空格
在这里插入图片描述
或者输入<br/>
在这里插入图片描述

标题

创建标题,可以在文本行的开头输入1-6个井号,#。不同个数的#,代表着标题的等级。就像在Word中,一个井号,#,代表着一级标题。两个井号,##,代表着二级标题。

注意,#后面,要空一格再输入标题

标题的显示效果以及无空格的错误示范
在这里插入图片描述
所以大家记得要加空格

引用

引用,近些年在文章中使用的越来越多了。下面的显示效果,你一定不陌生。

这是一段引用文字。

你只需要在文字前面输入>就可以(最后在>后加空格,虽然有些编辑器会帮你补全这个空格)

> 这是一段引用文字。

注意,如果回车后不想继续使用这个符号所代表的功能,再一次按下回车,如下

第一段引用

(回车后会这样,但是不想引用了,可以继续按下回车,这一行文字的引用就会消失)

列表

列表的话,分为有序列表,和无序列表。

你可以使用*或者+,-来创建无序列表。

* 这是无序列表1
+ 这是无序列表2

显示效果:

  • 这是无序列表1
  • 这是无序列表2

可以使用1.来创建有序列表,注意别少了那一点

1. 这是有序列表1
2. 这是有序列表2

显示效果:

  1. 这是有序列表1
  2. 这是有序列表2

任务列表

任务列表就是在列表前面加一个符号,来表示列表事件是否完成。一般可以用来记录待办事项。

  • 待办事项
  • 已办事项

你可以使用- [ ]- [x]来表示待办事项和已办事项。

一般情况下,任务列表钱的方框是可以交互的,你可以鼠标点击。

代码如下:

- [ ] 待办事项
- [x] 已办事项

代码块

Github显示代码块的符号与原始Markdown的有所不同。

但Github的这种方式在很多编辑器中都使用,因为相对原来的表示方式,这种表示方式比较简单

在Github中,你只需要输入``` ,然后按下 回车。除此之外,我们可以在```后面加上代码使用的语言,就会有代码高亮。

def highlight():
    print('Ok, give you the highlighting')

这一段代码可以这样写:

```python
def highlight():
    print('Ok, give you the highlighting')
```

`这个符号,在键盘的这个位置:
在这里插入图片描述
在英文状态下,输入即可。

在原始的Markdown中,使用<pre><code></code></pre>来表示代码块。在绝大多数的编辑器中都是支持的,但是使用过程相对比较麻烦。

<pre><code>
This is a code block.
</code></pre>

表格

使用表格的方法,相对有点复杂。不过也是有迹可循的。

表格一般由标题和内容组成。下图中,红色部分就是标题,蓝色部分就是内容。Markdown语言,有点仿照表格的样子。
在这里插入图片描述
表格是由横线和竖线组成的。横线和竖线,在键盘的这些位置:
在这里插入图片描述
同时,表格也是由行和列组成,我们可以用换行来表示行,那么用什么来表示列呢?

在表格中,是用竖线来表示列的。

现在,我们可以使用换行来表示行,竖线表示列,那么如何区分标题和内容呢?

Markdown是使用横线来区分标题和内容的。

所以,在Markdown中绘制表格,可以这样写:

| title 1| title 2|
|---------|---|
|content1| content2|
| content3 |content4|

显示效果是这样的:

title 1 title 2
content1 content2
content3 content4

你会发现:我写的绘制表格的源码,并不美观。横线的多少,竖线后要不要空格,这些都随意。你看,它不是照样显示嘛

但,我们平时使用表格的时候,需要左对齐之类的。

| title 1| title 2|
|:-|---:|
|content1| content2|
| content3 |content4|

使用冒号来进行左对齐,居中和右对齐。左对齐的话,将冒号放在横线的左边,居中的话,将冒号放在横线的两端,右对齐的话,将冒号放在横线的右端。

显示效果如下:

title 1 title 2
content1 content2
content3 content4

水平线(分割线)

在知乎的回答中,经常会有分割线的出现(像这样):


创建分割线,只需要输入---或者***,然后按下回车就行了

链接

链接可以指:

  • 指向一个网址,比如:github
  • 可以指向另一个文件,比如:快速开始指南
  • 可以指向这个文件的某一个标题,比如:插入图片
  • 甚至可以指向另一个文件的某一个标题,比如指向README文件中的如何使用

这些链接都有着统一的格式:

[需要创建链接的文字](链接地址)

链接文字是没有限制的,所以上面四种链接的不同,在于链接地址的不同。

链接网址

如果指向一个网址,直接在小括号中直接输入网址就可以了

比如第一个,指向一个网址,github

[github](www.github.com)

后面的三种,需要使用到路径,一般是分为绝对路径和相对路径的。

相对路径,对于文件迁移来说更加友好

相对路径

相对路径,需要找一个参照物,来进行相对比较。这个参照物就是当前文件。

比如,我们这个文件叫SpanElement.md
在这里插入图片描述
这就相当于起点,接下来我们要根据指令形式。

链接当前目录文件

如果我让你找README,你可以直接找到。(链接的文件与当前文件在同一个目录下,可以直接输入名称进行链接)。当然,我们也可以使用./,这个表示当前目录。

比如第二个,可以指向另一个文件,比如:快速开始指南

[快速开始指南](QuickStart.md)或者[快速开始指南](./QuickStart.md)

链接其他目录文件

比如,我们想获取imgs文件夹中的pig01.png/表示下一级目录。

现在我们站在这里,给我们一个pig01.png,我们拿着这个指令,四处张望,没有发现目标。

如果先告诉我们./imgsimgs,我们是可以找到imgs文件夹的。

然后我们站在imgs文件夹面前,发现如果想进去的话,还必须要一把钥匙,这个钥匙就是/。当我们进入imgs文件夹中,就可以找到pig01.png文件了。

所以可以表示为:

./imgs/pig01.png或imgs/pig01.png

链接某一个标题

比如我们想链接上一个小标题,链接其他目录文件,只要用在小括号中,在#后输入标题的名称就可以了

[链接到其他目录](#链接其他目录名称)

显示效果:

链接到其他目录

链接到某一个文件的某一个标题

只需要先链接到某一文件,然后加上#标题就行了。就是进行一个组合,但这种方式,在其他编译器中,不一定有用

比如我们想链接README.md文件中的如何使用

[如何使用](./README.md#如何使用)或[如何使用](README.md#如何使用)

显示效果:

如何使用

插入图片

插入图片,是建立在链接的基础上的。

在链接的语法基础前,加上!进行区分即可。

![自定义图片名字](图片地址)
![wechat](imgs/wechat.jpg)

显示效果:
在这里插入图片描述

斜体

在文字的两端输入*_,可以使文字变成斜体

*我要斜了*(推荐,不用切换中英文,适用面更广)
_看我斜了_

显示效果:

我要斜了
看我斜了

加强(加粗)

在文字的两端输入**__,可以使文字变成斜体

**我要粗了**(推荐,不用切换中英文,适用面更广)
__看我粗了__

显示效果:

我要粗了
看我粗了

符号指示

当我们需要强调一个符号或者一个函数的时候,可以在符号或者函数的两端使用`。

`看我不一样了`

显示效果:

看我不一样了

删除线

在文字的两端输入~~,可以在文字上添加删除线

~~我被删除了~~

显示效果:

我被删除了

如果有兴趣

公众号:「土堆碎念」
一些不成熟的想法与碎念
一些无趣,精心打造的教程
一个不知所云的人

在这里插入图片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章