Markdown初级教程-入门1

最新推荐文章于 2021-09-13 16:26:49 发布

最忆君浅笑

最新推荐文章于 2021-09-13 16:26:49 发布

阅读量356

点赞数

分类专栏：其它文章标签： markdown html 语言

本文链接：https://blog.csdn.net/weixin_36997726/article/details/61677015

版权

其它专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Markdown是一种轻量级的标记语言，适用于写作、博客、文档等。它语法简洁，支持标题、区块引用、列表、代码区块、链接、图片等元素。Markdown还兼容HTML，能方便地导出HTML、PDF格式，且有丰富的编辑器支持。

摘要由CSDN通过智能技术生成

1、概述

宗旨
兼容 HTML
特殊字符自动转换

2、区块元素

段落和换行
标题
区块引用
列表
代码区块
分隔线

3、区段元素

链接
强调
代码
图片

4、其它

反斜杠
自动链接
公式
Markdown 免费编辑器

一、概述

Markdown 是一种轻量级的「标记语言」，它的优点很多，目前也被越来越多的写作爱好者，撰稿者广泛使用。看到这里请不要被「标记」、「语言」所迷惑，Markdown 的语法十分简单。常用的标记符号也不超过十个，这种相对于更为复杂的HTML 标记语言来说，Markdown 可谓是十分轻量的，学习成本也不需要太多，且一旦熟悉这种语法规则，会有一劳永逸的效果。

Markdown 从写作到完成，导出格式随心所欲，你可以导出 HTML 格式的文件用来网站发布，也可以十分方便的导出 PDF 格式。
优点：

语法简洁
简单、轻量级
标签有行业标准
应用广泛(GitHub、Reddit、StackOverFlow、JianShu)
相应的工具支持很好。(pandoc、sublime Text 2)
兼容HTML。不在 Markdown 涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写。不需要额外标注这是 HTML 或是 Markdown；只要直接加标签就可以了。比如百度这种超链接。要制约的只有一些 HTML 区块元素――比如 <div>、<table>、<pre>、<p> 等标签，必须在前后加上空行与其它内容区隔开，还要求它们的开始标签与结尾标签不能用制表符或空格来缩进。
特殊字符自动转换。比如：版权符号 ©，只需写&copy

Markdown 支持两种标题的语法，类 Setext和类 atx形式。

基本语法：

二、区块元素

1、标题：

类 Setext：

This is an title

(This is an tilte ======)

This is an title

(This is an title ------)

类Atx类 Atx 形式则是在行首插入 1 到 6 个 # ，对应到标题 1 到 6 阶，例如：

H1(`#H1` )

H2(`##H2`)

H6 (`######H6`)

2、区块引用Blockquotes（`>`）

这是引用（>这是引用）

区块引用可以嵌套（例如：引用内的引用），只要根据层次加上不同数量的 > ：

This is the first level of quoting.

This is nested blockquote.

Back to the first level.

> This is the first level of quoting.
>
>> > This is nested blockquote.
>
> Back to the first level.

引用的区块内也可以使用其他的 Markdown 语法，包括标题、列表、代码区块等：

这是一个标题。

这是第一行列表项。
这是第二行列表项。

给出一些例子代码：
return shell_exec("echo $input | $markdown_script");

> ## 这是一个标题。
> 
> 1.   这是第一行列表项。
> 2.   这是第二行列表项。
> 
> 给出一些例子代码：
> 
>     return shell_exec("echo$input | $markdown_script");

3、列表（有序与无序列表）

无序列表使用星号、加号或是减号作为列表标记：

Red
Green
Blue

*   Red
*   Green
*   Blue

等同于：

+   Red
+   Green
+   Blue

也等同于：

-   Red
-   Green
-   Blue

有序列表则使用数字接着一个英文句点：
1. Bird
2. McHale
3. Parish

1.  Bird
2.  McHale
3.  Parish

在列表标记上使用的数字并不会影响输出的 HTML 结果，上面的列表所产生的 HTML 标记为：

<ol>
<li>Bird</li>
<li>McHale</li>
<li>Parish</li>
</ol>

如果你的列表标记写成：

1.  Bird
1.  McHale
1.  Parish

你都会得到完全相同的 HTML 输出。

如果列表项目间用空行分开，在输出 HTML 时 Markdown 就会将项目内容用 <p> 标签包起来，举例来说：

*   Bird
*   Magic

会被转换为：

<ul>
<li>Bird</li>
<li>Magic</li>
</ul>

但是这个：

*   Bird

*   Magic

会被转换为：

<ul>
<li><p>Bird</p></li>
<li><p>Magic</p></li>
</ul>

如果要放代码区块的话，该区块就需要缩进两次，也就是 8 个空格或是 2 个制表符：

一列表项包含一个列表区块：
```
<代码写在这>
```

*   一列表项包含一个列表区块：

        <代码写在这>

当然，项目列表很可能会不小心产生，像是下面这样的写法：

1986. What a great season.

它会显示成：

What a great season.

换句话说，也就是在行首出现数字-句点-空白，要避免这样的状况，你可以在句点前面加上反斜杠。

1986\. What a great season.

4、代码区块

和程序相关的写作或是标签语言原始码通常会有已经排版好的代码区块，通常这些区块我们并不希望它以一般段落文件的方式去排版，而是照原来的样子显示，Markdown 会用 <pre> 和 <code> 标签来把代码区块包起来。

要在 Markdown 中建立代码区块很简单，只要简单地缩进 4 个空格或是 1 个制表符就可以，例如，下面的输入：

这是一个普通段落：

    这是一个代码区块。

Markdown 会转换成：

<p>这是一个普通段落：</p>

<pre><code>这是一个代码区块。
</code></pre>

这个每行一阶的缩进（4 个空格或是 1 个制表符），都会被移除，例如：

Here is an example of AppleScript:

    tell application "Foo"
        beep
    end tell

它会显示成：
Here is an example of AppleScript:

tell application "Foo"
    beep
end tell

被转换HTML为：

<p>Here is an example of AppleScript:</p>

<pre><code>tell application "Foo"
    beep
end tell
</code></pre>

5、分割线（`***` `- - -` `--------`）

你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线：

三、区段元素

1、链接

Markdown 支持两种形式的链接语法： 行内式和参考式两种形式。

不管是哪一种，链接文字都是用 [方括号] 来标记。

要建立一个行内式的链接，只要在方块括号后面紧接着圆括号并插入网址链接即可，如果你还想要加上链接的 title 文字，只要在网址后面，用双引号把 title 文字包起来即可，例如：

这是一个百度链接:

这是一个[百度链接](http://www.baidu.com"百度")

转成HTML：

<p>这是一个 <a href="http://www.baidu.com" title="百度">
百度链接</a></p>

如果你是要链接到同样主机的资源，你可以使用相对路径：

这是一个[相对路径链接](/about/"相对路径")

这是一个相对路径链接

参考式的链接是在链接文字的括号后面再接上另一个方括号，而在第二个方括号里面要填入用以辨识链接的标记：

This is [an example][id] reference-style link.

接着，在文件的任意处，你可以把这个标记的链接内容定义出来：

 [id]: http://example.com/  "Optional Title Here"

This is an example reference-style link.

链接内容定义的形式为：

方括号（前面可以选择性地加上至多三个空格来缩进），里面输入链接文字
接着一个冒号
接着一个以上的空格或制表符
接着链接的网址
选择性地接着 title 内容，可以用单引号、双引号或是括弧包着

链接网址也可以用尖括号包起来：

[id]: <http://example.com/>  "Optional Title Here"

你也可以把 title 属性放到下一行，也可以加一些缩进，若网址太长的话，这样会比较好看：

[id]: http://example.com/longish/path/to/resource/here
    "Optional Title Here"

网址定义只有在产生链接的时候用到，并不会直接出现在文件之中。

链接辨别标签可以有字母、数字、空白和标点符号，但是并不区分大小写，因此下面两个链接是一样的：

[link text][a]
[link text][A]

隐式链接标记功能让你可以省略指定链接标记，这种情形下，链接标记会视为等同于链接文字，要用隐式链接标记只要在链接文字后面加上一个空的方括号，如果你要让 “Google” 链接到 google.com，你可以简化成：

[Google][]
然后定义链接内容：
[Google]: http://google.com/

下面是一个参考式链接的范例：

I get 10 times more traffic from [Google] [1] than from
[Yahoo] [2] or [MSN] [3].

  [1]: http://google.com/        "Google"
  [2]: http://search.yahoo.com/  "Yahoo Search"
  [3]: http://search.msn.com/    "MSN Search"

显示成：
I get 10 times more traffic from Google than from
Yahoo or MSN.

I get 10 times more traffic from [Google][] than from
[Yahoo][] or [MSN][].

  [google]: http://google.com/        "Google"
  [yahoo]:  http://search.yahoo.com/  "Yahoo Search"
  [msn]:    http://search.msn.com/    "MSN Search"

也可以产生同样的效果。

上面两种写法都会产生下面的 HTML。

<p>I get 10 times more traffic from <a href="http://google.com/"
title="Google">Google</a> than from
<a href="http://search.yahoo.com/" title="Yahoo Search">Yahoo</a>
or <a href="http://search.msn.com/" title="MSN Search">MSN</a>.</p>

参考式的链接其实重点不在于它比较好写，而是它比较好读，比较一下上面的范例，使用参考式的文章本身只有 81 个字符，但是用行内形式的却会增加到 176 个字元，如果是用纯 HTML 格式来写，会有 234 个字元，在 HTML 格式中，标签比文本还要多。

2、强调（`*` `_`）

Markdown 使用星号（*）和底线（_）作为标记强调字词的符号，被 * 或 _ 包围的字词会被转成用 <em> 标签包围，用两个 * 或 _ 包起来的话，则会被转成 <strong>，例如：

*single asterisks*

_single underscores_

**double asterisks**

__double underscores__

会转成：

<em>single asterisks</em>

<em>single underscores</em>

<strong>double asterisks</strong>

<strong>double underscores</strong>

PS:用什么符号开启标签，就要用什么符号结束。
但是如果你的 * 和 _ 两边都有空白的话，它们就只会被当成普通的符号。

如果要在文字前后直接插入普通的星号或底线，你可以用反斜线：
*this text is surrounded by literal asterisks*这里写代码片

3、代码(`)

一小段行内代码，用反引号把它包起来（`），例如：

Use the `printf()` function.

会产生：

<p>Use the <code>printf()</code> function.</p>

如果要在代码区段内插入反引号，你可以用多个反引号来开启和结束代码区段：

`` ` ``

会显示成：
`

在代码区段内，& 和尖括号都会被自动地转成 HTML 实体，这使得插入 HTML 原始码变得很容易，Markdown 会把下面这段：

Please don't use any `<blink>` tags.

转为：

<p>Please don't use any <code>&lt;blink&gt;</code> tags.</p>

如果你只想高亮语句中的某个函数名或关键字，可以使用 function_name() 实现

通常编辑器根据代码片段适配合适的高亮方法，但你也可以用 “` 包裹一段代码，并指定一种语言:

$(document).ready(function () {
    alert('hello world');
});

支持的语言：actionscript, apache, bash, clojure, cmake, coffeescript, cpp, cs, css, d, delphi, django, erlang, go, haskell, html, http, ini, java, javascript, json, lisp, lua, markdown, matlab, nginx, objectivec, perl, php, python, r, ruby, scala, smalltalk, sql, tex, vbscript, xml

也可以使用 4 空格缩进，再贴上代码，实现相同的的效果

def g(x):
    yield from range(x, 0, -1)
yield from range(x)

4、图片：

Markdown 使用一种和链接很相似的语法来标记图片，同样也允许两种样式： 行内式和参考式。

行内式的图片语法看起来像是：

![Alt text](/path/to/img.jpg)

![Alt text](/path/to/img.jpg "Optional title")

详细叙述如下：

一个感叹号！
接着一个方括号，里面放上图片的替代文字
接着一个普通括号，里面放上图片的网址，最后还可以用引号包住并加上选择性的 ‘title’ 文字。

参考式的图片语法则长得像这样：

![Alt text][id]

「id」是图片参考的名称，图片参考的定义方式则和连结参考一样：

[id]: url/to/image  "Optional title attribute"

到目前为止， Markdown 还没有办法指定图片的宽高，如果你需要的话，你可以使用普通的 <img> 标签。

四、其它

1、自动链接

Markdown 支持以比较简短的自动链接形式来处理网址和电子邮件信箱，只要是用尖括号包起来， Markdown 就会自动把它转成链接。一般网址的链接文字就和链接地址一样，例如：

<http://example.com/>

Markdown 会转为：

<a href="http://example.com/">http://example.com/</a>

2、反斜杠

Markdown 可以利用反斜杠来插入一些在语法中有其它意义的符号

\\>>\
\`>>`
\*>>*

3、公式

当你需要在编辑器中插入数学公式时，可以使用两个美元符 $$ 包裹 TeX 或 LaTeX 格式的数学公式来实现。提交后，问答和文章页会根据需要加载 Mathjax 对数学公式进行渲染。如：

$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a}. $$

显示成：

x = - b \pm b 2 - 4 a c - - - - - - - \sqrt 2 a .

$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$

$$
x \href{why-equal.html}{=} y^2 + 1
$$

显示成：

x = y 2 + 1

$x \href{why-equal.html}{=} y^2 + 1$

$$ (x+1)^2 = \class{hide}{(x+1)(x+1)} $$

显示成：

(x + 1) 2 = (x + 1) (x + 1)

$(x+1)^2 = \class{hide}{(x+1)(x+1)}$

4、Markdown 免费编辑器

Windows 平台

MarkdownPad
MarkPad

浏览器插件

MaDe (Chrome)

高级应用

Sublime Text 2 + MarkdownEditing / 教程

最忆君浅笑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Markdown初级教程-入门1

一、概述

基本语法：

二、区块元素

1、标题：

This is an title

This is an title

H1(#H1 )

H2(##H2)

H6 (######H6)

2、区块引用Blockquotes（>）

这是一个标题。

3、列表（有序与无序列表）

4、代码区块

5、分割线（*** - - - --------）

三、区段元素

1、链接

2、强调（* _）

3、代码(`)

4、图片：

四、其它

1、自动链接

2、反斜杠

3、公式

4、Markdown 免费编辑器

H1(`#H1` )

H2(`##H2`)

H6 (`######H6`)

2、区块引用Blockquotes（`>`）

5、分割线（`***` `- - -` `--------`）

2、强调（`*` `_`）