Try   HackMD

Markdown Cheatsheet

TOC

Headings

Use the number sign (#) followed by a blank space for notebook titles and section headings:

# for titles

## for major headings

### for subheadings

#### for 4th level subheadings

Text styling

Bold text:
__string__ or **string**

Italic text:
_string_ or *string*

Underline:
++inserted text++ -> inserted text

Mark with yellow:
==this is rendered as marked text== -> this is rendered as marked text

Subscript:
H~2~O -> H2O
X~i~ -> Xi
X~ij~ -> Xij

Superscript:
X^2^ -> X2
e^(-1/X)^ -> e(-1/X)

Monospace font

Surround text with a grave accent (`) also called a back single quotation mark, for example:

string

Line breaks

Add line breaks by entering line space.

Sometimes markdown doesn’t make line breaks when you want them. To force a linebreak, use the following code:

<br>

Indenting/quoting

Use the greater than sign (>) followed by a space, for example:

Text that will be indented when the Markdown is rendered.
Any subsequent text is indented until the next carriage return.

Lists

Unorderd lists

To create a circular bullet point, use one of the following methods. Each bullet point must be on its own line.

A hyphen (-) followed by one or two spaces, for example: - Bulleted item

A space, a hyphen (-) and a space, for example: - Bulleted item

An asterisk (*) followed by one or two spaces, for example: * Bulleted item

To create a sub bullet, press Tab before entering the bullet point using one of the methods described above. For example:

  • Main bullet point
    • Sub bullet point

Numbered/ordered lists

To create a numbered list, enter 1. followed by a space, for example:

  1. Numbered item
  2. Numbered item

For simplicity, you use 1. before each entry. The list will be numbered correctly when you run the cell.

To create a substep, press Tab before entering the numbered item, for example:

  1. Numbered item
    1. Substep

Checklist/ todo list

  • Incomplete item
  • Completed item

Collapsed text

Add collapsed text if user wants to see more details.

<details> collapsed text here </details>

collapsed text

Or use the following:

:::spoiler
This is a collapsed text.
:::

This is a collapsed text.

Mathematical Equations

Surround mathematical symbols with a dollar sign ($), for example:

$ mathematical symbols $

To include a math expression inline with your text, delimit the expression with a dollar symbol $.

This sentence uses $ delimiters to show math inline:

3x1+(1+x)2

To add a math expression as a block, start a new line and delimit the expression with two dollar symbols $$.

$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$

(k=1nakbk)2(k=1nak2)(k=1nbk2)

Example2:

When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$ and they are $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$

When

a0, there are two solutions to
(ax2+bx+c=0)
and they are
x=b±b24ac2a

Github on math equations

Latex math notation

Latex math symbols

We can create subscript and super script easily using math

Ab
Ab

Colored text/ Alert area

Use this code for coloring the text:
<font color=blue|red|green|pink|yellow>start your text here</font>

start your text here

or,
<p style="color:green">your text here.</p>

Example: write your text here

Make this text green.

Not all markdown code works within a font tag, so review your colored text carefully!

Colored note boxes

Use one of the following <div> tags to display text in a colored box.

The color of the box is determined by the alert type that you specify:

Blue boxes (alert-info)

:::info
This is a alert area.
:::

This is a alert area.

HTML syntax

<div class="alert alert-block alert-info">
<b>Tip:</b> Use blue boxes (alert-info) for tips and notes. 
If it’s a note, you don’t have to include the word “Note”.
</div>
Tip: Use blue boxes (alert-info) for tips and notes. If it’s a note, you don’t have to include the word “Note”.

Yellow boxes (alert-warning)

:::warning
This is a alert area.
:::

This is a alert area.

<div class="alert alert-block alert-warning">
<b>Example:</b> Use yellow boxes for examples that are not 
inside code cells, or use for mathematical formulas if needed.
</div>
Example: Use yellow boxes for examples that are not inside code cells, or use for mathematical formulas if needed.

Green boxes (alert-success)

:::success
This is a alert area.
:::

This is a alert area.

<div class="alert alert-block alert-success">
<b>Up to you:</b> Use green boxes sparingly, and only for some specific 
purpose that the other boxes can't cover. For example, if you have a lot 
of related content to link to, maybe you decide to use green boxes for 
related links from each section of a notebook.
</div>
Up to you: Use green boxes sparingly, and only for some specific purpose that the other boxes can't cover. For example, if you have a lot of related content to link to, maybe you decide to use green boxes for related links from each section of a notebook.

Red boxes (alert-danger)

:::danger
This is a alert area.
:::

This is a alert area.

<div class="alert alert-block alert-danger">
<b>Just don't:</b> In general, avoid the red boxes. These should only be
used for actions that might cause data loss or another major issue.
</div>
Just don't: In general, avoid the red boxes. These should only be used for actions that might cause data loss or another major issue.

Images

  • You can attach image files directly to a notebook in Markdown cells by dragging and dropping it into the cell.
  • You can copy image and paste it in markdown cell using 'ctrl+V'

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • You can copy image address and mention it below code:

![](http://image_address)

Geometric shapes

Use &# followed by the decimal or hex reference number for the shape.

Example: ►

For a list of reference numbers, see
https://www.w3schools.com/charsets/ref_utf_geometric.asp

Horizontal lines

use *** or ---



Internal links

To link to a section within your notebook, use the following code:
[Section title](#section-title)

For the text inside the parentheses, replace any spaces and special characters with a hyphen. For example, if your section is called 'Colored note boxes', you'd enter:
Colored note boxes

Alternatively, you can add an ID above the section:
<a id="section_ID"></a>

Important: Each ID in the notebook must be unique.

To link to a section that has an ID, use the following code:
[Section title](#section_ID)

Important: Test all internal links to ensure that they work.

To link to an external site, use the following code:

Markdown for Jupyter notebooks cheatsheet

Markdown guide