【Markdown】Markdown高级写作应用论文

最新推荐文章于 2025-04-08 06:12:47 发布

俯海临黎

最新推荐文章于 2025-04-08 06:12:47 发布

阅读量1.3k

点赞数 2

文章标签： css html

本文链接：https://blog.csdn.net/qq_17413173/article/details/130541898

版权

Markdown高级写作应用论文

May 5, 2023

作者: 俯海临黎

课程: 动态报告排版

课题: Markdown高级写作应用

摘要

本文是一篇相对全面的技术文档，主要介绍了如何使用Markdown绘制常用图形，并详细说明了所需准备的工具和从哪里开始。文章中包含了常用和常见的绘图方法，以及相关代码和图形，重点代码处有标记和解释，同时提供了相应的解决方案。本文不需要外部图片插入，所有需要的图表均为代码生成。此外，文中还介绍了Markdown能够绘制的其他图形，并引用了相应的参考资料。本文是一篇非常实用的帮助文档，能够帮助读者轻松掌握Markdown绘图技巧，提高工作效率。

简介

Markdown编辑器，Markdown是一种轻量级标记语言，用于在不同的文本编辑器中快速书写格式化文本。虽然Markdown并不是一种图形绘制工具，但是它可以使用一些基本的语法来绘制简单的图形。本文将介绍Markdown中绘制常用图形的方法，以及需要准备的工具。在开始之前，我们需要一个支持Markdown的文本编辑器。目前比较流行的Markdown编辑器有Typora、VS Code、Atom等。这些编辑器都提供了Markdown语法的高亮显示和实时预览功能，可以大大提高写作效率。本文使用的是joplin,作为编译器

多平台支持：Joplin支持Windows、macOS、Linux、Android、iOS等多个平台，可以实现跨设备同步笔记。
强大的笔记编辑功能：Joplin支持Markdown语法、富文本编辑、代码高亮等多种编辑方式，同时支持附件、标签、笔记本等组织方式。
高度定制化：Joplin提供了多种主题和插件支持，用户可以根据自己的需求进行个性化设置。
安全性和隐私保护：Joplin支持端到端加密和本地加密，可以保护用户笔记的隐私和安全。
开源自由：Joplin是一款开源软件，用户可以自由获取、使用、修改和分发，无需支付任何费用。

Markdown基本技能与方法

1. 基础技能

要创建块引用，请在段落前添加一个 > 符号。

作品

作者

作品内容

1.1 任务

已完成项目1
已完成事项1
已完成事项2
待办事项1
待办事项2

- [x] 已完成项目1
- [x] 已完成事项1
- [x] 已完成事项2
- [ ] 待办事项1
- [ ] 待办事项2

1.2 数学公式

可以使用渲染LaTeX数学表达式:

$$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.$$

Gamma公式展示 $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ 是通过欧拉积分:

$$
\Gamma(z) = \int_0^\infty t^{z-1}e{-t}dt,.

2. 格式设置

2.1 设置标题

合理的创建标题，有助于目录的生成，直接输入1次#，并按下space后，将生成1级标题。输入2次#，并按下space后，将生成2级标题。

首先markdown那边常用的那些东西，要创建标题，请在单词或短语前面添加井号 (#) 。#的数量代表了标题的级别。例如，添加三个 # 表示创建一个三级标题

### (例如：### My Header)

当然如果想实现居中，使用原生markdown代码是不能实现的，但是我们可以借助HTML格式的代码实现。

我们可以通过控制style的大小控制每级的字体大小。

<center>
  <h1 style="font-size:36px">这是居中的一级标题</h1>
  <h2 style="font-size:28px">这是居中的二级标题</h2>
  <h3 style="font-size:20px">这是居中的三级标题</h3>
</center>

例如这段代码效果如下：

### 这是居中的三级标题

2.3 写作方法

[若要添加目录 (TOC)，只需向段落开头的标题文本应用相应的标题样式，该标题文本将显示在 TOC 中。为此，请为标题选择文本。然后，在“开始”选项卡的“样式”库中，单击所需样式。]

引用

朱永兴,李素芳．学术论文撰写与发表[M]．浙江大学出版社,2007.
江明生,黎彤．生物统计学课程采用多媒体与启发式教学探讨[J]．高教论坛,2011,(2)：62-66.
张淑华,赵文若．Microsoft Excel在农业统计分析中的应用[J]．吉林农业科技学院学报,2008,(3)：l6-l7．

脚注

¹[添加脚注（若有），使其在参考文献后另起一页。若要设置脚注引用的格式，请选择编号，然后在“开始”选项卡上的“样式”库中单击“脚注引用”。脚注的正文（例如本示例）使用普通文本样式。（注意：如果要删除此示例脚注，请记得同时删除它的文中引用。正文内容部分第一页中示例标题 2 段落的结尾。）]

2.2 设置字体

不同字体会带来不同的阅读效果，通过设置字体的大小，我们可以设置成如下形式：

我是黑体字
我是微软雅黑
我是华文彩云
我是红色
我是尺寸
我是黑体，绿色，尺寸为5

<span style="font-family: 黑体;">我是黑体字</span>
<span style="font-family: 微软雅黑;">我是微软雅黑</span>
<span style="font-family: STCAIYUN;">我是华文彩云</span>
<span style="color: red;">我是红色</span>
<span style="font-size: x-large;">我是尺寸</span>
<span style="color: green; font-family: 黑体; font-size: x-large;">我是黑体，绿色尺寸为5</span>

<span>：这是一个HTML元素，用于标记文本，以便对其应用样式属性。
style：这是<span>元素的属性，用于定义CSS样式属性。
font-family：这个属性用于设置文本的字体。在这个例子中，黑体字的字体是“黑体”，微软雅黑的字体是“微软雅黑”，华文彩云的字体是“STCAIYUN”。
color：这个属性用于设置文本的颜色。在这个例子中，红色的颜色是“red”，绿色的颜色是“#008000”，蓝色的颜色是“blue”。
font-size：这个属性用于设置文本的字体大小。在这个例子中，尺寸为“x-large”（比默认大小要大）。
;：分号用于分隔不同的样式属性。
<br>：这是一个HTML元素，用于在文本中添加换行符。

2.3 设置背景图片

我们常常为了更好看而去设置美化背景，而Markdown中提供了网页相关的方式实现。

<style>
body {
  background: linear-gradient(to bottom right, #BFF4FB, #D4FBC5);
  border: 10px solid transparent;
  border-image: url("https://img.zcool.cn/community/0163845d036f9da801213ec271337b.jpg@2o.jpg") 350 repeat;
  box-sizing: border-box;
}
</style>

background-size 属性用于设置背景图片的尺寸。在这个例子中，使用了 cover 值，这意味着背景图片将被缩放以填充整个屏幕，并保持纵横比。
background-position 属性用于设置背景图片的位置。在这个例子中，使用了 center 值，这意味着背景图片将在屏幕中垂直和水平方向上居中对齐。

渐变色：

background: linear-gradient(to bottom right, #00aaff, #00ff88);

其中，to bottom right 表示渐变方向从左上角到右下角，可以使用 to top, to bottom, to left, to right, to top left, to top right, to bottom left, to bottom right 来定义不同的方向。

除了 linear-gradient 之外，CSS 还提供了其他类型的渐变，包括径向渐变（radial-gradient）、重复线性渐变（repeating-linear-gradient）和重复径向渐变（repeating-radial-gradient）等。

例如，径向渐变可以使用以下代码创建：

background: radial-gradient(circle at top left, #00aaff, #00ff88);

其中，circle 表示使用圆形渐变，at top left 表示渐变从左上角开始，后面跟着渐变色的值。与 linear-gradient 类似，radial-gradient 也可以使用不同的方向和颜色值来创建不同的渐变效果。

这段代码还可以使用了 HTML 的 <style> 标签和 CSS 样式语法来设置网页的背景图片。将代码更换成

- background-image

3. 绘制表格

3.1. Markdown表格

Markdown中可以使用一些简单的语法来绘制表格。
例如，以下代码可以绘制一个包含三行三列的表格。

| 列标题 | 列标题 | 列标题 | 列标题 | 列标题 |
| --- | --- | --- | --- | --- |
| 行标题 | 123 | 123 | 123 | 123 |
| 行标题 | 456 | 456 | 456 | 456 |
| 行标题 | 789 | 789 | 789 | 789 |

以 | 为分隔符表示表格中的每一列。
使用 --- 作为第二行的分隔符，表示表格中每列的水平边框。
空格不影响表格的生成，但可以使其更加易读。

表 1 [表格标题]

列标题	列标题	列标题	列标题	列标题
行标题	123	123	123	123
行标题	456	456	456	456
行标题	789	789	789	789

注意：要增加表格与注释之间的间距，可使用“开始”选项卡的“样式”库中提供的的“表格/图”样式。

3.2. HTML表格

当然还有另一个种方式，我们使用HTML格式的代码这个代码会让表格表现得更好看。

表 2 [不同语法对比]

markdown的表格		html表格
语法	标题->连字符(---)	语法	表格->table标签
	分隔每列->管道(\|)		标题->th标签
	对齐->冒号(:)		行->tr标签
	强调->反引号(`)		列->td标签

其代码如下：

<center>
  <table border="2">
	<tr>
	  <th colspan="2" align="center">markdown的表格</th>
	  <th colspan="2">html表格</th>
	</tr>
	<tr>
	  <td width="10%" rowspan="4">语法</td>
	  <td width="40%" align=left>标题->连字符(---)</td>
	  <td width="10%" rowspan="4" bgcolor=#FAEBD7>语法</td>
	  <td align=right bgcolor=#FFB6C1>表格-><font color=red>table</font>标签</td>
	</tr>
	<tr>
	  <td align=left>分隔每列->管道(|)</td>
	  <td align=right bgcolor=#D8BFD8>标题-><font color=red>th</font>标签</td>
	</tr>
	<tr>
	  <td align=left>对齐->冒号(:)</td>
	  <td align=right bgcolor=#B0C4DE>行-><font color=red>tr</font>标签</td>
	</tr>
	<tr>
	  <td align=left>强调->反引号(`)</td>
	  <td align=right bgcolor=#AFEEEE>列-><font color=red>td</font>标签</td>
	</tr>
  </table>
</center>

表格的属性如下：

border=“2”：设置表格边框线宽为2个像素；
colspan=“2”：指定表格单元格合并两列；
align=“center”：指定表头单元格和表格中的文本居中显示；
width=“10%”：指定单元格宽度为总宽度的10%；
rowspan=“4”：指定单元格合并四行；
bgcolor=“#FAEBD7”：指定单元格背景色为亚麻色；
color=“red”：指定字体颜色为红色；

通过这段代码，我们实现了效果：
在上面markdown代码中，可以看到还使用了标签，可以使表格的字体更丰富。复制markdown代码到markdown编辑器去看看效果，有助于理解。

Markdown绘图技能

## 4\. Mermaid

Mermaid 是一种基于 JavaScript 的流程图、时序图、甘特图等图形绘制工具，可以帮助您在 Markdown 笔记中绘制各种图表。在 Joplin 中，可以使用 Mermaid 绘制各种图表，并将其嵌入到 Markdown 代码块中，以便在笔记中显示。

```mermaid
   各种绘制图像的代码

在这个示例中，使用width和height属性来设置<div>标签的宽度和高度，将图像的大小设置为500像素的宽度和300像素的高度。可以根据需要调整这些值，以使图像适合笔记。

4.1 Mermaid-背景设置

一般来说，绘制的图案背景一般为白色背景，而大多数情况下在背景图片的影响下会有一种很突兀的感觉。

<style>
pre[class^="mermaid"] {
	background-color: #e6ffee;
	padding: 10px;
	border-radius: 5px;
}
</style>

CSS 选择器使用了 ^= 属性选择器来匹配所有 class 属性以 “mermaid” 开头的 pre 元素，即所有 Mermaid代码块的容器元素。
使用 background-color 属性将背景颜色设置为浅绿色，使用 padding 属性和 border-radius 属性添加一些内边距和圆角，以使代码块看起来更加美观。
将上述代码添加到页面的 <style> 标签中，即可生效。

4.2 Mermaid-初始化参数

在Mermaid中，可以使用init关键字指定一些初始化参数来控制图表的外观和行为。这些初始化参数以JSON格式提供，可以控制主题、字体大小、颜色等方面。

theme: 指定主题的名称，可以是内置主题名称（如"default"、“forest"等），也可以是自定义主题名称，需要先在样式表中定义。默认值为"default”。
themeVariables: 指定主题颜色和其他相关变量的值，以JSON格式提供。可以使用预定义的颜色名称，也可以使用RGB、十六进制等格式。默认值为null。
fontSize: 指定字体大小。默认值为14。
fontFamily: 指定字体系列。默认值为"‘trebuchet ms’, verdana, arial, sans-serif"。

base 主题，Mermaid 还提供了其他一些主题，你可以在 theme 参数中选择它们。其代码如下：

```mermaid
%%{init: {'theme': 'dark'}}%%
graph LR
	A(演示)
```

4.3 Mermaid-饼图

相对与其他图像来说，绘制饼图非常容易，这是我们使用mermaid绘制的饼图。

图 1. 饼图

但使用markdown语法中，饼图会占据页面很大一部分空间。

```mermaid
pie
 title 饼图
 "狗" : 386
 "猫" : 567
 "兔" : 700
 "猪":365
 "虎" : 115
 ```

4.4 Mermaid-流程图 (graph/flowchart)

这是一个简单流程图：

graph TD

A[从上至下的流程图] --> B(演示)

4.4.1 结点位置

首先我们先来了解流程图基础语法和布局结构。
我们可以通过设置流程图流动的方向，来绘制流程流向。

TB - 从上到下
TD - 从上到下
BT - 从下到上
RL - 从右到左
LR - 从左到右

如果明白了基础语法的构建，就可以开始选择形状了

4.4.2 结点形状

在流程图中有许多节点，但他们的形状是可以修改的

graph LR

id1(圆边)
id2([圆框])
id3[(圆柱)]
id4((圆形))
id5>不对称形状]
id6{菱形}
id7{{六边形}}

图 2. 各节点形状

4.4.3 平行四边形和梯形

其中还有其他节点的形状，代码如下：

graph TD

id1[/平行四边形右倾斜/]
id2[\平行四边形左倾斜]
id3[/上底梯形]
id4[\下底梯形/]

图 3. 平行四边形和梯形节点

4.4.4 连接线

连接线在流程图中的样式也是影响着流程图的绘制效果。不同方式效果如下：

图 4. 连接线方式

如下面代码所示，

graph TD

A --> B
C — D
a --文本— b
c —|文本|d
E–>|文本|F
H-.->I;
e-.文本.->f
J ==> K
j == 文本 ==> k

4.4.5 流程图实现

这是一个结合上文方法的流程图：

图 5. 流程图

绘制这个流程图，过程如下：

LR：这个代码表示流程图的布局方向，即从左到右（Left to Right）。
节点A：开始节点，表示程序的起点。使用方括号（[]）表示节点名称。
–>：这个符号表示箭头的方向，从左往右表示正常流动，从右往左表示反向流动。
节点B：表示程序需要询问一个问题。用大括号（{}）表示询问的问题，用竖线（|）表示不同的选项。
|错误|：这个符号表示一个选项，表示答案为“否”。

4.5 Mermaid-时序图

Mermaid-时序图是一种用于描述系统或软件中不同组件之间交互关系的图表，可以帮助开发人员更好地理解系统或软件的不同组件之间的交互模式，帮助他们设计和实现更高效和可靠的系统。

4.5.1 简单时序图

每一天里爱丽丝都会向约翰问候，并询问他的近况，而约翰则会回复说自己过得很好。这个问候对话会不断进行，直到程序结束。
如图所示：

图 6. 简单时序图

其代码如下所示

```mermaid
sequenceDiagram
loop 每一天
爱丽丝->>约翰: 你好约翰, 最近怎么样?
约翰-->> 爱丽丝: 很好!
end
```

代码中的 loop 表示一个循环体，其中的每一天是循环的条件，这个条件会一直成立，直到循环结束。循环体内部包含两个参与者，即爱丽丝和约翰，通过箭头表示消息的传递方向，->> 表示爱丽丝向约翰发送消息，–>> 表示约翰向爱丽丝回复消息。在循环体的结尾处，使用 end 表示循环结束。

4.5.2 自定义标记时序图

图 8. 自定义颜色时序图

```mermaid
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#933333','textColor': '#008000'}}}%%
sequenceDiagram
	participant 爱丽丝
	participant 鲍勃
	participant 约翰
	爱丽丝->>鲍勃: 你好鲍勃，最近怎么样？
	鲍勃-->>爱丽丝: 我很好，谢谢关心。
	爱丽丝->>约翰: 你好约翰，最近怎么样？
	约翰--x 爱丽丝: 我需要休息。
	爱丽丝-x 鲍勃: 再见！
	Note over 约翰: 约翰需要休息一下
	Note over 爱丽丝: 爱丽丝和鲍勃告别
```

%%{init: {‘theme’: ‘base’, ‘themeVariables’: { ‘primaryColor’: ‘#933333’,‘textColor’: ‘#008000’}}}%%

在上面的代码中，primaryColor被设置为绿色，secondaryColor被设置为红色，tertiaryColor被设置为蓝色，textColor被设置为棕色。你可以根据需要修改这些值。

4.6 甘特图

什么是甘特图？甘特图是一种图表类型，用于显示项目的时间表和进度。它由一系列水平条形图表示，每个条形图代表一个任务。条形图的长度表示任务的持续时间，而它们的位置表示任务开始的时间。
为什么要使用Mermaid？

Mermaid是一种流程图和图表的绘制工具。它易于学习，使用简单的文本语言来描述图表，而不需要昂贵的绘图软件。Mermaid支持许多不同类型的图表，包括甘特图。

4.6.1 简单甘特图

通过这个代码将看到一个简单的甘特图，其中只有一个任务，该任务在 2023 年 5 月 1 日完成。

gantt
	dateFormat  YYYY-MM-DD
	title 简单甘特图
	section 任务
	完成 :a1, 2023-05-01, 1d

图 9. 简单甘特图

4.6.2 多任务甘特图

为了实现更复杂的甘特图，我们可以通过设置多个任务以及时间获得多任务甘特图。

gantt
dateFormat YYYY-MM-DD
title 带有多个任务的甘特图

section 项目 A
任务 1 :a1, 2023-05-01, 3d
任务 2 :a2, after a1, 2d
任务 3 :a3, after a2, 4d

section 项目 B
任务 4 :b1, 2023-05-07, 2d
任务 5 :b2, after b1, 3d
任务 6 :b3, after b2, 1d

在上面的代码块中，我们定义了两个项目（使用 section），每个项目包括多个任务。对于每个任务，我们指定了任务名称、开始时间和持续时间。

图 10. 自定义图案

4.6.3 带有里程碑的甘特图

milestone 是甘特图中的一种特殊的任务类型，表示一个里程碑，即任务的重要节点。接下来，创建一个带有里程碑的甘特图。

图 11. 里程碑的甘特图

```mermaid
gantt
dateFormat HH:mm
axisFormat %H:%M
标准里程碑 : milestone, m1, 17:49,2min
任务2 : 10min
任务3 : 5min
最后里程碑 : milestone, m2, 18:14, 2min
```

标准里程碑、任务2和任务3是甘特图中的任务名称。
m1 和 m2 是甘特图中两个里程碑的 ID，用于在甘特图中标记出它们。
10min 和 5min 是甘特图中的任务持续时间，分别为 10 分钟和 5 分钟。
2min 是里程碑持续时间，表示该里程碑在甘特图中占据的时间长度。

4.6.4 复杂甘特图

这是官方例子中的一个实现，我们可以看到其中使用了很多参数

after desX：表示一个任务在另一个任务完成后才开始；
crit：表示一个任务是关键任务；
done、active：表示任务的状态，已完成和正在进行；
日期：表示任务开始和结束的日期，用逗号(,)分隔。

图 12. 官方案例

5. SVG绘图

SVG，全称Scalable Vector Graphics（可缩放矢量图形），是一种用于描述二维矢量图形的一种XML标准，可以在Web页面上显示的图像格式。相比于常见的位图格式如JPEG和PNG，SVG是一种基于矢量的图形格式，其图形是由一些数学公式组成，因此它可以无限放大而不失真，并且文件体积更小，适合于制作矢量图标、图形、动画等。

要使用SVG绘图，需要掌握SVG的基本语法和属性，可以使用文本编辑器直接编写SVG代码，也可以使用markdown来辅助绘制。

SVG支持的属性非常多，包括基本形状、文本、路径、渐变、图案、滤镜等等，可以通过组合使用这些属性来绘制复杂的图形。同时，SVG还支持一些交互效果，如鼠标悬停、点击等事件。

5.1 简单的图形

第一步：绘制一个简单的矩形首先，我们来绘制一个简单的矩形。

图 13. 矩形图

下面是代码示例：

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="#4caf50" stroke="yellow" stroke-width="2" />
</svg>

rect 元素的stroke属性指定了矩形的边框颜色，stroke-width属性指定了边框的宽度。

现在，我们来绘制一个圆形。下面是代码示例：

图 14. 圆

<center>
	<svg width="100" height="100">
	  <circle cx="50" cy="50" r="40" fill="#ffc107" />
	</svg>
</center>

<circle>元素指定了一个圆形，cx和cy属性指定了圆心的坐标，r属性指定了圆的半径。

5.2 自定义图形

<center>
	<svg width="100" height="100">
	  <circle cx="50" cy="50" r="40" fill="#ffc107" />
	</svg>
</center>

图 15. 自定义图案

<svg width="200" height="200">
  <polygon points="100,20 180,70 180,150 100,200 20,150 20,70" fill="#ffc107" />
  <polygon points="100,40 160,80 160,140 100,180 40,140 40,80" fill="#3f51b5" />
  <circle cx="100" cy="100" r="50" fill="#fff" stroke="#4caf50" stroke-width="5" />
</svg>

代码绘制了一个六边形，由两个重叠的三角形组成，中间有一个白色圆圈。六边形和圆圈的填充颜色、圆圈的描边颜色和宽度都可以通过不同的属性值进行自定义调整。

图 16. 自定义国旗

<center>
<svg width="300" height="200">
  <rect x="0" y="0" width="300" height="200" fill="#1abc9c" />
  <rect x="0" y="100" width="300" height="100" fill="#f1c40f" />
  <circle cx="150" cy="100" r="80" fill="#fff" stroke="#f39c12" stroke-width="10" />
  <line x1="100" y1="100" x2="200" y2="100" stroke="#f39c12" stroke-width="10" />
  <line x1="150" y1="20" x2="150" y2="180" stroke="#f39c12" stroke-width="10" />
  <polygon points="120,100 150,60 180,100" fill="#f39c12" />
</svg>
</center>

这段代码绘制了一个黄色的山丘和一个白色的太阳，太阳被橙色的圆圈包围，并有两条橙色的线条从圆心向两侧延伸。在太阳的上方，绘制了一个橙色的三角形作为光芒。整个图案的背景是一片浅蓝色。

## 6. 超链接

有时候我们需要通过设置超级链接，将图片或者pdf甚至是mp4格式的视频放置在markdown中，例如这是将网络上一张图片放入markdown中

![风景](https://i-blog.csdnimg.cn/blog_migrate/58caf0e95baa6e976dff77352d70697d.jpg)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GsL8lxMH-1683437956698)(https://i-blog.csdnimg.cn/blog_migrate/58caf0e95baa6e976dff77352d70697d.jpg)]

为了让控制图片的大小，我们可以使用HTML的语法实现

<div align="center"> 
<img src="https://i-blog.csdnimg.cn/blog_migrate/58caf0e95baa6e976dff77352d70697d.jpg" width = 500 height = 300 /> 
</div>

通过设置width = 500，height = 300这两个参数我们控制了图片的尺寸

附录

页脚