markdown-1-基础语法
markdown包含基础语法和各种语法扩展。是一种一种**轻量级**
标记语言
🔔标记语言不是编程语言,而是更加面向用户的“交互语言”。HTML也是
标记语言
基础语法兼容html标记,可以直接用 HTML 语法对markdown进行编写,实现各种多媒体功能、排版、自体本身的变化,但是Markdown也有自己的语法,不同的编辑器的Markdown语法有细微差别,但总的来说都实现了对部分常用的html代码的简化(轻量级)。比如下边的标题:
0. 标题
二级
标题的代码为:
# 标题
## 二级
### 三级
#### 四级
##### 五级
###### 六级
####### 最多六级标题
三级
四级
五级
六级
####### 最多六级标题
html代码是这样的:
<h1>标题</h1>
<h2>二级</h2>
<h3>三级</h3>
<h4>四级</h4>
<h5>五级</h5>
<h6>六级</h6>
<h7>最多六级</h7>
(一个简单的标题,除了标题本身外还要输入8个字符,而Markdown只需要两个。这还是简单的。可以看看表格的HTML语法)
怎么样,Markdown
是不是简单一些?
接下来将继续介绍这类Markdown独有的语法和使用Markdown编辑器的独特的操作功能
作者本人采用
Typora
进行编辑,以下首先介绍Typora的一些功能 。不同Markdown语法有细微差别,所用插件也不同。(之后会更新有关
Obsidian
、Notion
差别于Typora的内,当然,还会更新我的网址的搭建平台VuePress
以及使用的模版vuepress-theme-hope
的内容;以及它们使用的插件和扩展语法(挖坑ing)例举一处差别,比如受到VuePress的title的影响,Markdown一级标题放在最开始会不显示:Markdown语法-0
1.(非标题)分割线
---
2. 无序标题
-
二级无序标题
-
再进行tab键
缩进即可
-
- 二级无序标题
- 三级无序标题
- 二级无序标题
3. 有序标题
任意(#)级标题/或正文内容+
1.
2.
1.
2.
4. 图片
图片基本格式:
![undertitel](URL 'titel')
半角!
+[]
+()
(与链接格式类似)
undertitel和title即对应HTML中的alt和title属性(都可省略)
可以按照以上方法填入相应的url
路径获得图片
当图片在粘贴板时,直接粘贴即可
系统会生成一个同目录文件夹储存文件
(请不要再套娃啦!!!!!!)
5. 链接🔗
[名称](网址)
[名称](文件夹目录)
半角!
+[]
+()
(与链接格式类似)
6. 表格
方法一
导航栏找到段落
>> 表格
>>插入表格
输入表格的行列(以下为2 x 2 表格)
######方法二
|标题|名称|
标题 | 名称 |
---|---|
7.公式
输入以下代码 (没有反应先按空格键或
enter
再删除)进入公式模式 一般为**latex**公式
$ $
独段公式
$$ $$
例如:
f_n(x)
将公式插入该行
详见Latex语法
8. 字体
8.1. ctrl相关
包括 *
类
加粗字体、斜体
[<>
和 </>
构成的一类](#__<>
和 </>
构成的一类代码)
下划线
**加粗字体**
或使用ctrl
+ b
*斜体*
ctrl + i
***加粗斜体***
ctrl
+ i
再 ctrl
+b
(这两个没有先后顺序)
<u>下划线</u>
ctrl
+ u
再 ctrl
+b
演示
加粗字体
斜体
加粗斜体
下划线
8.2. 变换字体颜色
变化字体颜色同样也是
[<>
和 </>
构成的一类代码](#__<>
和 </>
构成的一类)
<span style="color: orange">这句话的颜色会改变为橙色</span>
这句话的颜色会改变为橙色
变为不常见颜色,此处就会用到html公式
<span style="color: grey">这句话的颜色会改变为一种灰色</span>
<span style="color: #808080">按照编码值,这和上面的灰色是一样的</span> /*双十六进制编码*/
<span style="color: #ABABAB">这句话的颜色会改变为一种不常见的灰色</span>
<span style="color: #BFBFBF">这句话的颜色会改变为另一种不常见的灰色</span>
<span style="color: rgb(34, 119, 85)">这句话的颜色会改变绿色(颜色编码方式和上面不同)</span>
这句话的颜色会改变为一种灰色
按照编码值,这和上面的灰色是一样的
这句话的颜色会改变为一种不常见的灰色
这句话的颜色会改变为另一种不常见的灰色
这句话的颜色会改变绿色(颜色编码方式和上面不同)
<span style=“ color:white; background-color:black;>黑底白字</span>
<span style=“ border: 1px solid #000">黑框</span> /* px表示边框粗细的像素 solid/dashed表示虚实,还有dotted点状边框等#000 为单十六进制编码的颜色,此处000为黑色*/
<span style=" border: 2px solid #000">粗黑框</span>
<span style=" border: 2px dashed #275">虚绿框</span>
<span style=" border: 2px dotted #227755">虚点绿框</span>
黑底白字
黑框
黑框
虚绿框
虚点绿框
8.3. 其他文本效果
`你要放入方框中的文本`
你要放入方框中的文本
~~删除线~~
删除线
上下标(部分低版本md编辑器不适用)
下标
~内容~
上标
^内容^
ClO~2~^3-^
ClO23-
竖线
>
Typora可以实现竖线套用
打卡框
- [ ]
按空格
实现该效果
- [ ]
如果按成回车会变成这样
- [ ]
以上是最基础的Markdown语法
还有一些仍是一般不需要手动安装插件的基础语法,但是并不适用于**所有**兼容Markdown的文档编辑器(比如那些日记类md应用程序,如
语雀
、Notion
等软件)或web渲染。这些语法详见 第10点
9.如何显示渲染前的文本效果
ctrl + /
10. 特殊的的基础语法
1. 各种高亮块
Typora的语法
> [!NOTE]
> 文本内容
> [!TIP]
> 文本内容
> [!IMPORTANT]
> 文本内容
> [!WARNING]
> 文本内容
> [!CAUTION]
> 文本内容
[!NOTE]
Highlights information that users should take into account, even when skimming.
[!TIP] Optional information to help a user be more successful.
[!IMPORTANT]
Crucial information necessary for users to succeed.
[!WARNING]
Critical content demanding immediate user attention due to potential risks.
[!CAUTION] Negative potential consequences of an action.
但是该语法在web并不适用
web上的语法
::: info xxx
xxx
:::
::: tip xxx
xxx
:::
::: warning xxx
xxx
:::
::: danger xxx
xxx
:::
如
::: info 信息
这是一个信息
:::
::: tip 提示
这是一个提示
:::
::: warning 警告
这是一个警告
:::
::: danger 危险
这是一个危险警告
:::
输出
信息
这是一个信息
提示
这是一个提示
警告
这是一个警告
危险
这是一个危险警告
也可以使用html
实现,详见html(我没写呢)
2.
::: details xxx
xxx
:::
::: details 点击展开详情
这是一个详情块,在 IE / Edge 中不生效
:::
点击展开详情
这是一个详情块,在 IE / Edge 中不生效
使用html
实现
<details class="custom-block details" style="display: block; border-radius: 2px; margin: 1.6em 0px; padding: 1.6em; background-color: var(--bg-color-secondary);"><summary style="outline: currentcolor; cursor: pointer;">点击展开详情</summary>这是一个详情块,在 IE / Edge 中不生效</details>
点击展开详情
这是一个详情块,在 IE / Edge 中不生效3.
::: tabs
@tab xxx
xxxx
@tab xxx
xxxx
:::
xxx
xxxx
4.
:::code-tabs
@tab xxxx
```python
@tab xxxx
```c
:::
5.Emoji表情
复制粘贴
在大多数情况下,编码为UTF-8(详见 Emojipedia )的表情符号可以直接复制粘贴到 md
文档中。许多Markdown应用程序会自动Markdown格式的**文本**(不需要图片等超文本或是文件的插入)显示表情符号。从Markdown应用程序导出的HTML和PDF文件应显示表情符号。
提示
如果使用的是静态网站生成器,请确保将HTML页面编码为UTF-8。
使用表情符号简码
一些md编辑器(应用程序)
也允许通过表情符号代码
来插入表情符号。 一些Markdown应用程序允许您通过键入表情符号短代码来插入表情符号。这些以冒号开头和结尾,并包含表情符号的名称。
:表情符号的名称:
哈🤣
哈哈😄
哈哈哈😂:joy: 或者:U+1F602:
哈哈哈😂😂
提示
您可以使用此表情符号简码列表,但请记住,表情符号简码因**应用程序**而异。有关更多信息,请参阅Markdownb应用程序的文档。
11. 部分功能需要借助插件
一些插件及其实现的高级功能例举:Markdown-2
//让你的 VuePress 站点中的 Markdown 文件支持脚注。
import { hopeTheme } from "vuepress-theme-hope";
export default {
theme: hopeTheme({
plugins: {
mdEnhance: {
footnote: true,
},
},
}),
};