20分钟入门markdown和emmet - 小前端

Home > List of blog posts > 20分钟入门markdown和emmet

Blogger Information

Blog 11

fans 0

comment 0

visits 5517

Special Recommendation

More>

Related recommendations

人人都应学会markdown

起源

Markdown是由约翰·格鲁伯（John Gruber）在亚伦·斯沃茨（Aaron Swartz）的帮助下开发，并在2004年发布的标记语言。其设计灵感主要来源于纯文本电子邮件的格式，目标是让人们能够使用易读、易写的纯文本格式编写文档，而且这些文档可以转换为HTML（Hyper Text Markup Language，超文本标记语言）文档。

Markdown是一种轻量级标记语言，排版语法简洁，让人们更多地关注内容本身而非排版。它使用易读易写的纯文本格式编写文档，可与HTML混编，可导出 HTML、PDF 以及本身的 .md 格式的文件。因简洁、高效、易读、易写，Markdown被大量使用，如Github、Wikipedia、简书等。~~嘿嘿嘿，这不就是和Markup唱反调吗~~

价值

大家可能也知道，排版界有一个神器，latax。它对标word排版，但没有那么多按钮让你点，所有的一切都是文本，文本话排版格式.Markdown也是类似的，全文本化，解放了程序员宝贵的双手，不用再去点可恶的鼠标了！

同时，解决了二进制文件不可读问题。是的，一篇写好的markdown文章，你可以把它扔给别人排版，如果有版本管理工具，你们就可以愉快地解决冲突了！

markdown语法

千万不要被「标记」、「语言」吓到，Markdown的语法十分简单，常用的标记符号不超过十个，用于日常写作记录绰绰有余，不到半小时就能完全掌握。

就是这十个不到的标记符号，却能让人优雅地沉浸式记录，专注内容而不是纠结排版，达到「心中无尘，码字入神」的境界。

John Gruber的原始设计文档中概述的基本语法主要是为了应付大多数情况下的日常所需元素，但对于某些人来说还不够，这就是扩展语法的用武之地。

一些个人和组织开始通过添加其他元素（例如表，代码块，语法突出显示，URL自动链接和脚注）来扩展基本语法。可以通过使用基于基本Markdown语法的轻量级标记语言，或通过向兼容的Markdown处理器添加扩展来启用这些元素。

标题

要创建标题，在单词或短语前面添加井号 (#)
# 的数量代表了标题的级别。
例如，添加三个 # 表示创建一个三级标题。用空格隔开

# 标题1
## 标题2
### 标题3

段落和换行

要创建段落，使用空白行将一行或多行文本进行分隔
不要用空格（spaces）或制表符（ tabs）缩进段落。
在一行的末尾添加两个或多个空格，然后按回车键，即可插入一个换行

第一段第一行
第一段第二行
第二段第一行
第二段第二行

强调和引用

要加粗文本，在单词或短语的前后各添加两个星号
要用斜体显示文本，在单词或短语前后添加一个星号
要同时用粗体和斜体突出显示文本，在单词或短语的前后各添加三个星号
要创建块引用，在段落前添加一个 > 符号
块引用可以包含多个段落。为段落之间的空白行添加一个 > 符号。
块引用可以嵌套。每嵌套一个段落，添加一个> 符号。

** 加粗文本 **
* 斜体文本 *
*** 粗斜体文本 ***
> 第一块：引用第一段第一行
> 第一块：引用第一段第二行
>
> 第一块：引用第二段第一行
> 第一块：引用第二段第二行

列表

要创建有序列表，在每个列表项前添加数字并紧跟一个英文句点
数字不必按数学顺序排列，但是列表应当以数字 1 起始
要创建无序列表，请在每个列表项前面添加破折号 (-)
缩进一个或多个列表项可创建嵌套列表

- 无序列表第一元素
- 无序列表第二元素
1. 有序列表第一元素
2. 有序列表第二元素
    1. 嵌套有序列表第一元素
    2. 嵌套有序列表第而元素
3. 有序列表第三元素

代码

要将单词或短语表示为代码，将其包裹在反引号 (`) 中
要创建代码块，将代码块的每一行缩进至少四个空格或一个制表符
在代码块之前和之后的行上使用三个反引号（```）创建围栏式代码块。
围栏代码块是扩展语法，但用地比较多，就写在这了。

行内代码`这是代码`
以下是围栏式代码块
```json
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}
```

表格

标题行内元素和内容行内元素用|分割开来
标题和内容之间用|—-|—-|分割开来
表格的语句上一行必须为空行，不然表格不生效

| 左对齐标题 | 右对齐标题 | 居中对齐标题 |
| :------| ------: | :------: |
| 短文本 | 中等文本 | 稍微长一点的文本 |
| 稍微长一点的文本 | 短文本 | 中等文本 |

|、-、:之间的多余空格会被忽略，不影响布局。
默认标题栏居中对齐，内容居左对齐。
内容和|之间的多余空格会被忽略，每行第一个|和最后一个|可以省略，-的数量至少有一个。

左对齐标题	右对齐标题	居中对齐标题
短文本	中等文本	稍微长一点的文本
稍微长一点的文本	短文本	中等文本

vs code安装Markdown Table插件,可以使用ctrl+shift+f快速格式化表格

链接和图片

使用尖括号可以很方便地把URL或者email地址变成可点击的链接。
链接文本放在中括号内，链接地址放在后面的括号中，链接title可选。
超链接Markdown语法代码：[超链接显示名](超链接地址 “超链接title”)
要添加图像，使用感叹号 (!), 然后在方括号增加替代文本，图片链接放在圆括号里，括号里的链接后可以增加一个可选的图片标题文本
插入图片Markdown语法代码：![图片alt](图片链接 “图片title”)。

超链接 <https://blog.ours1984.top>
发邮件 <no-reply@ours1984.top>
[这是一个链接](https://blog.ours1984.top/,"鼠标悬停提示文字")
![这是一个图片](https://pic.ours1984.top/img/20220701203016.png!shuiyin "图片悬停文字")

流程图

Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。

vs code中需要安装Markdown Preview Mermaid Support扩展启用支持

Mermaid 支持多种图表的方向，语法如下：

```mermaid
graph 方向描述
  图表中的其他语句...
```

其中“方向描述”为

用词	含义
TB	从上到下
BT	从下到上
RL	从右到左
LR	从左到右

流程图中每个文本块，包括开始、结束、处理、判断等。Mermaid 中每个节点都有一个 id，以及节点的文字。

表述	说明
id[文字]	矩形节点
id(文字)	圆角矩形节点
id((文字))	圆形节点
id>文字]	右向旗帜状节点
id{文字}	菱形节点

如果节点的文字中包含标点符号，需要时用双引号包裹起来

节点间的连线表述如下

表述	说明
>	添加尾部箭头
-	不添加尾部箭头
—	单线
—text—	单线上加文字
==	粗线
==text==	粗线加文字
-.-	虚线
-.text.-	虚线加文字

使用以下语法添加子图表

subgraph 子图表名称
    子图表中的描述语句...
end

举个例子如下

```mermaid
graph TB
    id1(圆角矩形)--普通线-->id2[矩形]
    subgraph 子图表
        id2==粗线==>id3{菱形}
        id3-.虚线.->id4>右向旗帜]
        id3--无箭头---id5((圆形))
    end
```

graph LR
    id1(圆角矩形)--普通线-->id2[矩形]
    subgraph 子图表
        id2==粗线==>id3{菱形}
        id3-.虚线.->id4>右向旗帜]
        id3--无箭头---id5((圆形))
    end

emmet加速html生成

文档结构初始化

对于html文档来说，文档类型DOCTYPE，<head>、<html>、<body>这些标签都是必须的，如果每次都手工录入的话效率很低，使用emmet就可以在空白html文档中输入!或者html:5,快速生成结构

添加类/id/文本/属性

emmet的一个强大特性，使用类CSS选择器的方式，.是生成类名，#是生成id，{}中生成文本内容，[]中可以设置属性,可以嵌套使用。

编写lab#id.class[attr="some"]{content}即可生成如下html代码

<lab id="id" class="class" attr="some">content</lab>

div是默认的标签,可以省略

嵌套和分组

emmet又一个强大的特性，也是让你写html速度起飞的关键因素。

>：子元素符号，表示嵌套的元素
+：同级标签符号
^：可以使该符号前的标签提升一行

其中^用的不多，容易让人逻辑混乱，这个时候就需要分组()来实现。

编写(p>h1+h2)+span或者p>h1+h2^span即可生成如下html代码

    <p>
        <h1>hhh</h1>
    </p>
    <span>sss</span>

重复添加相同元素

写页面的时候经常会遇到很多重复的结构用来显示数据，比如无序列表ul，如果列表项很多，手打就显得效率十分低下，好在emmet可以帮我们完美解决这个问题。

编写(div.warp>p.bar+span#foo)*2即可生成如下html代码

    <div class="warp">
        <p class="bar"></p>
        <span id="foo"></span>
    </div>
    <div class="warp">
        <p class="bar"></p>
        <span id="foo"></span>
    </div>

列表按序计数

对于列表项，经常会碰到有顺序的计数，这个时候，如果手工修改，吃力不讨好，且看我们的emmet如何大显神通。使用$来表示数字占位,如果想要两位数的序号，添加两个$$即可,依此类推

编写ul>li{item$$}*3即可生成如下html代码

    <ul>
        <li>item01</li>
        <li>item02</li>
        <li>item03</li>
    </ul>

添加@可以指定计数起始点,添加-号课倒序计数

编写ul>li{item$$@-89}*4即可生成如下html代码

    <ul>
        <li>item92</li>
        <li>item91</li>
        <li>item90</li>
        <li>item89</li>
    </ul>

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

开始学习大前端的若干问题

2022-07-01 00:40:18