三歲文集 | 关于 | English | 书单 | 三歲

写给自己-关于文本编辑的一些语法应用示例

2024-01-01 • SANSUI


目录

1 文本标题

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

文章使用标题结构后，可采用[TOC]标记体现在正文前;
把所有标题写到目录大纲中，本文开头的目录即是示例。
各级标题字号随级别下沉变化依级递减。

2 文本样式

2.1 斜体、加粗

**加粗文本** 或 __加粗文本__
*斜体文本* 或 _斜体文本_
***斜粗文本*** 或 ___斜粗文本___

加粗文本 或 加粗文本
斜体文本 或 斜体文本
斜粗文本 或 斜粗文本

2.2 删除、变更

~~删除文本~~

删除文本

若使用「中文排版样式增强」，可采用以下方式表示文字的删除及变更。

变动：我爱<del datetime="17:00:00">世界</del><ins datetime="18:15:00">你呀</ins>！
更新：念念<s>不忘</s>勿忘。

变动：我爱世界你呀！
更新：念念不忘勿忘。

2.3 字体、颜色

<font face="楷体" color="#4682B4" size="3">蓝天</font>是蓝色楷体的字，
<font face="黑体" color="#2E8B57" size="3">青山</font>是绿色黑体的字。
蓝天

是蓝色楷体的字，

青山

是绿色黑体的字。

2.4 上下标

这是^上标文字^
这是~下标文字~
或是<sup>上标文字</sup>
或是<sub>下标文字</sub>

这是^上标文字^
这是~下标文字~

或是上标文字
或是下标文字

2.5 下划线

<u>下划线文本</u>
<ins>下划线文本</ins>

下划线文本
下划线文本

若使用「中文排版样式增强」，可采用以下方式表示文本下划线。

<div class="heti heti--annotation">
就做<u title="风吹过来">一阵风吧</u>，可以<u>温柔</u>，可以<u>英勇</u>。
</div>
就做一阵风吧，可以温柔，可以英勇。

另外，如果想要个性化下划线，可以使用 html 的 span 标签、设置行内 CSS 的 border-bottom 属性来添加下划线。这种方式自定义程度最高。

<span style="border-bottom: 2px dashed red;">下划虚线</span>

下划虚线

下划虚线

其他下划线语法：

<span style="border-bottom: 1px solid red;">单下划线</span>

<span style="border-bottom: thick double #32a1ce;">双下划线</span>

<span style="border-bottom: 2px dotted red;">下划虚线</span>

单下划线

双下划线

下划虚线

2.6 注音

<ruby>
注<rp>(</rp><rt>zhù</rt><rp>)</rp>
音<rp>(</rp><rt>yīn</rt><rp>)</rp>
</ruby>

注(zhù) 音(yīn)

2.7 底纹

`这是带有底纹的文字`

这是带有底纹的文字
其实就是把文字放在代码块内，嵌在文本内部。

2.8 符号

插入普通的符号，Markdown 支持以下这些符号前面加上反斜线来帮助插入普通的符号。

\   反斜线
`   反引号
*   星号
_   底线
{}  花括号
[]  方括号
()  括弧
#   井字号
+   加号
-   减号
.   英文句点
!   惊叹号

如要在文字前后直接插入普通的星号或底线，你可以用反斜线。

\*我与这个世界有过恋人般的争吵。\*

*我与这个世界有过恋人般的争吵。*

2.9 HTML <kbd> 标签

<kbd>标签定义键盘文本。HTML 键盘输入元素（<kbd>）用于表示用户输入，它将产生一个行内元素，以浏览器的默认 monospace 字体显示。

Please press 
<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> 
to re-render an MDN page.

Please press Ctrl + Shift + R to re-render an MDN page.

2.10 其他

引号：我与这个世界有过<q>恋人般的</q>争吵。
标记：我与这个世界有过<mark>恋人般的</mark>争吵。

引号：我与这个世界有过恋人般的争吵。
标记：我与这个世界有过恋人般的争吵。

若使用「中文排版样式增强」，可采用以下方式表示文本。

<div class="heti heti--annotation">
术语：我与这个世界有过<dfn>恋人般的</dfn>争吵。
着重：我与这个世界有过<span class="heti-em">恋人般的</span>争吵。
强调：我与这个世界有过<em>恋人般的</em>争吵。
</div>
术语：我与这个世界有过恋人般的争吵。
着重：我与这个世界有过恋人般的争吵。
强调：我与这个世界有过恋人般的争吵。

失败，无法表现中文的着重号，实在是没有办法的办法。

<span style="border-bottom: 8px dotted red;">假冒着重号</span>

假冒着重号

其实就是把下划点线的点放大了。

3 文本列表

3.1 无序列表

使用星号 *、加号 + 或是减号 - 作为列表标记，标记符号后至少一个空格或制表符（Tab）。

* Green （比较推荐）
+ Blue
- Red （比较好用）
  • Green （比较推荐）
  • Blue
  • Red （比较好用）

无序列表标记符前每增加 2 个空格或是 4 个空格，增加一个层级。

- 我想偶然的。
  - 送给你。
    - 一束白色的花。
  • 我想偶然的。
    • 送给你。
      • 一束白色的花。

3.2 有序列表

则使用数字接着一个英文句点。标记符号后面也要接着至少一个空格或制表符（Tab）。

1. 是什么？
2. 为什么？
3. 怎么办？
  1. 是什么？
  2. 为什么？
  3. 怎么办？

在列表标记上使用的数字并不会影响输出的 HTML 结果，这意味着，你可以 Use lazy numbering for long lists。

1.  是什么？
1.  为什么？
    1.  原因一：
    1.  原因二：
1.  怎么办？
  1. 是什么？
  2. 为什么？
    1. 原因一：
    2. 原因二：
  3. 怎么办？

有序列表标记符前每增加一个 Tab，增加一个层级。

1. 我爱你？

  1.1 是的，我爱你；<br>
  1.2 不是，我不爱你。
2. 你爱我？

  2.1 是的，你爱我；(有序列表标记符号前有一个 Tab)<br>
  2.2 不是，你不爱我。<br>
     2.2.1 不要多想；(有序列表标记符号前有两个 Tab)<br>
     2.2.2 没有原因。
  1. 我爱你？

1.1 是的，我爱你；
2.2 不是，我不爱你。

  1. 你爱我？

2.1 是的，你爱我；(有序列表标记符号前有一个 Tab)
2.2 不是，你不爱我。
2.2.1 不要多想；(有序列表标记符号前有两个 Tab)
2.2.2 没有原因。

3.3 项目内段落

列表项目可以包含多个段落，段落都必须缩进 4 个空格或是 1 个制表符（Tab）。

- 我想偶然的，

    送给你；(列表项目中的段落)
- 一束白色的花。 

1. 我想偶然的，

    送给你；(列表项目中的段落)
2. 一束白色的花。

  • 我想偶然的，

    送给你；(列表项目中的段落)

  • 一束白色的花。

  1. 我想偶然的，

    送给你；(列表项目中的段落)

  2. 一束白色的花。

3.4 项目内引用

在引用标记符 > 前使用 2 / 4 个空格。

- 我想偶然的，

	> 送给你；（上面空一行，标记符 > 前有 1 个 Tab）<br>
	> 一束白色的花。

1. 我想偶然的，

	> 送给你；（上面空一行，标记符 > 前有 4 个空格或者 1 个 Tab）<br>
	> 一束白色的花。

  • 我想偶然的，

    送给你；（上面空一行，标记符 > 前有 1 个 Tab）
    一束白色的花。

  1. 我想偶然的，

    送给你；（上面空一行，标记符 > 前有 4 个空格或者 1 个 Tab）
    一束白色的花。

3.5 项目内代码

要放代码块的话，中间空一行，然后缩进两次，也就是 8 个空格或者 2 个制表符（Tab）。

- 绿水青山；

      金山银山。
        
1. 绿水青山；

       金山银山。

  • 绿水青山；

    金山银山。

  1. 绿水青山；

    金山银山。

3.6 项目的异常

当然，项目列表很可能会不小心产生，像是下面这样的写法。

1986. 我与这个世界有过恋人般的争吵。

会显示成：

  1. 我与这个世界有过恋人般的争吵。

1986 怎么变成 1 了？要避免这样的状况，你可以在句点前面加上反斜杠。

1986\. 我与这个世界有过恋人般的争吵。

会显示成：
1986. 我与这个世界有过恋人般的争吵。

4 任务列表

- [ ] a task list item
  - [x] completed
  - [ ] incomplete
- [ ] list syntax required
- [x] completed
  • a task list item
    • completed
    • incomplete
  • list syntax required
  • completed

5 图片与链接

图片与链接的语法很像，区别在一个 ! 号。

注：Markdown 不能设置图片大小，如果必须设置则应使用HTML标记

图片：![]() ![今天也要好好吃饭](https://buyivi.xyz/wenji/img/2020/2020-06-23-ren-sheng.gif)
链接：[]() [链接描述](链接的地址)
这篇文章：[送给你（六）](https://buyivi.xyz/wenji/2020/09/13/for-you-liu/ "送给你（六）：是一首三行诗")。
[送给你（六）](https://buyivi.xyz/wenji/2020/09/13/for-you-liu/)这篇文章其实是一首三行诗。

图片： 今天也要好好吃饭

链接： 链接描述

这篇文章：送给你（六）。

送给你（六）这篇文章其实是一首三行诗。

5.1 行内式

链接文字都是用 [方括号] 来标记，使用 (圆括号) 来把文字转成链接。
还可以为链接文字配个Title，当然 Title 属性是可选项，加不加看心情咯。

[送给你（六）](https://buyivi.xyz/wenji/2020/09/13/for-you-liu/ "送给你（六）")。
这篇文章：[送给你（六）](https://buyivi.xyz/wenji/2020/09/13/for-you-liu/ "送给你（六）").。

送给你（六）。
这篇文章：送给你（六）。

图片同上。

5.2 参考式

为参考形式的链接定一个 name 方便我们在文章中多次引用（name 可以用字母、数字和空格，且不分大小写）。

[送给你（六）][name]

[name]: https://buyivi.xyz/wenji/2020/09/13/for-you-liu/ "送给你（六）"

送给你（六）

举例：

一直用 [百度][bd]，当知道 [搜狗][s] 可以搜索微信和知乎时，我慢慢爱上了 [搜狗][s] 这个功能。
学术搜索还是用 [Google][g]。平时也会用 [Bing][b]，毕竟各有所长。

[G]: https://www.google.com/ "Google"
[BD]: https://www.baidu.com/ "Baidu Search"
[S]: https://www.sogou.com/ "Sogou"
[B]: https://cn.bing.com/ "Bing Search"

一直用 百度，当知道 搜狗 可以搜索微信和知乎时，我慢慢爱上了 搜狗 这个功能。 学术搜索还是用 Google。平时也会用 Bing，毕竟各有所长。

图片同上。

5.3 自动链接

Markdown 支持以比较简短的自动链接形式来处理网址和电子邮件信箱，只需用 < > 包起来，Markdown 就会自动把它转成链接。
一般网址的链接文字就和链接地址一样，邮址的自动链接也很类似。

<https://buyivi.xyz/wenji/2020/09/13/for-you-liu/>
<xmann_zh@foxmail.com>

https://buyivi.xyz/wenji/2020/09/13/for-you-liu/
xmann_zh@foxmail.com

5.4 锚点

网页中，锚点其实就是页内超链接，也就是链接本文档内部的某些元素，实现当前页面中的跳转。
比如我这里写下一个锚点，点击回到目录，就能跳转到目录。
在目录中点击这一节，就能跳过来。还有下一节的注脚。这些根本上都是用锚点来实现的。

注：
Markdown Extra 只支持在标题后插入锚点，其它地方无效。
Leanote 编辑器右侧显示效果区域暂时不支持锚点跳转，所以点来点去发现没有跳转不必惊慌，但是你发布成笔记或博文后是支持跳转的。

在此处跳转至[注音](#26-注音)

在此处跳转至注音

6 代码块与语法高亮

插入程序代码的方式有两种：使用反引号 `（~ 键）、使用缩进（Tab）。

插入行内代码，即插入一个单词或者一句代码的情况，使用 code 这样的形式插入。
插入多行代码，分别使用三个反引号（```）包裹多行代码。或者使用缩进。

6.1 行内代码

在一般的段落文字中，可以使用反引号 ` 来标记或插入代码区段。

C语言里的函数 `scanf()` 怎么使用？

C语言里的函数 scanf() 怎么使用？

文本底纹：可以标记 文件名 、关键词 等。

6.2 多行代码

在需要高亮的代码块的前一行及后一行使用三个反引号 ```（~ 键）
同时第一行反引号后面，输入代码块所使用的语言，实现代码高亮。

#!/usr/bin/env python3
print("Hello, World!");

7 换行和缩进

7.1 换行

Markdown 中，段落之间的换行是通过在段落之间留空行的方式来实现。

段落一

段落二

段落一

段落二

但我们会有其他的换行需求，可以这样实现：

  • 键入 HTML 语言换行标签：<br>（通用）。
  • 段落内换行使用换行符 <br>，或者 两个空格 + shift-Enter。不推荐使用 \ + shift-Enter。
  • Typora 中，空行中使用四个空格（一个 Tab）可以快速增大段落之间的间距。
春望<br>唐代：杜甫

国破山河在，城春草木深。  
感时花溅泪，恨别鸟惊心。  
烽火连三月，家书抵万金。  
白头搔更短，浑欲不胜簪。

春望
唐代：杜甫

国破山河在，城春草木深。
感时花溅泪，恨别鸟惊心。
烽火连三月，家书抵万金。
白头搔更短，浑欲不胜簪。

没有换行符，内容会在一行显示。

7.2 缩进

使用 Markdown 写文章不需要段首缩进。但如果你需要的话，可以在段落前面使用：

1、两个全角空格
因为一个全角空格（space）的宽度是整整一个汉字，输入两个全角空格正好是两个汉字的宽度。
全角空格的输入方法为：一般的中文输入法都是按 shift + space，可以切换到全角模式下，输完后再次按 shift + space 切换回正常输入状态。

2、使用特殊占位符
使用特殊占位符，不同占位符所占空白是不一样大的。

&ensp; or &#8194;  表示一个半角的空格
&emsp; or &#8195;  表示一个全角的空格
&emsp;&emsp;       两个全角的空格（用的比较多）
&nbsp; or &#160;   不断行的空白格

 表示一个半角的空格
 表示一个全角的空格
  两个全角的空格（用的比较多）
 不断行的空白格

8 表格

第一行为表头，第二行分隔表头和主体部分，第三行开始每一行为一个表格行。
列与列之间用管道符 | 隔开。
原生方式的表格每一行的两边也要有管道符。
第二行还可以为不同的列指定对齐方向。
默认为左对齐，可以使用冒号 : 来定义表格的对齐方式。
冒号在分隔符 - 右边右对齐，在分隔符 - 左边左对齐，在两边居中。

|学号|姓名|分数|
|---|---|---|
|小明|男|75|
|小红|女|79|
|小陆|男|92|

学号|姓名|语文|数学|英语
-|:-:|-:|:-:|:-
小明|男|75|87|73
小红|女|79|80|90
小陆|男|92|75|83
学号 姓名 分数
小明 男 75
小红 女 79
小陆 男 92
学号 姓名 语文 数学 英语
小明 男 75 87 73
小红 女 79 80 90
小陆 男 92 75 83

9 分割

可用三个以上的减号、星号、底线在一空行中建立一条分隔线，中间可以插入空格，但行内不能有其他东西。

---
***
___

10 折叠

HTML <details> 标签指定了用户可以根据需要打开和关闭的额外细节。
内容里面可以嵌套使用 Markdown 语法和 HTML 语法。

<details> <summary>标题</summary>
正文内容...
</details>
标题 正文内容...

11 注脚

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

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

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

示例：

使用 Markdown[^1] 可以效率的书写文档，直接转换成 HTML[^2], 你可以使用 Typora[^T] 软件。

[^1]:Markdown 是一种纯文本标记语言。
[^2]:HyperText Markup Language 超文本标记语言。
[^T]:Typora 官网 <https://typora.io/>

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

脚注显示在文章末尾；
脚注后方的链接可以直接跳转回到加注的地方。

12 影音

文件可以用 HTML 的方式嵌入到文本中。

12.1 音频

1、使用 HTML5 <audio> 元素

<audio src="audio.mp3">
</audio>

src 属性可以设置为一个音频文件的 URL 或者本地文件的路径。

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

2、外链播放器

进入 网易云音乐 歌曲界面，选择音乐，并生成外链播放器。

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

12.2 视频

1、HTML5 <video> 元素

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

<video src="video.mp4" controls>
</video>

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

<video width="320" controls loop>
  <source src="myVideo.mp4" type="video/mp4">
  <source src="myVideo.webm" type="video/webm">
  <source src="myVideo.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>

属性：

  • controls: 允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。
  • width: 视频显示区域的宽度，单位是CSS像素。
  • height: 展示区域的高度，单位是CSS像素。
  • loop: 布尔属性；指定后，会在视频结尾的地方，自动返回视频开始的地方。
  • src: 要嵌到页面的视频的URL。可选；你也可以使用video块内的 元素来指定需要嵌到页面的视频。

2、HTML 内联框架元素 <iframe>

和音频嵌入一样， <iframe> 能够将另一个 HTML 页面嵌入到当前页面中。

<iframe 
    src="https://……"
    width="800" 
    height="450" 
    frameborder="0" 
    allowfullscreen>
</iframe>

3、外链播放器

选择网络视频平台，可生成外链播放器，嵌入文本即可。

注：2、3本质上其实都是利用 <iframe> 内嵌。

13 特殊符号

特殊字符是相对于传统或常用的符号外，使用频率较少字符且难以直接输入的符号。
比如数学符号；单位符号；制表符等。

天空飞过一架 &#9992; ，好快。
写一封信，请发 &#9993; 到我的邮箱。
来给生活比个 &#9996; 吧。
还是要拿起笔，努力写写写 &#9997; 。
这是谁的 &#10084; 呀。
&#10085; &#10085; &#10085; 发射，出击。

天空飞过一架 ✈ ，好快。
写一封信，请发 ✉ 到我的邮箱。
来给生活比个 ✌ 吧。
还是要拿起笔，努力写写写 ✍ 。
这是谁的 ❤ 呀。
❥ ❥ ❥ 发射，出击。

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

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

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

标签: 博客

留言请移步 SANSUIZ | 留言单

授权协议 (CC) BY-NC-SA | 订阅 RSS | 邮箱 xmann_zh@foxmail.com | 回到顶部 🫠 |