Hacks

Hacks #

说明 #

大多数使用Markdown的人会发现 基本语法和 扩展语法已经基本可以满足他们的需求。但是，如果你使用 Markdown 的时间足够长，你不可避免地会发现它不支持你需要的东西。本页提供了官方未正式支持的一些特殊用法和技巧。

提示： 不能保证这些技巧在您的 Markdown 应用程序中有效。如果你需要经常使用这些技巧，你应该考虑使用 Markdown 以外的其他方法进行编写。

下划线 #

带下划线的文本通常不是你在 Web 写作中看到的，可能是因为带下划线的文本几乎是链接的同义词。但是，如果您正在撰写论文或报告，则可能需要为单词和短语添加下划线的功能。 Bear 和 Simplenote 等几个应用程序支持为文本添加下划线，但 Markdown 本身不支持下划线。如果您的 Markdown 处理器支持 HTML，则可以使用 <ins> HTML 标签为文档中的文本添加下划线。

这是关于<ins>下划线</ins>的一则使用实例。

显示效果如下：

这是关于下划线的一则使用实例。

缩进 #

制表符(Tab)和空格在 Markdown 中具有特殊含义。您可以使用尾随空格创建 换行符，也可以使用制表符(Tab)创建 代码块。但是，如果您需要使用 Tab 键以老式方式缩进段落，该怎么办？Markdown 没有提供一种简单的方法来做到这一点。

最好的办法可能是使用支持缩进的 Markdown 编辑器。

另外一种比较通用的做法就是使用HTML空格代码&nbsp;来实现，我们可以用四个&nbsp;来实现缩进功能。

&nbsp;&nbsp;&nbsp;&nbsp;这是一个缩进的短路内容。

显示效果如下：

    这是一个缩进的段落内容。

居中对齐 #

如同上面的缩进一样，Markdown本身没有居中排版功能，因此可以使用HTML代码<center>来实现该功能。

<center>这是一段居中文本内容。</center>

显示效果如下：

这是一段居中文本内容。

<center>当前仍然可以使用，但HTML规范中已经 弃用，因此比较保险的替代方法是使用CSS功能来实现居中对齐，如下：

<p style="text-align:center">这是一段居中文本内容。</p>

显示效果如下：

这是一段居中文本内容。

颜色 #

Markdown不支持改文本的颜色，因此可以使用 HTML 标记来指定文字颜色。

<font color="red">红色</font>、<font color="green">绿色</font>和<font color="blue">蓝色</font>被称为三原色。

显示效果如下：

红色、绿色和蓝色被称为三原色。

不幸的是 <font> 也已经 弃用，因此建议使用CSS方法来实现颜色设置。

<p style="color:blue">这一段蓝色的文字。</p>

显示效果如下：

这一段蓝色的文字。

备注 #

有时我们需要在Markdown文档中写一些只有作者能看到，但不会渲染输出的内容，就像备注一样，Markdown本身不支持该功能，我们可以通过其他方法来实现该功能。

将备注内容放到中括号([])内，并且在后面紧跟冒号(:)、空格和井号(#)，例如 [备注]: #，并且在备注内容前后加上空白行。

这是一个可见的段落。

[这段备注文字将不会被显示]: # 

这是另一个可见的段落。

显示结果如下：

这是一个可见的段落。

这是另一个可见的段落。

这个技巧来自于Stack Overflow，已经被数以千计的人使用！

Admonitions #

Admonitions are frequently used in documentation to call attention to warnings, notes, and tips. Markdown doesn’t provide special syntax for admonitions, and most Markdown applications don’t provide support for admonitions (one exception is MkDocs).

However, if you need to add admonitions, you might be able to use blockquotes with emoji and emphasis to create something that looks similar to the admonitions you see on other websites.

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

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

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

The rendered output looks like this:

⚠️ Warning: Do not push the big red button.

📝 Note: Sunrises are beautiful.

💡 Tip: Remember to appreciate the little things in life.

Image Size #

The Markdown syntax for images doesn’t allow you to specify the width and height of images. If you need to resize an image and your Markdown processor supports HTML, you can use the img HTML tag with the width and height attributes to set the dimensions of an image in pixels.

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

The rendered output will contain the image resized to the dimensions you specified.

Image Captions #

Markdown doesn’t natively support image captions, but there are two possible workarounds. If your Markdown application supports HTML, you can use the figure and figcaption HTML tags to add a caption for your image.

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

The rendered output looks like this:

{% include image.html file="/assets/images/albuquerque.jpg" alt="Albuquerque, New Mexico" lazy="yes" %}
A single track trail outside of Albuquerque, New Mexico.
Tip: If your Markdown application supports CSS, you can use CSS to style the appearance of the caption.

If your Markdown application doesn’t support HTML, you could try placing the caption directly below the image and using emphasis.

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

The rendered output looks like this:

{% include image.html file="/assets/images/albuquerque.jpg" alt=“Albuquerque, New Mexico” lazy=“yes” %} A single track trail outside of Albuquerque, New Mexico.

Some people like creating links that open in new tabs or windows. The Markdown syntax for links doesn’t allow you to specify the target attribute, but if your Markdown processor supports HTML, you can use HTML to create these links.

<a href="https://markdown.hk" target="_blank">Learn Markdown!</a>

The rendered output looks like this:

Learn Markdown!

Symbols #

Markdown doesn’t provide special syntax for symbols. However, in most cases, you can copy and paste whatever symbol you want to use into your Markdown document. For example, if you need to display Pi (π), just find the symbol on a webpage and copy and paste it into your document. The symbol should appear as expected in the rendered output.

Alternatively, if your Markdown application supports HTML, you can use the HTML entity for whatever symbol you want to use. For example, if you want to display the copyright sign (©), you can copy and paste the HTML entity for copyright (&copy;) into your Markdown document.

Here’s a partial list of HTML entities for symbols:

  • Copyright (©) — &copy;
  • Registered trademark (®) — &reg;
  • Trademark (™) — &trade;
  • Euro (€) — &euro;
  • Left arrow (←) — &larr;
  • Up arrow (↑) — &uarr;
  • Right arrow (→) — &rarr;
  • Down arrow (↓) — &darr;
  • Degree (°) — &#176;
  • Pi (π) — &#960;

For a complete list of available HTML entities, refer to Wikipedia’s page on HTML entities.

Table Formatting #

Markdown tables are notoriously finicky. You can’t use many Markdown syntax elements to format the text in table cells. But there are workarounds for at least two common table issues: Line breaks and lists.

Line Breaks Within Table Cells #

You can separate paragraphs within a table cell by using one or more <br> HTML tags.

| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title |
| Paragraph   | First paragraph. <br><br> Second paragraph. |

The rendered output looks like this:

Syntax Description
Header Title
Paragraph First paragraph.

Second paragraph.

Lists Within Table Cells #

You can add a list within a table cell by using HTML tags.

| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title |
| List        | Here's a list! <ul><li>Item one.</li><li>Item two.</li></ul> |

The rendered output looks like this:

Syntax Description
Header Title
List Here's a list!
  • Item one.
  • Item two.

Table of Contents #

Some Markdown applications like Markdeep can automatically generate a table of contents (also referred to as a toc) from your headings, but this isn’t a feature provided by all Markdown applications. However, if your Markdown application supports heading IDs, you can create a table of contents for your Markdown file using a list and some links.

#### Table of Contents

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

The rendered output looks like this:

Table of Contents

Videos #

If your Markdown application supports HTML, you should be able to embed a video in your Markdown file by copying and pasting the HTML code provided by a video website like YouTube or Vimeo. If your Markdown application doesn’t support HTML, you can’t embed a video, but you can come close by adding an image and a link to the video. You could do this with practically any video on any video service.

Since YouTube makes this easy, we’ll use them as an example. Take this video, for instance: https://www.youtube.com/watch?v=8q2IjQOzVpE. The last part of the URL (8q2IjQOzVpE) is the ID of the video. We can take that ID and put it in the following template:

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

YouTube automatically generates an image for every video (https://img.youtube.com/vi/YOUTUBE-ID/0.jpg), so we can use that and link the image to the video on YouTube. After we replace the image alt text and add the ID of the video, our example looks like this:

[![Less Than Jake — Scott Farcas Takes It On The Chin](https://img.youtube.com/vi/PYCxct2e0zI/0.jpg)](https://www.youtube.com/watch?v=PYCxct2e0zI)

The rendered output looks like this:

Less Than Jake — Scott Farcas Takes It On The Chin

Logo