超实用markdown的语法技巧(表格、文字缩进、文字居中、文字颜色、背景色、代码高亮、标记)

您所在的位置:网站首页 表格设置缩进 超实用markdown的语法技巧(表格、文字缩进、文字居中、文字颜色、背景色、代码高亮、标记)

超实用markdown的语法技巧(表格、文字缩进、文字居中、文字颜色、背景色、代码高亮、标记)

2024-05-26 17:05| 来源: 网络整理| 查看: 265

Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。     — 摘自百度百科

以下记录了markdown额外的小技巧,markdown基本语法指路:Markdown编辑器常用语法使用指南

1.表格

Markdown 制作表格使用 | 来分隔不同的单元格,使用 - 来分隔表头和其他行。

1.1 语法格式: | 表头 | 表头 | | ---- | ---- | | 单元格 | 单元格 | | 单元格 | 单元格 | 表头表头单元格单元格单元格单元格 1.2 对齐方式 -: 设置内容和标题栏居右对齐。:- 设置内容和标题栏居左对齐。:-: 设置内容和标题栏居中对齐。

实例如下:

| 左对齐 | 右对齐 | 居中对齐 | | :-----| ----: | :----: | | 单元格 | 单元格 | 单元格 | | 单元格 | 单元格 | 单元格 | 左对齐右对齐居中对齐单元格单元格单元格单元格单元格单元格 1.3 单元格合并

markdown现在还不支持单元格合并,想要合并表格只能迂回进行:

方法一:

从word或excel中复制表格打开链接: No-Cruft Excel to HTML TableConverter贴上复制的文字,然后按convert,就会得到这个表格的html代码将html代码贴到markdown编辑器

方法二(嵌入HTML代码):

可以先用Markdown语法生成未合并单元格的HTML代码进行修改, 增加rowspan或colspan属性来实现合并单元格再把更改后的HTML代码粘贴到markdown文件中 2.文字 2.1 文字缩进

「Markdown 语言」不负责实现段首缩进,所以我们只能手写,添加空格转义符,前端HTML空格转义符总结

`Math.abs(x)`   返回一个数的绝对值。`在这里插入代码片`

效果如下,成功缩进两字符 Math.abs(x)   返回一个数的绝对值。

2.2 文字对齐(居中、左对齐、右对齐)

对于标准的markdown文本,是不支持居中对齐的。不过markdown支持html语言,所以我们采用html语法格式书写即可。 居中:

此行居中 // or align居中

效果:

此行居中

align居中

左对齐:

左对齐

左对齐

右对齐:

右对齐

右对齐

2.3 文字的字体及颜色 2.3.1 字体更换

同样我们也需要遵照其标准的语法格式

我是黑体字 我是微软雅黑 我是华文彩云

效果: 我是黑体字 我是微软雅黑 我是华文彩云

2.3.2 大小更换

大小的属性名为size,Size规定文本的尺寸大小,取值从 1 到 7,浏览器默认值是 3。

我是黑体2号字 我是黑体3号字 我是黑体7号字

我是黑体2号字 我是黑体3号字 我是黑体7号字

2.3.3 颜色替换

在html语言中,颜色属性名为color,所以可以表示如下

红色

效果:

红色

2.4 文字添加下划线

使用html标签:

用爱劈开黑暗,像一道曙光, 是非真假无法判断,不如坚强。

效果:

用爱劈开黑暗,像一道曙光,

是非真假无法判断,不如坚强。 使用u标签 下划线文本

效果: 下划线文本

3.颜色 3.1 背景色 颜色名 十六进制颜色值 颜色 AliceBlue F0F8FF rgb(240, 248, 255) AntiqueWhite #FAEBD7 rgb(250, 235, 215) Lavender #E6E6FA rgb(230, 230, 250) LavenderBlush #FFF0F5 rgb(255, 240, 245) LightPink #FFB6C1 rgb(255, 182, 193) LightSalmon #FFA07A rgb(255, 160, 122) MintCream #F5FFFA rgb(245, 255, 250) MistyRose #FFE4E1 rgb(255, 228, 225) Moccasin #FFE4B5 rgb(255, 228, 181) MintCream #F5FFFA rgb(245, 255, 250) PaleVioletRed #D87093 rgb(216, 112, 147)

效果:

颜色名十六进制颜色值颜色AliceBlueF0F8FFrgb(240, 248, 255)AntiqueWhite#FAEBD7rgb(250, 235, 215)Lavender#E6E6FArgb(230, 230, 250)LavenderBlush#FFF0F5rgb(255, 240, 245) LightPink#FFB6C1rgb(255, 182, 193)LightSalmon#FFA07Argb(255, 160, 122)MintCream#F5FFFArgb(245, 255, 250)MistyRose#FFE4E1rgb(255, 228, 225)Moccasin#FFE4B5rgb(255, 228, 181)MintCream#F5FFFArgb(245, 255, 250)PaleVioletRed#D87093rgb(216, 112, 147) 4.图片 4.1 设置图片大小

markdown默认情况下图片是自适应大小的,宽度充满,类似于max-width: 100%。你一定在插入图片的时候,遇到图片太大,影响观感的问题,或者遇到过我们需要将图片只显示半边的需求。 在这里插入图片描述 高清1 Markdown中,图片大小的设定方式有两种 不通过[](url)这种格式上传图片,用标签替换。

设置zoom 这种方式,是通过html标签引入,通过指定css样式来实现调整图片尺寸的的,你还可以通过内联样式. 设置style中的width

或者这样的css样式

4.2 多张图片并排显示

在markdown中,目前,让图片像这样并排居中的方式主要是两种:

![](url1)![](url1)![](url1)...多个图片链接綴加写,无换行,无空格。

这种方式,似乎并不能够每一次都生效。但在CSDN是可以生效的,如下:

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly90aW1nc2EuYmFpZHUuY29tL3RpbWc_aW1hZ2UmcXVhbGl0eT04MCZzaXplPWI5OTk5XzEwMDAwJnNlYz0xNTk1MzA3NTA5NjA1JmRpPTdlMjVhY2I3NTVhMzQ5MmY2MmExMWVkOWNhZjE5MmViJmltZ3R5cGU9MCZzcmM9aHR0cCUzQSUyRiUyRmEyLmF0dC5odWRvbmcuY29tJTJGMzYlMkY0OCUyRjE5MzAwMDAxMzU3MjU4MTMzNDEyNDg5MzU0NzE3LmpwZw?x-oss-process=image/format,png)![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly90aW1nc2EuYmFpZHUuY29tL3RpbWc_aW1hZ2UmcXVhbGl0eT04MCZzaXplPWI5OTk5XzEwMDAwJnNlYz0xNTk1MzA3NTA5NjA1JmRpPTdlMjVhY2I3NTVhMzQ5MmY2MmExMWVkOWNhZjE5MmViJmltZ3R5cGU9MCZzcmM9aHR0cCUzQSUyRiUyRmEyLmF0dC5odWRvbmcuY29tJTJGMzYlMkY0OCUyRjE5MzAwMDAxMzU3MjU4MTMzNDEyNDg5MzU0NzE3LmpwZw?x-oss-process=image/format,png)

这种方式的很大问题是,图片是紧密贴在一起的,观感并不友好,因此不支持使用该方式。 使用html标签 ... 注意: 当你在使用第二种方式的时候你一定需要注意的几点: 在博客园中写博客时,代码块和上方文字要空一行才会生效,如下: 在这里插入图片描述当你使用标签单独居中一张图片的时候,开标签和图片代码不要空一行,才会正常显示居中(CSDN中),否则会居左 不差当你在应用这种方式不成功的时候,很可能是图片过大,这时候你需要在图片的链接中加入图片参数以设定合适的尺寸。比如我在上面的图片中添加了width="30%",否则一行只能显示一张图片。

如果你觉得这篇文章有用,动动小手给我点个赞吧🍀



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3