Some of the tricks when writing Markdown files.

How to color text

To color some text, we can use the font tag, which is deprecated in HTML5.

<font color="red">red text</font>

We can also use the span tag:

<span style="color:blue">this is blue text</span>.

To color entire paragraph, the p tag can be used:

<p style="color:red">This is a paragraph.</p>

How to center align image and set image size

To center align image and set image size, we can combine the p tag and img tag:

<p align="center">
<img src="URL" width="800">
</p>

The above HTML code will center the image and also set its width to 800 pixels.

Create collapsible content

Sometimes, it is handy to create some collapsible content to make the post concise. Like what is shown below.

Click to show the code.
import random

nums = list(range(100))
print(random.choices(nums, k=10))

We can use the detail tag to achieve this:

<details>
<summary><font size="2" color="red">Click to show the code.</font></summary>

```
import random

nums = list(range(100))
print(random.choices(nums, k=10))
```
</details>

Create anchor for text

Sometimes, we want to anchor a position in the post so that when the reader click its reference, they will be brought to the referred position. This can be achieved by using anchor tag. For example, click here to go to first section.

The code to achieve this is:

# <a name="color_text"></a>How to color text?

click [here](#color_text) to go to first section.

This works both for Markdown headers and normal text in some Markdown flavor.

For some Markdown variant, to go to a header, remove all punctuations in the header title and turn all text in header to lowever case and replace space with -, click here to go to section 1.

Literal backticks in inline code or code blocks

Backtick in ininlie code block

To use backticks inside inline code blocks, we can use more backticks as the openning and closing inline code delimiter. For example, to produce foo`, use the following:

`` foo` ``

How to render three backticks in code blocks

Since the usual delimiter for code block is three backticks, using three literal backticks inside the usual three-backtick code block will result in rendering problems.

To fix this problem we can use more backticks as the code block delimiter.

References