Skip to main content

技巧

Markdown 官方不支持的解决方法。

概述

大多数使用 Markdown 的人会发现 基本扩展语法 元素可以满足他们的需求。但是,如果你使用 Markdown 的时间足够长,你不可避免地会发现它不支持你需要的某些功能。本页提供了解决 Markdown 限制的提示和技巧。

提示

这些技巧不能保证在你的 Markdown 应用程序中有效。如果你需要经常使用这些技巧,你应该考虑使用 Markdown 以外的其他工具进行编写。

下划线

下划线文本在网络写作中并不常见,这可能是因为下划线文本几乎与链接同义。但是,如果你正在撰写论文或报告,你可能需要强调单词和短语。像 BearSimplenote 这样的应用程序支持下划线文本,但 Markdown 本身不支持下划线。如果你的 Markdown 处理器支持 HTML,你可以使用<ins> HTML 标记在下划线文本在你的文档中添加下划线。

Some of these words <ins>will be underlined</ins>.

渲染后的输出如下所示

其中一些单词 将带有下划线

缩进(制表符)

制表符和空格在 Markdown 中有特殊的含义。你可以使用尾随空格来创建 换行符,并且可以使用制表符来创建 代码块。但是,如果你需要使用老式方法(使用制表符键)缩进段落,该怎么办?Markdown 没有提供一种简单的方法来实现此目的。

你最好的办法可能是使用支持缩进的 Markdown 编辑器。这在更面向桌面出版的应用程序中很常见。例如,iA Writer 允许你自定义应用程序首选项中的编辑器缩进设置。它还提供了模板自定义选项,以便你可以使渲染后的文档看起来符合你的预期,包括缩进。

另一个选择是,如果你的 Markdown 处理器支持 HTML,你可以使用非换行空格的 HTML 实体 (&nbsp;)。这可能是你的最后选择,因为它可能会很尴尬。基本上,Markdown 源中的每个&nbsp;都将在渲染后的输出中替换为空格。因此,如果你在段落之前粘贴四个&nbsp;实例,该段落看起来就像缩进了四个空格。

&nbsp;&nbsp;&nbsp;&nbsp;This is the first sentence of my indented paragraph.

渲染后的输出如下所示

    这是缩进段落的第一个句子。

居中

在撰写论文或报告时,居中对齐文本的能力是必需的。不幸的是,Markdown 没有任何文本对齐概念(一个可能的例外是使用 表格对齐功能)。好消息是,您可以使用一个 HTML 标签:<center>。如果您的 Markdown 处理器支持 HTML,您可以将这些标签放在您想要居中对齐的任何文本周围。

<center>This text is centered.</center>

渲染后的输出如下所示

此文本居中。

从技术上讲,<center> HTML 标签受支持,但官方 已弃用,这意味着它现在可以使用,但您不应该使用它。不幸的是,没有其他纯 HTML 替代方案。您可以尝试使用 CSS 替代方案之一。并非所有 Markdown 应用程序都提供 CSS 支持,但如果您正在使用的应用程序提供支持,这里有一个 <center> 标签的替代方案

<p style="text-align:center">Center this text</p>

如果您的 Markdown 应用程序支持此功能,输出如下所示

Center this text

注意

在Docusaurus中,如果你想设置内联样式,需要传递一个对象给 style 属性。例如:

<div style={{ marginRight: '10px', color: 'red' }}>
这是一个示例文本。
</div>

说明: 因为在Docusaurus中使用了JSX语法,所以将每个样式属性作为对象的一个键值对。样式名使用驼峰命名法,如 marginRight 而不是 margin-right。

否则编译报错:The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

颜色

Markdown 不允许您更改文本颜色,但如果您的 Markdown 处理器支持 HTML,您可以使用 <font> HTML 标签。color 属性允许您使用颜色的名称或十六进制 #RRGGBB 代码指定字体颜色。

<font color="red">This text is red!</font>

渲染后的输出如下所示

此文本为红色!

从技术上讲,<font> HTML 标签受支持,但官方 已弃用,这意味着它现在可以使用,但您不应该使用它。不幸的是,没有其他纯 HTML 替代方案。您可以尝试使用 CSS 替代方案之一。并非所有 Markdown 应用程序都提供 CSS 支持,但如果您正在使用的应用程序提供支持,这里有一个 <font> 标签的替代方案

<p style="color:blue">Make this text blue.</p>

如果您的 Markdown 应用程序支持此功能,输出如下所示

将此文本设为蓝色。

注释

有些人需要在 Markdown 文件中编写句子,而这些句子不会出现在呈现的输出中。这些注释本质上是隐藏文本。作者可以看到文本,但不会将其打印在网页或 PDF 上。Markdown 本身不支持注释,但一些有进取心的人已经想出了一个解决方案。

要添加注释,请将文本放在方括号内,后跟冒号、空格和井号(例如,[comment]: #)。应在注释前后留空行。

这是一个将显示的段落。

[这里是注释内容,将不会显示。]: #

这是另一个将显示的段落。

这是一个将显示的段落。

这是另一个将显示的段落。

提示

此提示来自 Stack Overflow。它经过同行评审,并被成千上万人使用!

警告

警告在文档中经常用于引起对警告、注释和提示的注意。Markdown 未提供用于警告的特殊语法,并且大多数 Markdown 应用程序不支持警告(一个例外是 MkDocs)。

但是,如果你需要添加警告,你也许可以使用 引用块表情符号强调 来创建一些类似于你在其他网站上看到的警告。

> :warning: **Warning:** Do not push the big red button.

> :memo: **Note:** Sunrises are beautiful.

> :bulb: **Tip:** Remember to appreciate the little things in life.

渲染后的输出如下所示

⚠️ 警告: 不要按那个大红按钮。

📝 注释: 日出很美。

💡 提示: 别忘了欣赏生活中的小事。

图像大小

用于 图像 的 Markdown 语法不允许你指定图像的宽度和高度。如果你需要调整图像大小,并且你的 Markdown 处理器支持 HTML,则可以使用 img HTML 标记以及 width 和 height 属性来以像素为单位设置图像的尺寸。

<img src="image.png" width="200" height="100">

呈现的输出将包含调整到你指定尺寸的图像。

图像标题

Markdown 本身不支持图片标题,但有两种可能的解决方法。如果你的 Markdown 应用程序支持 HTML,你可以使用 figurefigcaption HTML 标签为图片添加标题。

<figure>
<img src="/assets/images/albuquerque.jpg"
alt="Albuquerque, New Mexico">
<figcaption>A single track trail outside of Albuquerque, New Mexico.</figcaption>
</figure>

渲染后的输出如下所示

Albuquerque, New Mexico
新墨西哥州阿尔伯克基市外的一条单轨小径。说明,这里限制了宽度、高度。
提示

如果你的 Markdown 应用程序支持 CSS,你可以使用 CSS 来设置标题的外观。

如果你的 Markdown 应用程序不支持 HTML,你可以尝试将标题直接放在图片下方,并使用 强调

![Albuquerque, New Mexico](/assets/images/albuquerque.jpg)
*A single track trail outside of Albuquerque, New Mexico.*

渲染后的输出如下所示

Albuquerque, New Mexico 新墨西哥州阿尔伯克基市外的一条单轨小径。

注意

在Docusaurus中,所有的HTML标签必须闭合。例如:在 Docusaurus 中,使用 HTML 的 <img> 标签时,需要确保它是自闭合的。

<img src="your-image-url.jpg" alt="Description" />

后面用的<br/>一样要注意使用闭合的写法!

有些人喜欢创建在新标签或窗口中打开的链接。Markdown 的 链接 语法不允许你指定 target 属性,但如果你的 Markdown 处理器支持 HTML,你可以使用 HTML 来创建这些链接。

<a href="http://markdownguide.cn" target="_blank">Learn Markdown!</a>

渲染后的输出如下所示

学习 Markdown!

符号

Markdown 没有为符号提供特殊语法。但是,在大多数情况下,你可以将任何你想要使用的符号复制并粘贴到你的 Markdown 文档中。例如,如果你需要显示圆周率 (π),只需在网页上找到该符号,并将其复制并粘贴到你的文档中。该符号应按预期出现在渲染输出中。

或者,如果你的 Markdown 应用程序支持 HTML,你可以使用 HTML 实体来表示任何你想要使用的符号。例如,如果你想要显示版权符号 (©),你可以将版权的 HTML 实体 (©) 复制并粘贴到你的 Markdown 文档中。

以下是符号的 HTML 实体的部分列表

  • 版权 (©) — &copy;
  • 注册商标 (®) — &reg;
  • 商标 (™) — &trade;
  • 欧元 (€) — &euro;
  • 左箭头 (←) — &larr;
  • 上箭头 (↑) — &uarr;
  • 右箭头 (→) — &rarr;
  • 下箭头 (↓) — &darr;
  • 度数 (°) — &#176;
  • 圆周率 (π) — &#960;

有关可用 HTML 实体的完整列表,请参阅维基百科上有关 HTML 实体 的页面。

表格格式化

Markdown 表格 出了名的挑剔。你不能使用许多 Markdown 语法元素来设置表格单元格中的文本格式。但至少有两种常见的表格问题有解决方法:换行符和列表。

表格单元格内的换行符

您可以在表格单元格内使用一个或多个 <br> HTML 标记来分隔段落。

SyntaxDescription
HeaderTitle
ParagraphFirst paragraph.

Second paragraph.

渲染后的输出如下所示

语法描述
页眉标题
段落第一段。

第二段。

表格单元格内的列表

您可以使用 HTML 标记在表格单元格内添加列表。

SyntaxDescription
HeaderTitle
ListHere's a list!
  • Item one.
  • Item two.

渲染后的输出如下所示

语法描述
页眉标题
列表这是一个列表!
  • 项目一。
  • 项目二。

目录

一些 Markdown 应用程序(如 Markdeep)可以从您的 标题 中自动生成目录(也称为 toc),但并非所有 Markdown 应用程序都提供此功能。但是,如果您的 Markdown 应用程序支持 标题 ID,您可以使用 列表 和一些 链接 为您的 Markdown 文件创建目录。

Table of Contents

- [Underline](#underline)
- [Indent](#indent-tab)
- [Center](#center)
- [Color](#color)

渲染后的输出如下所示

目录

视频

如果您的 Markdown 应用程序支持 HTML ,您应该能够通过复制并粘贴 YouTube 或 Vimeo 等视频网站提供的 HTML 代码来将视频嵌入到您的 Markdown 文件中。如果您的 Markdown 应用程序不支持 HTML,您将无法嵌入视频,但您可以通过添加 图像 和指向视频的链接来实现类似的效果。您几乎可以在任何视频服务上的任何视频上执行此操作。

由于 YouTube 使此操作变得非常简单,因此我们将使用它们作为示例。例如,采用此视频:https://www.youtube.com/watch?v=8q2IjQOzVpE。URL 的最后一部分 (8q2IjQOzVpE) 是视频的 ID。我们可以获取该 ID 并将其放入以下模板中

[![Image alt text](https://img.youtube.com/vi/YOUTUBE-ID/0.jpg)](https://www.youtube.com/watch?v=YOUTUBE-ID)

YouTube 会自动为每个视频生成一张图像 (https://img.youtube.com/vi/YOUTUBE-ID/0.jpg),因此我们可以使用该图像并将 图像链接 到 YouTube 上的视频。在我们替换图像替代文本并添加视频 ID 后,我们的示例如下所示

渲染后的输出如下所示