柚子快报邀请码778899分享:其他 MD文本编辑器使用

http://yzkb.51969.com/

快捷方式

1、标题

1.1、Markdown格式文本

## 标题2 ##

### 标题3 ###

#### 标题4 ####

##### 标题5 #####

###### 标题6 #######

OR

Ctrl+1

Ctrl+2

Ctrl+3

Ctrl+4

Ctrl+5

Ctrl+6

1.2、显示效果

2、列表

2.1、 无序列表

2.1.1、Markdown格式文本

+ a

+ b

+ c

- d

- e

- f

* g

* h

* i

2.1.2、显示效果

abc

def

ghi

2.2 、嵌套列表

2.2.1、Markdown格式文本

无序

+ a

+ a1

+ a2

+ ba

+ c

有序

1. a

1. adac

1. adaw

2. adfsda

2. ad

3. sad

2.2.2、显示效果

无序

a

a1a2 bac

有序

a

adac

adaw adfsda adsad

3、引用快

3.1、行引用

3.1.1、Markdown格式文本

行引用

> adsadfafadfae aef ae

a ef a fae q3ef

3.1.2、显示效果

引用

adsadfafadfae aef ae a ef a fae q3ef

3.2、嵌套引用

3.2.1、Markdown格式文本

嵌套引用

> awd aw

>> a

3.2.2、显示效果

嵌套引用

awd aw

a

4、代码块

4.1、Markdown格式文本

代码块

`

adaawf

`

多行代码块儿

​```

adaawfwrfwr

​```

多行代码块设置语言

​```sql

SELECT current_date;

​```

4.2、显示效果

代码块 adaawf 多行代码块儿

adaawfwrfwr

多行代码块设置语言

SELECT current_date;

5、链接

5.1、Markdown格式文本

//链接

[百度1](www.baidu.com)

5.2、显示效果

//链接 百度1

6、图片

6.1、Markdown格式文本

![图片](https://note.youdao.com/favicon.ico)

6.2、显示效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HQnCSW8u-1675302333647)(null#pic_left)]

6.3 粘贴图片设置

3.1 设置文件夹

3.2 打开偏好设置

3.3 设置图像

保存后文件自动保存到picture文件夹中

7、分割线

7.1、Markdown格式文本

分割线

---

- - -

-------

*****

* * *

____

7.2、显示效果

分割线

8、表格

8.1、Markdown格式文本

表格

|123|234|345|

|:-|:-:|-:|

|abc|bcd|cde|

|abc|bcd|cde|

|abc|bcd|cde|

|abc|bcd|cde|

|abc|bcd|cde|

//例子二

|123|234|345|

|:---|:---:|---:|

|abc|bcd|cde|

|abc|bcd|cde|

|abc|bcd|cde|

//例子三

123|234|345

:-|:-:|-:

abc|bcd|cde

abc|bcd|cde

abc|bcd|cde

8.2、显示效果

表格

123234345abcbcdcdeabcbcdcdeabcbcdcdeabcbcdcdeabcbcdcde

//例子二

123234345abcbcdcdeabcbcdcdeabcbcdcde

//例子三

123234345abcbcdcdeabcbcdcdeabcbcdcde

9、复选框

9.1、Markdown格式文本

- [ ] 复选框

- [x] 选中状态

9.2、显示效果

复选框 选中状态

10、换行

本行后边加两个空格

11、其他

11.1、Markdown格式文本

//斜体

*md*

//粗体

**md**

//斜体

_md_

//斜体

__md__

//转义

\+

//删除线

~~删除~~

11.2、显示效果

//斜体 md

//粗体 md

//斜体 md

//斜体 md

//转义

+

//删除线

删除

文本样式

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

Markdown语法过于简洁,因此没有更改文本字体、字体大小、字体颜色的语法。但支持与HTML混编,使用HTML语法来改变字体、字体大小、字体颜色等。下面详细讲解一些。

1、Markdown现有的文本样式。

由表中可以看到 Markdown 仅支持 斜体、加粗、标记、删除、粉色五类文本样式,下面介绍HTML的 font 标签,使编写的Markdown格式文本支持修改字体、改字体大小、改字体颜色。

2、HTML的font标签-改字体、字体颜色、字体大小。

讲这个标签前,先看下面的 Markdown 格式文本及显示效果

2.1、Markdown格式文本

这是宋体

这是楷体

This is courier New

这是红色宋体

这是蓝色楷体

This is LightSeaGreen courier New

这是默认字体

这是红色4号宋体

这是蓝色5号楷体

This is LightSeaGreen courier New size 6

2.2、显示效果

这是宋体 这是楷体 This is courier New

这是红色宋体 这是蓝色楷体 This is LightSeaGreen courier New

这是默认字体 这是红色4号宋体 这是蓝色5号楷体 This is LightSeaGreen courier New size 6

2.3、font标签解释

从2.1、Markdown格式文本可以看到font标签的基本应用及格式,font标签主要有三个属性face、color、size分别用来设置文本的字体、颜色、大小。这三个属性可以单个地使用,如果对使用不清楚的,可以把2.1、Markdown格式文本内容复制到markdown编辑器,然后自己修改着看看。

注意: 选择的字体,要markdown编辑器支持的,如果太罕见的字体可能会没有而显示默认的字体 字体颜色可以是英文表示的,也可以是#后面加rgb值表示,颜色和rgb值的可以参考颜色码对照表 字体大小只有1到7总共7个字号可以选择

3、HTML的mark标签-标记文本

markdown本身也有标记文本的语法,这里再提供一种内嵌html的写法,供读者对比使用。

3.1、Markdown格式文本

这是正常文本

==这是 markdown 的标记文本==

这是 HTML 的标记文本

3.2、显示效果

这是正常文本 这是 markdown 的标记文本 这是 HTML 的标记文本

4、HTML的strong标签-加粗文本

markdown本身也有加粗文本的语法,这里再提供一种内嵌html的写法,供读者对比使用。

4.1、Markdown格式文本

这是正常文本

**这是 markdown 的加粗文本**

这是 内嵌HTML 的加粗文本

4.2、显示效果

这是正常文本 这是 markdown 的加粗文本 这是 内嵌HTML 的加粗文本

5、HTML的em标签-斜体文本

markdown本身也有斜体文本的语法,这里再提供一种内嵌html的写法,供读者对比使用。

5.1、Markdown格式文本

这是正常文本

**这是 markdown 的斜体文本**

这是 内嵌HTML 的斜体文本

5.2、显示效果

这是正常文本 这是 markdown 的斜体文本 这是 内嵌HTML 的斜体文本

6、HTML的del标签-删除文本

markdown本身也有删除文本的语法,这里再提供一种内嵌html的写法,供读者对比使用。

6.1、Markdown格式文本

这是正常文本

~~这是 markdown 的删除文本~~

这是 内嵌HTML 的删除文本

6.2、显示效果

这是正常文本 这是 markdown 的删除文本 这是 内嵌HTML 的删除文本

7、HTML的big、small标签-加大、减小字号

前面 2.HTML的font标签 介绍了怎样改字体大小,这里再介绍另一种写法,供读者对比使用。使用big标签字号比默认的大一号,使用small标签使字号比默认小一号

7.1、Markdown格式文本

这是比默认字号小一号的文本

这是默认字号文本

这是比默认字号大一号的文本

7.2、显示效果

这是比默认字号小一号的文本 这是默认字号文本 这是比默认字号大一号的文本

8、HTML的font、mark、strong、em、del、big、small混合使用

上面介绍的几个标签还可以混合使用,主要使用方式是在font标签前面加上其他标签,可以结合下面文本自己练习看看。

8.1、Markdown格式文本

这是默认字体

这是道奇蓝色courier New字体

这是高亮的道奇蓝色courier New字体

这是高亮加粗的道奇蓝色courier New字体

这是高亮加粗大一号的道奇蓝色courier New字体

这是高亮加粗大一号斜体的道奇蓝色courier New字体

8.2、显示效果

这是默认字体 这是道奇蓝色courier New字体 这是高亮的道奇蓝色courier New字体 这是高亮加粗的道奇蓝色courier New字体 这是高亮加粗大一号的道奇蓝色courier New字体 这是高亮加粗大一号斜体的道奇蓝色courier New字体

实现页内跳转

Markdown 的基础语法中并没有页内跳转的相关知识点,而Markdown可以与HTML混编,所以可以使用 HTML 的语法来实现页内跳转。总共就两个步骤:①在要跳达的地方创建锚点;②在文章中引用锚点。

一、创建锚点

锚点:是在文章中的某个位置做标记。如果将一篇文章比作一条有多户人家的巷子,创建锚点就好比是给其中一户人家安装门牌号。

在HTML中,可以用id来定义位置,所以创建锚点就是创建一个id,语法如下:

这里是创建了一个id="article_top" 的标签。

二、引用锚点

创建完锚点后,就相当于在文章的某个位置做了个标记,有了这个标记就可以使用 markdown 的语法(创建链接)引用这个位置,从而实现页内跳转。引用锚点本质上就是创建一个指向锚点的链接。语法如下:

[链接名称](#锚点id)

链接名称:是自己想定义的任何名称或描述,一般根据文章上下文确定。 锚点id:就是已经定义的锚点id。

注意: 锚点id前面还有一个#号。 锚点可以定义在文章的任意一行,引用锚点的链接也可以定义在文章任意位置。

三、实例讲解

下面给出了一份 Markdown 格式的文章,可以直接复制到Markdown编辑器去看看显示效果。 同时在3.2 显示效果也给出了 3.1 的文章对应的显示效果。

3.1 Markdown 格式文章

文章顶部

标题:Markdown 怎么实现页内跳转的

内容:

一、创建锚点

二、引用锚点

三、实例讲解

总结:

一、xxx

二、xxx

三、xxx

[回到顶部](#article_top)

如果不太懂,可以直接看[实例讲解](#example),把 Markdown 格式文章结合显示效果研究一下。

3.2 显示效果

文章顶部

文章顶部

标题:Markdown 怎么实现页内跳转的

内容:

一、创建锚点

二、引用锚点

三、实例讲解

总结:

一、xxx

二、xxx

三、xxx

回到顶部

如果不太懂,可以直接看实例讲解,把 Markdown 格式文章结合显示效果研究一下。

3.3 讲解

3.1 Markdown 格式文章中定义了2个锚点:锚点1(id=“article_top”)定义在文章顶部的前面;锚点2(id=“example”)定义在实例讲解的前面。同时文章也设置了两个引用锚点的链接:第一个链接是倒数第二行的回到顶部,引用了文章顶部的锚点;第二个链接是倒数最后一行的实例讲解,引用了实例讲解的锚点。在阅读文章时点击这2个链接时,会跳转到对应的锚点位置。

插入图片对齐方式

一、MD编辑器插入图片的方式:

不同的markdown编辑器可能有不同的显示效果,下面介绍的是CSDN的MD编辑器。 它插入图片语法:![图片描述](图片链接)

1.1 图片对齐方式

MD编辑器直接点图片按钮插入图片的方式就是居中对齐的,按图片的实际尺寸显示,这是默认的图片插入方式。它会在图片链接后面加上#pic_center的字样,由此可以推断:左对齐对应#pic_left,右对齐对应#pic_right,下面直接看例子。

1.1.1 markdown格式文本

- 下图是居中显示-图片默认插入方式

![图片描述](https://img-blog.csdnimg.cn/98ceaf6910c441d6b18ac3565cbb82b8.png#pic_center)

- 下图是左对齐显示

![图片描述](https://img-blog.csdnimg.cn/98ceaf6910c441d6b18ac3565cbb82b8.png#pic_left)

- 下图是右对齐显示

![图片描述](https://img-blog.csdnimg.cn/98ceaf6910c441d6b18ac3565cbb82b8.png#pic_right)

1.2 指定图片尺寸

MD编辑器提供了带尺寸的图片的插入方式,就是在图片链接的最后加上空格、等号宽x高,例如添加30x30尺寸就是=30x30,注意等号前面有个空格。下面用markdown文本举个例子。上面那个图片原图是360x360的,下面把它按照180x180地尺寸添加进来看看效果。至于左对齐、右对齐的尺寸,自己结合着使用就行了。

1.2.1 markdown格式文本

![图片描述](https://img-blog.csdnimg.cn/98ceaf6910c441d6b18ac3565cbb82b8.png#pic_center =180x180)

二、内嵌HTML语法实现插入图片

HTML插入图片的基础语法: 柚子快报邀请码778899分享:其他 MD文本编辑器使用  第1张 使用HTML语法插入图片,默认是左对齐的,可以用

标签来改变其对齐方式,
标签定义一个区域,使用align属性可以改变定义的区域的对齐方式。其他属性参阅下面的例子,2.1 markdown格式文本可以直接拷贝到markdown编辑器去看效果。

在 HTML 中,

标签用来定义图片,是空标签,意思是说,它只包含属性,并且没有闭合标签。

src指 “source”。源属性的值是图像的 URL 地址

alt属性用来为图像定义一串可替换的文本。无法载入图像时,替换文本告诉读者,他们失去的信息。

title属性描述了元素的额外信息 (作为工具条使用)

height(高度) 与 width(宽度) 属性用于设置图像的高度与宽度。

style属性规定元素的行内样式(inline style),定义图片时可以用来缩放

标签用来定义文档中的一个分隔区块或者一个区域部分

align属性用来对齐,它的值有left、right、center、justify

2.1 markdown格式文本

- ``标签添加图片

柚子快报邀请码778899分享:其他 MD文本编辑器使用  第2张

- `alt`属性 - 这里图片链接错误,图片无法载入,所以显示了`alt`属性的文本

柚子快报邀请码778899分享:其他 MD文本编辑器使用  第3张

- `height、width`属性 - 指定宽高为150

柚子快报邀请码778899分享:其他 MD文本编辑器使用  第4张

- `

` 标签的`align`属性 - 使图片和文本居中,左对齐`left`,右对齐`right`

柚子快报邀请码778899分享:其他 MD文本编辑器使用  第5张


摩托车图片

柚子快报邀请码778899分享:其他 MD文本编辑器使用

http://yzkb.51969.com/

相关阅读

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: 

发表评论