玩转工具系列之Markdown

零、学习网站🍓

一、设置字体🍍

1. 字体

<font face="黑体">我是黑体字</font>
<font face="宋体">我是宋体字</font>
<font face="微软雅黑">我是微软雅黑字</font>
<font face="fantasy">我是fantasy字</font>
<font face="Helvetica">我是Helvetica字</font>
<font face="Times New Roman">我是Times New Roman字</font>

2. 字体颜色

# 方式1
浅红色文字：<font color="#dd0000">浅红色文字：</font>

# 方式2
<font color="color: blue">蓝色</font>
<font color="rgb(200, 100, 100)">使用 rgb 颜色值</font>

# 方式3
<font style="color: rgb(200,100,100)">使用 rgb 颜色值</font>
  • RGB颜色对照表：实色效果-RGB值-16色
  • 同一颜色值在不同显示器上会有色差，选取颜色时尽量使用安全色
  • 但注意：以上方法在GitHub中无效！

3. 背景色

<font style="background: blue">蓝色</font>

# 同时设置字体颜色和背景色
<font style="background: rgb(200,100,100), color: rgb(200,100,100)">使用 rgb 颜色值</font>

# 使用图片作背景
<font style="background: url('http://www.wenliku.com/d/file/patterns/2019-06-26/d8fac26c38c9b2a7e2393fc9af766e8f.jpg') ">I wish you a Merry Christmas</font>

# 七彩渐变背景色
<font style="background: linear-gradient( to right, #ff1616, #ff7716, #ffdc16, #36c945, #10a5ce, #0f0096, #a51eff, #ff1616);">太阳太阳，给我们带来，七色光彩</font>

4. 字体大小

<font size="1">size为1</font>
<font size="3">size为3</font>
<font size="10">size为10</font>

5. 文字居中

<center>文字居中</center>

二、快捷键🥝

1. 目录

  • 在文档最上方输入：[toc] + Enter，该方法默认把所有标题都做成目录，但如果不想让某些标题出现在目录中，请参照自定义目录；

  • 自定义目录：

    文档内外的超链接也是使用这种方式！

    - [一级标题](#一级标题)
  - [标题 1-1](#二级标题 1-1)
  - [标题 1-2](#二级标题 1-2)

  • 此外，输入你指定的标题，为你自动生成目录：在线网站

  • 以上方法都比较麻烦，也可以使用VSCode打开文件，依赖于Markdown All in One插件，使用快捷键ctrl+shift+P：

    • 输入Markdown All in One: Create Table of Contents自动生成目录；
    • 输入Markdown All in One: Create Table of Contents自动更新目录。
    • 但这种方式最大的缺点：一旦更改了涉及到标题的文档内容，都必须要到VSCode中手动更新目录！

2. 标题

# 这是 H1        # typora 快捷键 Ctrl + 1
## 这是 H2       # typora 快捷键 Ctrl + 2（常用）
### 这是 H3      # typora 快捷键 Ctrl + 3
#### 这是 H4     # typora 快捷键 Ctrl + 4（常用）
##### 这是 H5    # 一般不作使用
###### 这是 H6   # 一般不作使用

3. 分割线

  • 长条分割线的制作有两种方式：

    • --- + Enter；
    • *** + Enter；

4. 代码

  • 块级代码：````bash/c++/…+Enter`，具体语言可以智能提示；

  • 行内代码：

    `inline code`

5. 公式

  • 行内公式：

    $k = \pi$

  • 段外居中公式：

    $$ + Enter

  • 多行公式等号对齐：

    $$
\begin{equation}
\begin{aligned}

\dot{\mathbf x} &= A \mathbf x + B \mathbf u  \\
y &= C \mathbf x

\end{aligned}
\end{equation}
$$

6. 引用

  • > + Space：引用内支持多层引用、标题、列表、行内代码、行内公式等；

    > 1.1 这是第一行列表项。
> 
>> 2.1 这是第二行列表项。
>>
>>- 这是无序列表项。
>
> #### 给出一些例子代码：
> ```bash
> return shell_exec("echo $input | $markdown_script");
> ```

7. 斜体/粗体

<!-- 斜体 -->
*xxx* + Space

<!-- 粗体 -->
**xxx** + Space

<!-- 加粗斜体 -->
***xxx*** + Space

8. 上/下标

^上标内容^

~下标内容~

9. 删除线/下划线

~~删除线内容~~

<u>下划线内容</u>

10. 文本高亮

<!-- 默认黄色高亮 -->
==高亮文本==

11. 图片

![别名](图片路径)

12. 任务列表

  1. 任务列表使您可以创建带有复选框的项目列表。要选择一个复选框，请在方括号[x]之间添加 x 。

    - [x] 已完成项
- [ ] 未完成项

13. 特殊符号&Emoji表情

  • 有两种方法可以将表情符号添加到Markdown文件中：

    1. 复制和粘贴表情符号：

      大多数情况下，可以直接从网上复制表情符号并将其粘贴到文档中。许多Markdown应用程序会自动以Markdown格式的文本显示表情符号。

      各种表情开源网站：

      🍎：Emojipedia

      🍊：copy_emoji

    2. 使用表情符号简码：

      通过键入表情符号短代码来插入表情符号，这些以冒号开头和结尾，并包含表情符号的名称。

      去露营了！ :tent: 很快回来。

真好笑！ :joy:

      可获取表情短代码的网站：

      🐢：emoji_cheat_sheet

      🐻：emoji_picker​

      🐹：emojis

  • 常用符号：符号大全

14. 表格

  1. 请使用三个或多个连字符（---）创建每列的标题，并使用管道（|）分隔每列。您可以选择在表的任一端添加管道。

    | Syntax      | Description |
| ----------- | ----------- |
| Header      | Title       |
| Paragraph   | Text        |

    表现形式：

    SyntaxDescription
    HeaderTitle
    ParagraphText

  2. 单元格宽度可以变化，如下所示。呈现的输出将看起来相同：

    | Syntax | Description |
| --- | ----------- |
| Header | Title |
| Paragraph | Text |

  3. 对齐：

    您可以通过在标题行中的连字符的左侧，右侧或两侧添加冒号（:），将列中的文本对齐到左侧，右侧或中心。

    | Syntax      | Description | Test Text     |
| :---        |    :----:   |          ---: |
| Header      | Title       | Here's this   |
| Paragraph   | Text        | And more      |

    表现形式：

    SyntaxDescriptionTest Text
    HeaderTitleHere’s this
    ParagraphTextAnd more

  4. Tip: 使用连字符和管道创建表可能很麻烦。为了加快该过程，请尝试使用Markdown Tables Generator，使用图形界面构建表，然后将生成的Markdown格式的文本复制到文件中。

15. 注脚

在这段文字后添加一个脚注[^footnote].

[^footnote]:这里是脚注的内容.

  • footnote可以是任意英文字符；
    脚注的内容可以放在文章的任意位置（一般放最后）。

  • 示例：

    使用 Markdown1 可以效率的书写文档，直接转换成 HTML2, 你可以使用 Typora3 软件。

16. 音频

  1. 音频文件可以用HTML的方式嵌入到Markdown中。

  2. 使用 HTML5 <audio> 元素：

    • src属性可以设置为一个网络上的音频文件的 URL 或者本地文件的路径：

      <audio src="audio.mp3" preload="none" controls loop>
  你的浏览器不支持 audio 标签。
</audio>

    • 属性配置：

      • controls：为网页中的音频显示标准的 HTML5 控制器。
      • loop：使音频自动重复播放。
      • preload：属性用来缓冲 audio 元素的大文件，有三个属性值可供设置：
        • none：不缓冲文件
        • auto：缓冲音频文件
        • metadata： 仅仅缓冲文件的元数据

    • 示例：插入本地音乐：直接插入上面的语法到文件即可，千万不要以代码块的形式添加！

      • JISOO-Flower：

        您的浏览器不支持 audio 元素。

      • LOL：

        您的浏览器不支持 audio 元素。

  3. 插入在线音乐：

    • 进入网易云音乐歌曲界面，点击光碟下方的生成外链播放器：

      <iframe
  frameborder="no"
  border="0"
  marginwidth="0"
  marginheight="0"
  width=330
  height=86
  src="//music.163.com/outchain/player?type=2&id=393697&auto=0&height=66">
</iframe>

    • 示例：

17. 视频

  1. 视频文件可以用HTML的方式嵌入到Markdown中。

  2. 使用 HTML5 <video> 元素：

    • 原生仅支持播放 ogg/mp4/webm 格式。不支持播放 FLV 格式视频。

    • 由于浏览器并不是都支持相同的视频格式，所以你可以在 <source> 元素里提供多个视频源，然后浏览器将会使用它所支持的第一个源。

      <video width="320" controls loop>
  <source src="./images/video.mp4" type="video/mp4">
  <source src="./images/video.webm" type="video/webm">
  <source src="./images/video.ogv" type="video/ogg" />
  <p>Your browser doesn't support HTML5 video. Here is
     a <a href="myVideo.mp4">link to the video</a> instead.</p>
</video>

    • 示例：

      Your browser doesn't support HTML5 video. Here is a link to the video instead.

  3. HTML 内联框架元素<iframe>：

    • <iframe>能够将另一个 HTML 页面嵌入到当前页面中；

    • 嵌入网络视频：

      <iframe 
    src="https://v.miaopai.com/iframe?scid=SvyHaHOczsp7B6ftW86oqMMz62-h5ai6~Fwp8A__"
    width="800" 
    height="450" 
    frameborder="0" 
    allowfullscreen>
</iframe>

    • 示例：

18. 流程图

  1. 需要将流程图的代码放到以下格式内部：

    ​```mermaid
    流程图/时序图代码
​```

  2. 横向流程图：

    graph LR;
A[Hard edge] -->|Label| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]

  3. 纵向流程图：

    graph TD;

A[christmas] -->B(Go shopping)

B --> C{Let me think}

C -->|One| D[Laptop]

C -->|Two| E[iPhone]

C -->|Three|F[Car]

  4. 控制图

    st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end

st->op->cond
cond(yes)->e
cond(no)->op

  5. 序列图

    sequenceDiagram

loop every day

Alice->>John: Hello John, how are you?

John-->> Alice: Great!

end

  6. 甘特图

    gantt

dateFormat YYYY-MM-DD

title 产品计划表

section 初期阶段

明确需求: 2016-03-01, 10d

section 中期阶段

跟进开发: 2016-03-11, 15d

section 后期阶段

走查测试: 2016-03-20, 9d

三、GitHub专属格式🍏

  1. 如果超链接本地文件时，且文件名称中含有空格，其转义字符为%20；

  2. 示例：

    • 假如文件名字为Algorithm Control.md，其相对路径为：[Algorithm Control](个人技能/Algorithm%20Control.md) 。

四、Typora专属格式🍎

1. 修改行间距

  • 偏好设置-外观-打开主题文件夹，找到你所使用的主题对应的配置文件，这里以github.css为例，搜索并修改以下内容：

    • line-height即为行间距，根据需要进行修改。

      body {
  font-family: "Times New Roman", "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /*color: rgb(51, 51, 51);*/
  color: rgb(51, 51, 51);
  line-height: 1.5;
}

2. 修改段落之间的间距

  • 同样地，以github.css为例，搜索并修改以下内容：

    • 这里的p意思是paragraph，即段落。

    • margin：字体的外边距。0.5em 0：段落的上下边距为0.5em(em为单位)，左右边距为0。

      p,
blockquote,
ul,
ol,
dl,
table{
  margin: 0.4em 0;
}

3. 修改标题字体

  • typora默认的六级标题的字体样式很奇怪，以github.css为例，搜索并修改以下内容：

    h5 {
    font-size: 1.15em;
}
h6 {
   font-size: 1.05em;
   /*color: #777;*/
}

4. 修改引用块内行间距

  • 以github.css为例，搜索并修改以下内容：

    blockquote {
    border-left: 4px solid #5CC61E;
    padding: 0 15px;
    color: #777777;
    line-height: 1.5;  /* 设置行间距 */
}

5. 设置段落两端对齐

  • 以github.css为例，搜索并修改以下内容：

    #write {
    max-width: 860px;
  	margin: 0 auto;
  	padding: 30px;
    padding-bottom: 100px;
	text-align: justify;   /* 两端对齐 */ 
	display: block;        /* 两端对齐 */
}

6. 折叠大纲

  • 找到文件-偏好设置-外观-侧边栏，勾选侧边栏的大纲视图允许折叠和展开即可！

  1. Markdown 是一种纯文本标记语言。 ↩︎

  2. HyperText Markup Language 超文本标记语言。 ↩︎

  3. Typora 官网 https://typora.io/ ↩︎