MarkDown介绍

最新推荐文章于 2024-05-14 10:58:33 发布
最新推荐文章于 2024-05-14 10:58:33 发布
阅读量913 收藏 25
点赞数 18
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZXC1562307245/article/details/134621930
版权

一、MarkDown语法

1.1 基础语法

1.1.1 标题语法

MarkDown中通过单词或短语前面添加井号 (#)来标识标题，其中#的数量代表了标题的级别。

一级标题：# Heading level 1
二级标题：## Heading level 2
三级标题：### Heading level 3
四级标题：#### Heading level 4
五级标题：##### Heading level 5
六级标题：###### Heading level 6

1.1.2 段落语法

1、换行

一行的末尾添加两个或多个空格，然后按回车键创建一个新的换行(<br>)

2、字体
*斜体文本*
_斜体文本_

**粗体文本**
__粗体文本__

***粗斜体文本***
___粗斜体文本___

**注：**Markdown 应用程序在处理单词或短语中间添加的下划线上并不一致。为了实现兼容性，一般使用星号将单词或短语的中间部分加粗并以斜体显示，以示重要。

修改字体：用到HTML代码实现

<font face="黑体">我是黑体</font>
 
<font face="微软雅黑">我是微软雅黑</font>
 
<font face="STCAIYUN">我是华云彩文</font>

渲染效果：

我是黑体

我是微软雅黑

我是华云彩文

3、分割线

一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西

4、删除线

~~ [删除内容] ~~

HUAWEI.COM
GOOGLE.COM
~~BAIDU.COM~~
5、下划线

[带下划线文本] 

<u>HUAWEI.COM</u>

渲染效果：

HUAWEI.COM

6、新段落

段落后面使用一个空行来表示重新开始一个段落

1.1.3 引用语法

1、单个段落的块引用

在段落前添加一个 > 符号

> Dorothy followed her through many of the beautiful rooms in her castle.

渲染效果：

Dorothy followed her through many of the beautiful rooms in her castle.

2、多个段落的块引用

段落之间的空白行添加一个 > 符号

> Dorothy followed her through many of the beautiful rooms in her castle.
>
> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

渲染效果：

Dorothy followed her through many of the beautiful rooms in her castle.

The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

3、嵌套块引用

在要嵌套的段落前添加一个 >> 符号

> Dorothy followed her through many of the beautiful rooms in her castle.
>
>> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

渲染效果：

Dorothy followed her through many of the beautiful rooms in her castle.

The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

4、带有其它元素的块引用
> #### The quarterly results look great!
>
> - Revenue was off the chart.
> - Profits were higher than ever.
>
>  *Everything* is going according to **plan**.

渲染效果：

The quarterly results look great!
  • Revenue was off the chart.
  • Profits were higher than ever.

Everything is going according to plan.

1.1.4 列表语法

1、有序列表

创建有序列表，须在每个列表项前添加数字并紧跟一个英文句点。数字不必按数学顺序排列，但是列表应当以数字 1 起始。

1）连续有序列表

1.First item
2.Second item
3.Third item
4.Fourth item

渲染效果：

  1. First item
  2. Second item
  3. Third item
  4. Fourth item

2）非连续有序列表

1.First item
8.Second item
3.Third item
5.Fourth item

渲染效果：

  1. First item
  2. Second item
  3. Third item
  4. Fourth item

3）嵌套有序列表：

1.First item
2.Second item
3.Third item
    1.Indented item
    2.Indented item
4.Fourth item

渲染效果：

  1. First item
  2. Second item
  3. Third item
    1. Indented item
    2. Indented item
  4. Fourth item
2、无序列表

创建无序列表，请在每个列表项前面添加破折号 (-)、星号 (*) 或加号 (+) ，推挤使用破折号 (-)

- First item
- Second item
- Third item
- Fourth item

渲染效果：

  • First item
  • Second item
  • Third item
  • Fourth item
- First item
- Second item
- Third item
    - Indented item
    - Indented item
- Fourth item

渲染效果：

  • First item
  • Second item
  • Third item
    • Indented item
    • Indented item
  • Fourth item

1.1.5 代码语法

1、普通代码块

将代码块的每一行缩进至少四个空格或一个制表符

    <html>
      <head>
      </head>
    </html>

渲染效果：

<html>
  <head>
  </head>
</html>
2、围栏式代码块

在代码块之前和之后的行上使用三个反引号（```）或三个波浪号（~~~）

```
{
  "firstName": "Hua",
  "lastName": "Wei",
  "age": 35
}
```

渲染效果

{
  "firstName": "Hua",
  "lastName": "Wei",
  "age": 35
}

语法高亮：

受防护的代码块之前的反引号旁边指定一种语言

{
  "firstName": "Hua",
  "lastName": "Wei",
  "age": 35
}

1.1.6 链接语法

1、超链接

链接文本放在中括号内，链接地址放在后面的括号中，链接title可选

[超链接显示名](超链接地址 "超链接title")

这是一个链接 [Markdown语法](https://markdown.com.cn)。

渲染效果：

这是一个链接 Markdown语法。

2、网址和Email地址

使用尖括号可以把URL或者email地址变成可点击的链接

<https://google.com.cn>
<Huawei@example.com>

渲染效果:

https://google.com.cn
Huawei@example.com

3、引用类型链接

引用样式链接是一种特殊的链接，主要作用是使URL在Markdown中更易于显示和阅读

①链接的第一部分格式

引用类型的链接的第一部分使用两组括号进行格式设置：

第一组方括号：包围应显示为链接的文本

第二组括号：显示标签，该标签用于指向存储在文档其他位置的链接

[华为3M地址][1]

渲染效果：

华为3M地址

②链接的第二部分格式

  • 放在括号中的标签，其后紧跟一个冒号和至少一个空格

  • 链接的URL，可以选择将其括在尖括号中

  • 链接的可选标题，可以将其括在双引号，单引号或括号中

    [1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> "Hobbit lifestyles"

    显示效果：

1.1.7 图片语法

1、插入图片Markdown语法代码

使用感叹号 (!)， 然后在方括号增加替代文本，图片链接（路径）放在圆括号里，括号里的链接后可以增加一个可选的图片标题文本

![图片alt](图片链接 "图片title")

![沙漠中的岩石图片](/assets/img/shiprock.jpg "Shiprock")

渲染效果：

2、链接图片

给图片增加链接，将图像的Markdown 括在方括号（[ ]）中，然后将链接添加在圆括号()中

[![华为的图片](/assets/img/shiprock.jpg "Shiprock")](https://tse3-mm.cn.bing.net/th/id/OIP-C.R_uP6mpYe2mW9kRbz7-DagHaH5?pid=ImgDet&rs=1)

1.2 扩展语法

1.2.1 Markdown表格

1、创建表格

使用三个或多个连字符（—）创建每列的标题，并使用管道（|）分隔每列

| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title       |
| Paragraph   | Text        |

渲染效果：

SyntaxDescription
HeaderTitle
ParagraphText

单元格的宽度发生变化，显示效果也一样

| Syntax      | Description |
| --- | ----------- |
| Header      | Title       |
| Paragraph   | Text        |

渲染效果：

SyntaxDescription
HeaderTitle
ParagraphText

注：Markdown Tables Generator

2、对齐

可以通过在标题行中的连字符的左侧，右侧或两侧添加冒号（:），将列中的文本对齐到左侧，右侧或中心

| Syntax      | Description | Test Text     |
| :---        |    :----:   |          ---: |
| Header      | Title       | Here's this   |
| Paragraph   | Text        | And more      |

渲染效果：

SyntaxDescriptionTest Text
HeaderTitleHere’s this
ParagraphTextAnd more
3、表中转义管道字符

使用表格的HTML字符代码（&#124;）在表中显示竖线（|）字符。

| Syntax      | Description | Test Text     |
| :---        |    :----:   |          ---: |
| Header &#124;      | Title &#124;      | Here's this &#124;  |
| Paragraph   | Text &#124;       | And more &#124;     |
SyntaxDescriptionTest Text
Header |Title |Here’s this |
Paragraph |Text |And more |

1.2.2 Markdown任务列表语法

Markdown可以创建带有复选框的项目列表。在任务列表项之前添加破折号-和方括号[ ]，并在[ ]前面加上空格，要选择一个复选框，需要在方括号[x]之间添加 x

- [x] Welcom to Huawei
- [ ] Welcom to Alibaba
- [ ] Welcom to Baidu

渲染效果：

  • Welcom to Huawei
  • Welcom to Aalibaba
  • Welcom to Baidu

1.2.1 Markdown使用 Emoji 表情

1、复制和粘贴表情符号

网站：https://emojipedia.org/

😀😶‍🌫️😎

2、表情符号简码

网址：https://gist.github.com/rxaviers/7360908

二、MarkDown编辑器（Typora）

1.1 基本介绍

Typora是一款轻便简洁的Markdown编辑器，支持即时渲染技术，这也是与其他Markdown编辑器最显著的区别，即时渲染使得写Markdown就想是写Word文档一样流畅自如，不像其他编辑器的有编辑栏和显示栏。

优点:

  • 简洁美观
  • 实时预览
  • 扩展语法
  • 跨平台
  • 免费(0.11.18)

1.2 下载地址

地址：Typora官方中文网站

1.3 使用教程

1.3.1 显示行号

文件→偏好设置→Markdown箭头→代码块

样例：线程不安全的懒汉式

class Singleton { //线程不安全
    private static Singleton instance;
    private Singleton() {
        
    }
    public static Singleton getInstance() {  //调用时才实例化对象，懒汉式
        if(instance == null) {
            instance = new Singleton();
        }
        return instance;
    }
}

1.3.2 文件导出

文件→偏好设置→选择导出文件的格式

1.3.3 图床配置

参考文献

阿菜小老弟
关注
  • 18
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
行内代码
community_999的博客
06-23 1253
行内代码\n行内代码的格式很简单，只需要使用两个 ` 将代码内容包裹起来即可，比如 var foo = \'bar\'; \n缩进显示代码\n要在 Markdown 中创建代码块也很简单，只要简单地缩排 4 个空白或是 1 个 tab 就可以，例如，下面的输入：\n这是一个普通的段落:\nThis is a code block.\n\n在 Markdown 会转换成：\n```html\n这是一...
CSDN Markdown简明教程
03-31
Markdown把作者从繁杂的排版工作中解放出来，实现易读易写的文章写作，已经逐渐成为事实上的行业标准。CSDN博客支持Markdown可以让广大博友更加专注于博客内容，大赞。但是，不少博友可能对Markdown比较生疏，系列文章《Markdown简明教程》扼要介绍CSDN Markdown，本视频为系列教程的配套教程，希望可以对大家有所帮助。
CSDN版的详细MarkDown的使用教程
sakura的博客
02-10 1242
收藏下怎么使用markdown来记录笔记以及如何使用其中的新功能，比如甘特图，流程图等操作
Markdown
最新发布
m0_73807386的博客
05-14 43
Markdown语法
CSDN中Markdown语法介绍
weixin_46713695的博客
06-03 554
1.为文章添加目录，在文章开始处输入：@[TOC] 即可, 制表
【Markdown 教程】——程序员利器
wszhj_的博客
06-05 702
在日常学习编程的过程中，我们可能需要去做笔记和写博客，随着网络时代的盛行，越来越多的人选择了利用电子产品做笔记，与微软的Word相比，Markdown在使用起来要便捷很多，单一的编辑模式和简单的界面，非常「极简主义」和「极客精神」。写这篇关于Markdown教程的博客,主要是想帮助更多的刚入门编程的小伙伴快速掌握Markdown的基础语法，能对编程产生更浓厚的兴趣。🍉 如果你也迷失在了路上，对人生充满了迷惘，不要害怕，冷静下来，慢慢的自救，不断求知，让自己变得更加优秀吧！2
CSDN的Markdown编辑器的使用
KK_2018的技术博客_程序员不止是程序员
11-26 192
@[TOC](这里写自定义目录标题) # 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 **Markdown编辑器** 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 ## 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新...
Markdown介绍.pptx
04-04
Markdown是一种流行的轻量级标记语言，由约翰·格鲁伯创建，它的设计目的是使人们能够以易读易写的纯文本格式编写文档，并可方便地转换为有效的HTML或XHTML文档。Markdown吸取了电子邮件中常见的纯文本标记特征，...
Markdown介绍文档源码
06-03
Markdown的语法简洁明了，因此在程序员、博主、作家以及各种在线社区中广受欢迎。 在Markdown中，你可以通过简单的符号来实现文本格式化。例如，使用`#`号来创建标题，`*`或`_`用于斜体和粗体，`>`用于创建引用，`-...
markdown使用介绍
01-08
markdown介绍 Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。 markdown编辑器有Mou，MarkdownPad，Typora，Atom，Haroopad，SublimeText，Cmd Markdown，Byword，CuteMarkEd，...
markdown简介和语法介绍
10-25
- **标题**：Markdown支持两种标题样式，Atx和Setext，这里主要介绍Atx。使用#符号创建标题，#的数量决定标题级别，从1到6，如`# H1`，`## H2`，`###### H6`。 - **区块引用**：使用>``引用，如`> 这是一个区块引用...
impress-markdown:网页ppt--MarkDown介绍
05-21
6. `README.md` - 项目介绍和使用指南，用Markdown编写。 通过`impress-markdown`，IT专业人士可以更方便地创建出富有表现力的在线演示文稿，同时享受到Markdown带来的高效写作体验。无论是技术分享、产品介绍还是...
markdown代码
dz1905866337的博客
02-03 5207
markdown的使用说明
小白入门第一篇（markdown编辑器教程）
weixin_44314344的博客
01-30 180
小白第一篇
自定义UIPageControl 控件 一
hffugff的博客
11-08 1578
自定义UIPageControl 控件 一
Markdown 语法大全
yh4494的博客
04-12 5963
Markdown是一种轻量级标记语言，常用于撰写博客、文档、论文等。它可以让你使用易读易写的纯文本格式来编写文档，然后通过转换成有效的HTML文档进行发布。
Markdown 语法
Sigmoid
01-29 5193
基础知识：   Markdown 通过简单标记语法，使普通文本内容具有一定格式。但它本身不支持修改字体、字号与颜色等功能的。   CSDN-markdown 编辑器是其衍生版本，支持基于 PageDown ( Stack Overflow）所使用的编辑器的扩展功能（如表格、脚注、内嵌HTML、内嵌 LaTeX 等等）。 一.标题 1-2 级标题 //用3个或多个(=)和(-)表示一级和二级标题 我展示的是一级标题 === 我展示的是二级标题 --- 1-6 级标题 //用(#)号可表示 1-6 级.
Markdown绘制表格
热门推荐
FisrtBqy的博客
03-20 3万+
Markdown绘制表格 正常markdown语法： | 表头 | 表头 | 表头 | | -------- | -------- | -------- | | 行1，列1 | 行1，列2 | 行1，列3 | | 行2，列1 | 行2，列2 | 行2，列3 | | 行3，列1 | 行3，列2 | 行3，列3 | 效果图： 表头 表头 表头 行1，列1 行1，列2 行1，列3 行2，列1 行2，列2 行2，列3 行3，列1 行3，列2 行3，列3 但是无法
如何使用CSDN中的Markdown写博客——纯小白篇
影龙武的博客qq_43594119
09-08 4733
这篇博客用来学习如何使用CSDN中的Markdown写博客 在写这篇博客前，我找了很多教程，摸索了很长时间才会用这东西写博客，现在写一个教程方便像我一样的纯小白学习如何用这个Makedown写博客。 我第一次使用Markdown时干了什么？ 现在想想都好笑啊。那天我心血来潮，突然想写一篇博客，于是我激动的点击了写博客按钮，对于我这样没写过博客的纯小白来说，我以为 ...
详细介绍Markdown语法
06-02
Markdown是一种轻量级标记语言，它的语法简单易懂，可以快速的将纯文本转换成富文本格式。以下是常用的Markdown语法： 1. 标题 在Markdown中，使用#表示标题，#号的数目表示标题的级别，例如： # 一级标题 ## 二...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值