-
你可能不知道什么叫做富文本编辑器,什么叫做标记语言,但如果你有计划想成为一名 SaaS 服务商,又或者你想编写一下当前很火的 AI 提示词之类的,那么 Markdown 标记语言是你无法避开的「技术」。探索本文不会很深入去教你使用 Markdown 语言(本人也懂得不多),或者说 Markdown 根本也没有很深入的用法(虽然懂得不多,还是得装下去),为什么这么说呢,我们来对比一下,平时我们用 Office Word 或 WPS 文字设置文字作为标题1、标题2、标题3等样式,一般是这样操作:如果用 Markdown 来做同样的排版则是这样的:可以看出,在 WPS 是借助强大的富文本编辑器,结合鼠标的拖拽,就能很容易地完成排版。换成 Markdown 标记语言的话,貌似全程不需要怎样借助鼠标,就是输入一个个「# + 空格」,三个标题的样式排版就神奇般完成了。是的,这就是 Markdown 标记语言,用「# ` -」这些字符结合空格、回车来完成大部分的排版。我再举多几个例子,就能更加明白了。我在左边已经预置好文字,只要加上这些标记符,右边就能实时看到效果。全程只是用键盘,在已有文字附近输入一些简单的符号,就能完成样式的输出。特别是有序和无序排列,在 Office 当中没有「苦练」一段时间的鼠标,都不敢拖拉生成这种排序,而且按个回车还要小心翼翼,生怕破坏格式。在 Markdown 就没有那么矫情了,只要是按照标准输入的,输出就一定也是标准的。学了用在哪里这个 Markdown 标记语言不是新生的事物,它诞生于 2004年,在 Github 这个开源平台全面支持 Markdown 之后,IT圈就开始流行这个标记语言了。所以,我们作为 SaaS 服务商的身份,对这个语言的掌握是必要的。公域平台比如,我们在一些云平台社区,论坛发帖是支持 Markdown 语法的。在比较知名的问答平台,写个文章,也是支持 Markdown 语法的。这些平台,特别是 IT 相关的,几乎都开始兼容 Markdown 语法了。当然,Markdown 虽然创始人规范了一些使用符号,但是在实际的应用当中,许多平台或者开发者也会自定义一些符号,产生更多的效果,这个要仔细看每个平台的帮助说明。一旦掌握基本的原理,再去适应更多的符号也是相当于容易的。开源程序Markdown 文件的后缀名是 .md,在最大的开源平台 Github 上面,所有的项目文档说明 README.md 都是用 Markdown 标记语言编写的文档。比如流行的面板:1Panel 的说明文档。许多新的开源程序,比如一些论坛,或者博客程序,默认编辑器不再是之前的那些富文本 HTML 编辑器了,取代的就是支持 Markdown 语法的编辑器。Markdown 客户端在 Windows 平台,有许多支持 Markdown 语法的客户端,当然在 Mac 苹果端也有。Windows 比较著名的有:Typora,后来转成收费软件之后,也产生了许多取代的。比如:MarkText,还有火到不行的:Obsidian,后面有机会我再起篇章写这些客户端的应用。因为 Markdown 语法简单,通过简单的字符就能输出 HTML 排版,加上 CSS 主题,所输出的样式就十分灵活了。甚至,用 Markdown 写公众号推文也是可行的,只是要先在客户端写好,再通过转换样式拷贝上去。这也是在后面有机会分享给大家。当然,微软的 Visual Studio Code 这款免费的编辑器,装上插件,就是神一般存在的 Markdown 的利器,本文的预览演示就是用它生成的。
-
Markdown是一种轻量级的标记语言,它允许人们使用易读易写的纯文本格式编写文档。Markdown的语法简单明了,易于阅读和编写。以下是一些常用的Markdown格式代码:标题:使用#表示一级标题,##表示二级标题,以此类推。例如:# 一级标题 ## 二级标题 ### 三级标题加粗:使用两个*或_包围文本,表示加粗。例如:**加粗文本** __加粗文本__斜体:使用一个*或_包围文本,表示斜体。例如:*斜体文本* _斜体文本_无序列表:使用-或+开头的行表示无序列表项。例如:- 列表项1 - 列表项2 - 列表项3有序列表:使用数字和.开头的行表示有序列表项。例如:1. 列表项1 2. 列表项2 3. 列表项3链接:使用[链接文字](链接地址)表示链接。例如:百度图片:使用![图片描述](图片地址)表示图片。例如:!示例图片引用:使用>开头的行表示引用。例如:> 这是一段引用文本代码块:使用三个反引号(`)包围代码,可以指定代码的语言。例如:print("Hello, World!")分割线:使用三个或以上的-或*表示分割线。例如:--- ***以上就是Markdown的一些常用格式代码,通过这些简单的语法,我们可以快速地编写出美观且易于阅读的文档。
-
Markdown 高级技巧支持的 HTML 元素不在 Markdown 涵盖范围之内的标签,都可以直接在文档里面用 HTML 撰写。目前支持的 HTML 元素有: 等 ,如:使用 Ctrl+Alt+Del 重启电脑输出结果为:转义Markdown 使用了很多特殊符号来表示特定的意义,如果需要显示特定的符号则需要使用转义字符,Markdown 使用反斜杠转义特殊字符:**文本加粗**\*\* 正常显示星号 \*\*输出结果为:Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号:\ 反斜线` 反引号* 星号_ 下划线{} 花括号[] 方括号() 小括号# 井字号+ 加号- 减号. 英文句点! 感叹号公式Markdown Preview Enhanced 使用 KaTeX 或者 MathJax 来渲染数学表达式。KaTeX 拥有比 MathJax 更快的性能,但是它却少了很多 MathJax 拥有的特性。你可以查看 KaTeX supported functions/symbols 来了解 KaTeX 支持那些符号和函数。默认下的分隔符:$...$ 或者 \(...\) 中的数学表达式将会在行内显示。$$...$$ 或者 \[...\] 或者 ```math 中的数学表达式将会在块内显示。$$\begin{Bmatrix}a & b \\c & d\end{Bmatrix}$$$$\begin{CD}A @>a>> B \\@VbVV @AAcA \\C @= D\end{CD}$$输出结果为:Markdown 表格1 篇笔记 写笔记adc928***528@qq.com 参考地址1125typora 画流程图、时序图(顺序图)、甘特图复制以下代码使用 typora 的源码模式粘贴到编辑器中查看效果:以下几个实例效果图如下:1、横向流程图源码格式:```mermaidgraph LRA[方形] -->B(圆角)B --> C{条件a}C -->|a=1| D[结果1]C -->|a=2| E[结果2]F[横向流程图]```2、竖向流程图源码格式:```mermaidgraph TDA[方形] --> B(圆角)B --> C{条件a}C --> |a=1| D[结果1]C --> |a=2| E[结果2]F[竖向流程图]```3、标准流程图源码格式:```flowst=>start: 开始框op=>operation: 处理框cond=>condition: 判断框(是或否?)sub1=>subroutine: 子流程io=>inputoutput: 输入输出框e=>end: 结束框st->op->condcond(yes)->io->econd(no)->sub1(right)->op```4、标准流程图源码格式(横向):```flowst=>start: 开始框op=>operation: 处理框cond=>condition: 判断框(是或否?)sub1=>subroutine: 子流程io=>inputoutput: 输入输出框e=>end: 结束框st(right)->op(right)->condcond(yes)->io(bottom)->econd(no)->sub1(right)->op```5、UML时序图源码样例:```sequence对象A->对象B: 对象B你好吗?(请求)Note right of 对象B: 对象B的描述Note left of 对象A: 对象A的描述(提示)对象B-->对象A: 我很好(响应)对象A->对象B: 你真的好吗?```6、UML时序图源码复杂样例:```sequenceTitle: 标题:复杂使用对象A->对象B: 对象B你好吗?(请求)Note right of 对象B: 对象B的描述Note left of 对象A: 对象A的描述(提示)对象B-->对象A: 我很好(响应)对象B->小三: 你好吗小三-->>对象A: 对象B找我了对象A->对象B: 你真的好吗?Note over 小三,对象B: 我们是朋友participant CNote right of C: 没人陪我玩```7、UML标准时序图样例:```mermaid%% 时序图例子,-> 直线,-->虚线,->>实线箭头sequenceDiagramparticipant 张三participant 李四张三->王五: 王五你好吗?loop 健康检查王五->王五: 与疾病战斗endNote right of 王五: 合理 食物看医生...李四-->>张三: 很好!王五->李四: 你怎么样?李四-->王五: 很好!```8、甘特图样例:```mermaid%% 语法示例ganttdateFormat YYYY-MM-DDtitle 软件开发甘特图section 设计需求 :done, des1, 2014-01-06,2014-01-08原型 :active, des2, 2014-01-09, 3dUI设计 : des3, after des2, 5d未来任务 : des4, after des3, 5dsection 开发学习准备理解需求 :crit, done, 2014-01-06,24h设计框架 :crit, done, after des2, 2d开发 :crit, active, 3d未来任务 :crit, 5d耍 :2dsection 测试功能测试 :active, a1, after des3, 3d压力测试 :after a1 , 20h测试报告 : 48h```效果图如下:转载自https://www.runoob.com/markdown/md-advance.html
-
Markdown 表格Markdown 制作表格使用 | 来分隔不同的单元格,使用 - 来分隔表头和其他行。语法格式如下:| 表头 | 表头 || ---- | ---- || 单元格 | 单元格 || 单元格 | 单元格 |以上代码显示结果如下:对齐方式我们可以设置表格的对齐方式:-: 设置内容和标题栏居右对齐。:- 设置内容和标题栏居左对齐。:-: 设置内容和标题栏居中对齐。实例如下:| 左对齐 | 右对齐 | 居中对齐 || :-----| ----: | :----: || 单元格 | 单元格 | 单元格 || 单元格 | 单元格 | 单元格 |以上代码显示结果如下:转载自https://www.runoob.com/markdown/md-table.html
-
Markdown 图片Markdown 图片语法格式如下:![alt 属性文本](图片地址)![alt 属性文本](图片地址 "可选标题")开头一个感叹号 !接着一个方括号,里面放上图片的替代文字接着一个普通括号,里面放上图片的网址,最后还可以用引号包住并加上选择性的 'title' 属性的文字。使用实例:![RUNOOB 图标](http://static.runoob.com/images/runoob-logo.png)![RUNOOB 图标](http://static.runoob.com/images/runoob-logo.png "RUNOOB")显示结果如下:当然,你也可以像网址那样对图片网址使用变量:这个链接用 1 作为网址变量 [RUNOOB][1].然后在文档的结尾为变量赋值(网址)[1]: http://static.runoob.com/images/runoob-logo.png显示结果如下:Markdown 还没有办法指定图片的高度与宽度,如果你需要的话,你可以使用普通的 标签。显示结果如下:转载自https://www.runoob.com/markdown/md-image.html
-
Markdown 链接链接使用方法如下:[链接名称](链接地址)或者<链接地址>例如:这是一个链接 [菜鸟教程](https://www.runoob.com)显示结果如下:直接使用链接地址:显示结果如下:高级链接我们可以通过变量来设置一个链接,变量赋值在文档末尾进行:这个链接用 1 作为网址变量 [Google][1]这个链接用 runoob 作为网址变量 [Runoob][runoob]然后在文档的结尾为变量赋值(网址)[1]: http://www.google.com/[runoob]: http://www.runoob.com/显示结果如下:转载自https://www.runoob.com/markdown/md-link.html
-
Markdown 代码如果是段落上的一个函数或片段的代码可以用反引号把它包起来(`),例如:`printf()` 函数显示结果如下:代码区块代码区块使用 4 个空格或者一个制表符(Tab 键)。实例如下:显示结果如下:你也可以用 ``` 包裹一段代码,并指定一种语言(也可以不指定):```javascript$(document).ready(function () {alert('RUNOOB');});```显示结果如下:转载自https://www.runoob.com/markdown/md-code.html
-
Markdown 区块Markdown 区块引用是在段落开头使用 > 符号 ,然后后面紧跟一个空格符号:> 区块引用> 菜鸟教程> 学的不仅是技术更是梦想显示结果如下:另外区块是可以嵌套的,一个 > 符号是最外层,两个 > 符号是第一层嵌套,以此类推:> 最外层> > 第一层嵌套> > > 第二层嵌套显示结果如下:区块中使用列表区块中使用列表实例如下:> 区块中使用列表> 1. 第一项> 2. 第二项> + 第一项> + 第二项> + 第三项显示结果如下:列表中使用区块如果要在列表项目内放进区块,那么就需要在 > 前添加四个空格的缩进。列表中使用区块实例如下:* 第一项> 菜鸟教程> 学的不仅是技术更是梦想* 第二项显示结果如下:转载自https://www.runoob.com/markdown/md-block.html
-
Markdown 列表Markdown 支持有序列表和无序列表。无序列表使用星号(*)、加号(+)或是减号(-)作为列表标记,这些标记后面要添加一个空格,然后再填写内容:* 第一项* 第二项* 第三项+ 第一项+ 第二项+ 第三项- 第一项- 第二项- 第三项显示结果如下:有序列表使用数字并加上 . 号来表示,如:1. 第一项2. 第二项3. 第三项显示结果如下:列表嵌套列表嵌套只需在子列表中的选项前面添加两个或四个空格即可:1. 第一项:- 第一项嵌套的第一个元素- 第一项嵌套的第二个元素2. 第二项:- 第二项嵌套的第一个元素- 第二项嵌套的第二个元素显示结果如下:转载自https://www.runoob.com/markdown/md-lists.html
-
Markdown 段落Markdown 段落没有特殊的格式,直接编写文字就好,段落的换行是使用两个以上空格加上回车。当然也可以在段落后面使用一个空行来表示重新开始一个段落。字体Markdown 可以使用以下几种字体:*斜体文本*_斜体文本_**粗体文本**__粗体文本__***粗斜体文本***___粗斜体文本___显示效果如下所示:分隔线你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线,行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线:**** * ******- - -----------显示效果如下所示:删除线如果段落上的文字要添加删除线,只需要在文字的两端加上两个波浪线 ~~ 即可,实例如下:RUNOOB.COMGOOGLE.COM~~BAIDU.COM~~显示效果如下所示:下划线下划线可以通过 HTML 的 标签来实现:带下划线文本显示效果如下所示:脚注脚注是对文本的补充说明。Markdown 脚注的格式如下:[^要注明的文本]以下实例演示了脚注的用法:创建脚注格式类似这样 [^RUNOOB]。[^RUNOOB]: 菜鸟教程 -- 学的不仅是技术,更是梦想!!!演示效果如下:转载自https://www.runoob.com/markdown/md-paragraph.html
-
Markdown 标题Markdown 标题有两种格式。1、使用 = 和 - 标记一级和二级标题= 和 - 标记语法格式如下:我展示的是一级标题=================我展示的是二级标题-----------------显示效果如下图:使用 # 号标记使用 # 号可表示 1-6 级标题,一级标题对应一个 # 号,二级标题对应两个 # 号,以此类推。# 一级标题## 二级标题### 三级标题#### 四级标题##### 五级标题###### 六级标题显示效果如下图:转载自https://www.runoob.com/markdown/md-title.html
-
Markdown 教程Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。Markdown 语言在 2004 由约翰·格鲁伯(英语:John Gruber)创建。Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。Markdown 编写的文档后缀为 .md, .markdown。Markdown 应用Markdown 能被使用来撰写电子书,如:Gitbook。当前许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。例如:GitHub、简书、reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge等。编辑器本教程将使用 VSCode 编辑器来讲解 Markdown 的语法,VSCode 支持 MacOS 、Windows、Linux 平台,且包含多种主题。VSCode 默认集成了 Markdown 文档编辑插件,原生就支持高亮 Markdown 的语法。VSCode(全称:Visual Studio Code)是一款由微软开发且跨平台的免费源代码编辑器。VScode 安装教程:https://www.runoob.com/w3cnote/vscode-tutorial.htmlVScode 官网地址:https://code.visualstudio.com/VSCode 实时预览还需要执行 Markdown: Open Preview to the Side 命令来实现。在命令窗口输入 Markdown: Open Preview to the Side 命令:最终效果:如果你需要将 markdown 转为 PDF、图片、HTML 等格式也可以安装对应的插件来实现。你也可以使用我们的在线编辑器来测试:https://c.runoob.com/front-end/712。测试实例接下来的测试中,我们先在 VSCode 下安装 Markdown Preview Enhanced 插件来实现更强大的功能。点击右侧栏扩展按钮,查找Markdown Preview Enhanced 插件,点击安装:安装完成后重启 VSCode。在 RUNOOB.md 输入以下代码:# RUNOOB Markdown Test## Hello World!将该代码格式粘贴到文件 RUNOOB.md 上,效果如下:在预览框中右击鼠标还提供了各种导出功能:转载自https://www.runoob.com/markdown/md-tutorial.html
-
| 表头 | 表头 | | ---- | ---- | | 单元格 | 单元格 | | 单元格 | 单元格 |
-
$(A,A)=(A,A)$ # markdown数学公式基础语法 ## 单行公式 公式内容分别用`$`包起来。 示例:`$E=mc^2$` 效果:$E=mc^2$ 注意:`$`左右不带空格 ## 多行公式 公式内容左右分别用`$$`包起来。 示例:`$$E=mc^2$$` 效果: $$E=mc^2$$ 此时公式独占一行。 ## markdown常用数学公式一览表 |运算符|说明|举例|举例代码| |-------|:----:|:----:|:----:| |+ | 加 | $x+y$ | `$x+y$` | |- | 减 | $x-y$ | `$x-y$` | |\times| 乘 | $x \times y$ | `$x \times y$` | |\ast | 乘 |$x \ast y$ | `$x \ast y$` | |\div | 除 |$x \div y$ | `$x \div y$` | |\frac | 分数 | $\frac{x}{y}$ | `$\frac{x}{y}$` | |\infty| 无穷| $\infty$|`$\infty$`| |^ | 上标 |$x^y$ | `$x^y$` | |_ | 下标 |$x_y$ | `$x_y$` | |\sqrt |开方 |$\sqrt[x]{y+1}$ | `$\sqrt[x]{y+1}$` | |\pm |加减 |$x \pm y$ |`$x \pm y$` | |\mp |减加 |$x \mp y$ |`$x \mp y$` | |\log |对数 |$\log_2{y}$ | `$\log_2{y}$` | |\lim |极限 |$\lim_{x \to 3}$ | `$\lim_{x \to 3}$` | |\displaystyle |块公式格式 | $\displaystyle \lim_{x \to 3}$ |`$\displaystyle \lim_{x \to 3}$` | |\sum |求和 |$\sum_1^{\infty}$ |`$\sum_1^{\infty}$` | |\int |积分 |$\int_1^{\infty}$ | `$\int_1^{\infty}$` |### 更多公式请查阅katex官网:https://katex.org/docs/supported.html
-
Markdown 可以使用以下几种字体: `*斜体文本*`*斜体文本* `_斜体文本_`_斜体文本_ `**粗体文本**`**粗体文本** `__粗体文本__`__粗体文本__ `***粗斜体文本***` ***粗斜体文本*** `___粗斜体文本___` ___粗斜体文本___
推荐直播
-
华为云AI入门课:AI发展趋势与华为愿景
2024/11/18 周一 18:20-20:20
Alex 华为云学堂技术讲师
本期直播旨在帮助开发者熟悉理解AI技术概念,AI发展趋势,AI实用化前景,了解熟悉未来主要技术栈,当前发展瓶颈等行业化知识。帮助开发者在AI领域快速构建知识体系,构建职业竞争力。
去报名 -
华为云软件开发生产线(CodeArts)10月新特性解读
2024/11/19 周二 19:00-20:00
苏柏亚培 华为云高级产品经理
不知道产品的最新特性?没法和产品团队建立直接的沟通?本期直播产品经理将为您解读华为云软件开发生产线10月发布的新特性,并在直播过程中为您答疑解惑。
去报名
热门标签