Ever since I started playing around with GitHub a few years ago and got introduced to Markdown, I have fallen in love with it. I try to use Markdown whenever possible for various document editing purposes - READMEs, blogs, API documentation, and more.
Over the years, I have noticed that more and more websites and programs are providing support for Markdown. From the initial platforms I encountered like GitHub and Jekyll, to platforms like Jian Shu and CSDN, I have learned some "tips and tricks" from well-made documents. Therefore, this article is not an introduction to the basic syntax of Markdown, but rather a collection of relatively advanced techniques that can be used to add more variety to your Markdown.
Note: Most of the following techniques rely on the compatibility of Markdown with certain HTML tags, so they may not be fully supported on all websites and software. The main reference for support is GitHub.
Line Breaks in Table Cells#
Use the <br /> tag from HTML to achieve this.
Example code:
| Header1 | Header2 |
| ------- | -------------------------------- |
| item 1 | 1. one<br />2. two<br />3. three |
Example result:
| Header1 | Header2 |
|---|---|
| item 1 | 1. one 2. two 3. three |
Mixing Images and Text#
Use the <img> tag to insert images and specify the align attribute.
Example code:
<img align="right" src="https://raw.githubusercontent.com/mzlogin/mzlogin.github.io/master/images/posts/markdown/demo.png"/>
This is an example image.
The image is displayed to the right of N lines of text.
N depends on the height of the image.
Filling the screen.
Filling the screen.
By now, the text should not be affected. This line should extend just below the image, so I need to make it long enough to ensure the effect is visible on different screens.
Controlling Image Size and Position#
The standard Markdown image syntax ![]() does not allow you to specify the size and position of the image. It relies on the default image size and aligns it to the left.
However, sometimes you may want to reduce the size of the original image or center it, which requires the use of HTML tags. To center the image, you can use the <div> tag with the align attribute, and to control the width and height of the image, use the width and height attributes.
Example code:
Default image display:
Controlled display:
<div align="center">
<img
width="65"
height="75"
src="https://raw.githubusercontent.com/mzlogin/mzlogin.github.io/master/images/posts/markdown/demo.png"
/>
</div>
Doesn't it look more pleasing?
Using Emoji#
This is an extension to the standard Markdown syntax introduced by GitHub. Using emojis can make the text more lively.
Example code:
My friends and I are all laughing. :smile:
Example result:
My friends and I are all laughing. 😄
For more available emoji codes, refer to https://www.webpagefx.com/tools/emoji-cheat-sheet/.
Indenting at the Beginning of a Line#
Directly indenting with spaces and tabs in Markdown will be ignored during rendering. You need to use HTML escape characters to add spaces at the beginning of a line. Use   for half-width spaces and   for full-width spaces.
Example code:
  Spring has arrived, and it's the season of rebirth for all things.
Displaying Mathematical Formulas#
If you are using GitHub Pages and Hexo, you can use MathJax to elegantly display mathematical formulas (not as images). Refer to http://wanguolin.github.io/mathmatics_rending/ for more information.
If you are working on a README or other places in a GitHub project, the only solution I have found so far is to use images. Here is a convenient way to do it:
- Enter the LaTeX formula in the input box on the website
https://www.codecogs.com/latex/eqneditor.php, for example,$$x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$. - Copy the URL Encoded content at the bottom of the website, for example, the formula mentioned above generates
https://latex.codecogs.com/png.image?%5Chuge%20%5Cdpi%7B300%7D%5Cdpi%7B200%7D%5Cint%20%5Cfrac%7B1%7D%7Bx%7D%20dx%20=%20%5Cln%20%5Cleft%7C%20x%20%5Cright%7C%20+%20C. - Use the above URL to insert the image in the desired location, for example:
Task Lists#
On websites like GitHub and GitLab, in addition to using ordered and unordered lists, you can also use task lists, which are great for listing out checklists.
Example code:
**Shopping List**
- [ ] Disposable cup
- [x] Watermelon
- [ ] Soy milk
- [x] Coca-Cola
- [ ] Xiao Ming
Automatically Maintaining a Table of Contents#
Sometimes, when maintaining a long document, you may want to automatically generate a Table of Contents based on the headings in the document. It should also update automatically when the headings change, reducing workload and minimizing errors.
If you use the Vim editor, you can use the vim-markdown-toc plugin to perfectly solve this problem.
[[toc]]
If you use other editors, you can usually find corresponding solutions. For example, the markdown-toc plugin for Atom, or the MarkdownTOC plugin for Sublime Text.
Conclusion#
That's it for this round of tips and tricks. I hope you find them helpful after learning about them.
If you found this article helpful, feel free to follow my channel for more helpful content.
References#
https://raw.githubusercontent.com/matiassingers/awesome-readme/master/readme.md
https://www.zybuluo.com/songpfei/note/247346
https://www.youtube.com/channel/UCOE6Ckq2Pip08Ia1Zg6dUGA