Some weird tricks about Markdown

Since I started playing on GitHub a few years ago and came into contact with Markdown, I have been getting out of control. In all kinds of document editing, I have to use Markdown as much as possible, and also use it when I can’t — README, blog, official account, interface document, etc. This article, for example, was edited using Markdown.

In recent years, I have also found that more and more websites and programs provide support for Markdown, from GitHub and Jekyll, to Jane, Nuggets and CSDN, etc. Thus, I have learned some “strange techniques” from other people’s well-done documents. So this article is not an introduction to the basic syntax of Markdown, but rather some relatively advanced tricks that can make Markdown more interesting.

Note: Most of the following tips are made use of Markdown’s compatible HTML tags. They may not be fully supported on all websites and software. GitHub supports them.

Wrap a line in a table cell

With the help of HTML

implementation.

Sample code:

| Header1 | Header2                          |
|---------|----------------------------------|
| item 1  | 1. one<br />2. two<br />3. three |
Copy the code

Example effects:

Graphic mixed

<img align="right" SRC = "https://raw.githubusercontent.com/mzlogin/mzlogin.github.io/master/images/posts/markdown/demo.png" / > this is a sample picture. The picture appears to the right of N paragraphs of text. N is related to the height of the image. Refresh. Refresh. It should not be affected at this point, the line should extend to the bottom of the image, so I want it to be long enough to make sure I see it on different screens.Copy the code

Control image size and position

Standard Markdown picture tags! []() can not specify the image size and position, only the default image size, default left.

Sometimes the source image is too big and you want to zoom out a bit, or you want to center the image, you still need to use HTML tags to do this. The center of the image can be controlled by using the

Sample code:

** Picture default display effect: **! [] (https://raw.githubusercontent.com/mzlogin/mzlogin.github.io/master/images/posts/markdown/demo.png) * * after controlled the effect of: ** <div align="center"><img width="65" height="75" src="https://raw.githubusercontent.com/mzlogin/mzlogin.github.io/master/images/posts/markdown/demo.png"/></div>Copy the code

Example effects:

Image default display effect:

Formatted table

The table looks neat after rendering, but in the source file it might look like this:

|Header1|Header2|
|---|---|
|a|a|
|ab|ab|
|abc|abc|
Copy the code

I don’t know if you can stand it, but I can’t.

For example, if I use the Vim editor, I have the vim-table-mode plug-in, which can help me automatically format the table like this:

| Header1 | Header2 |
|---------|---------|
| a       | a       |
| ab      | ab      |
| abc     | abc     |
Copy the code

Doesn’t it look better?

It doesn’t matter if you don’t use Vim, for example, the Markdown-table-Formatter plug-in for Atom editor, MarkdownTableFormatter for Sublime Text 3, and many more offer similar solutions.

To use Emoji

My friends and I laughed. :smile:Copy the code

The beginning of a line indentation

Indentation with Spaces and tabs directly in Markdown is ignored after rendering. This is done by adding Spaces at the beginning of the line with HTML escape characters,   Represents half corner space,   Represents full space.

Sample code:

    Spring is coming, and it is the season of revival.Copy the code

Example effects:

Spring is coming, and it is the season of revival.

The task list

* * * * shopping list - [] disposable cups - [] - [x] watermelon soya-bean milk - Coca-Cola [x] - [] little classmatesCopy the code

Automatic Maintenance directory

Sometimes when maintaining a long document, it is hoped that the Table of Contents can be generated automatically according to the title in the document, and when the title is changed, the Contents can be automatically updated, which can reduce the workload and is not easy to make mistakes.

If you use the Vim editor, you can use the plugin VIm-Markdown-toc that I maintain to help you solve this perfectly:

The latter

Well, this is the end of this wave of clever tricks, I hope you can learn from this, better typesetting, focus on writing.

If you find this article helpful, please follow my wechat official account for more helpful content.

reference