7 Advanced Markdown Tips!

Step up your Markdown game with useful and practical tips.

Aravind Ramalingam
Analytics Vidhya

--

Photo by Suzy Hazelwood from Pexels

1. Align Images Horizontally

Want to display images side by side for comparison?

  • Place the images inside a table.
  • Have the image caption as the title.
Image Source

2. Using Reference for Links

Don’t repeat yourself by typing the URL multiple times in the same Markdown file. With the help of reference, we can define the link once and reuse it as many times as required.

3. Comment

You can add comments by wrapping the comment inside [] and following it with # or go with <!--Comment Here-->.

4. Embed Video with Thumbnail

Let the reader know that this is a video by having the screenshot (with video control buttons) as the thumbnail. By using the nested [], we can make a picture point to a video URL.

Credit

For rest of the tips, we are going to use HTML

5. Wrapping Text Around Image

Place the image in either side of the text by changing align value to left|right. Yes, this requires a bit of HTML, but works on most platforms like GitHub and Reddit.

Credit

6. Toggle Bar

Replicate Toggles from Notion using HTML. You can add open parameter for details tag to set the default behavior of the toggle/dropdown as opened. Header text is to be placed inside the summary tag. Since GitHub supports this functionality, try to make the most out of your README.

7. Line Breaks

Use br HTML tag. Can't believe that Markdown doesn't support this natively 🙄

--

--