墨池有雨
墨池有雨

玩转工具系列之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. 文字居中

文字居中

二、快捷键

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. 删除线/下划线

~~删除线内容~~

下划线内容

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        |

    表现形式：

    Syntax Description
    Header Title
    Paragraph Text

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

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

  3. 对齐：

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

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

    表现形式：

    Syntax Description Test Text
    Header Title Here’s this
    Paragraph Text And more

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

15. 注脚

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

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

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

  • 示例：

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

16. 音频

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

  2. 使用 HTML5 元素：

    • 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 元素：

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

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

      <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 videoa> instead.p>
video>

    • 示例：

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

  3. HTML 内联框架元素