Markdown - Cheatsheet

By xngo on February 20, 2019

Note: Add newline before Image, List and Code statements. Otherwise, it will not work.

Image

  • Alt text is used when image is not found.
  • Title is useful for the screen reader.

Inline style

![your Alt text](/absolute/path/to/img.jpg)
![your Alt text](/absolute/path/to/img.jpg "Optional title")

Reference style

![your Alt text][id]
[id]: /absolute/path/to/img.jpg  "Optional title attribute"

Note: The reference style syntax should end without a space.

List

1. Before enumerating a list, you need a newline.
1. To add an image under a list item, add a line break, `<br /> ![your Alt text](/absolute/path/to/img.jpg)`.
  - Nested item
  1. Before enumerating a list, you need a newline.
  2. To add an image under a list item, add a line break, <br /> ![your Alt text](/absolute/path/to/img.jpg).
    • Nested item

Code

For inline code, add between backticks. e.g.`Your inline code here`.

For code block, start with at least 4 spaces or 1 tab.

Your code here

Links

Simple link

<https://openwritings.net>  

Inline style

[your link name](https://openwritings.net)
[your link name](https://openwritings.net "Optional Title")

Reference style

[your link caller name][link-id]
[link-id]: https://openwritings.net "Optional Title"

Quote

> This is a blockquote 
>  spanning to multiple lines.
> If you want to add a **line break** or **newline**, then add 2 spaces at the end of the line.

For Bootstrap, use <blockquote class="blockquote">.

Add youtube link

All in one line. I put the code in multiple lines for ease of reading.

[![IMAGE ALT TEXT HERE](https://openwritings.net/image0.jpg)]
(https://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)

Zoomable image

Resize the image and wrap a link around it to point to the original image. Either resize the image using CSS width or use Bootstrap class .img-thumbnail

[![](image.png){ width=400px }](image.png)

[![](image.png){ .img-thumbnail  }](image.png)

Escape characters

To put backtick inside an inline code, double backticks and add space to backtick.

`` ` `` 

To escape underscore(_), prefix with a backslash().

\_\_FILE\_\_

To escape backslash(\) within asterix(*), double backslashes.

**C:\\Program Files (x86)\\**

To embolden asterix, use HTML element, <b>.

<b>*** > Edit team</b>

About the author

Xuan Ngo is the founder of OpenWritings.net. He currently lives in Montreal, Canada. He loves to write about programming and open source subjects.