Useful Links
- https://www.markdownguide.org/basic-syntax/
- https://www.markdownguide.org/extended-syntax/
- https://www.markdownguide.org/hacks/
- https://www.tablesgenerator.com/markdown_tables
- https://emojipedia.org/
Definition Lists
Definition lists don't appear to be supported in markdown but are supported using HTML
The HTML looks like this:
<dl>
<dt>First Term</dt>
<dd>This is the definition of the first term.</dd>
<dt>Second Term</dt>
<dd>This is one definition of the second term. </dd>
<dd>This is another definition of the second term.</dd>
</dl>
and the output:
- First Term
- This is the definition of the first term.
- Second Term
- This is one definition of the second term.
- This is another definition of the second term.
Lists
- Write the press release
- Update the website
- Contact the media
1. Write the press release
2. Update the website
3. Contact the media
- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media
and the output:
- Write the press release
- Update the website
- Contact the media
- Write the press release
- Update the website
- Contact the media
- Write the press release
- Update the website
- Contact the media
Highlighting
I need to highlight these **very important words**
and the output:
I need to highlight these very important words
Strikethrough
~~The world is flat.~~ We now know that the world is round.
and the output:
The world is flat. We now know that the world is round.
Super and sub scripting
H<sub>2</sub>O
X<sup>2</sup>
and the output:
H2O X2
Links
http://www.example.com
[A link with a tool tip](http://www.example.com "Example Tooltip")
and the output:
Images
Drag and drop images from file manager (pasting a copied image isn't currently supported) and you'll get a link which renders the image inline - you can also take the link and use it in tables as img src input for table cells shown below.
HTML Tables
<table>
<tr>
<td><img src=
"https://cordyceps.us-west.host.bsky.network/xrpc/com.atproto.sync.getBlob?did=did%3Aplc%3A2tm3ik7zyr2rkq42dot7vhis&cid=bafkreiap6cw6msrwayxcajc57ruysnf2b26ucslkvxxmagizsnya6bqmom"
alt="GFG Logo" >
</td>
<td><img src="https://cordyceps.us-west.host.bsky.network/xrpc/com.atproto.sync.getBlob?did=did%3Aplc%3A2tm3ik7zyr2rkq42dot7vhis&cid=bafkreiap6cw6msrwayxcajc57ruysnf2b26ucslkvxxmagizsnya6bqmom"
alt="GFG Logo"
</td>
</tr>
<tr>
<td><img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="GFG Logo" >
</td>
<td><img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="GFG Logo">
</td>
</tr>
</table>
and the output:
|
|
Limiting the image size in a table cell
<td><img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="GFG Logo" width="100"
height="100">
</td>
and the output:
An example where you want to have one image span more than one column of a table and the first image is a link to another site
<table>
<tr>
<td colspan="2"><a href="https://google.com"><img src=
"https://cordyceps.us-west.host.bsky.network/xrpc/com.atproto.sync.getBlob?did=did%3Aplc%3A2tm3ik7zyr2rkq42dot7vhis&cid=bafkreiap6cw6msrwayxcajc57ruysnf2b26ucslkvxxmagizsnya6bqmom"
alt="GFG Logo" />
</a>
</td>
</tr>
<tr>
<td><img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="GFG Logo" >
</td>
<td><img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="GFG Logo">
</td>
</tr>
<tr>
<td colspan="2"><img src=
"https://cordyceps.us-west.host.bsky.network/xrpc/com.atproto.sync.getBlob?did=did%3Aplc%3A2tm3ik7zyr2rkq42dot7vhis&cid=bafkreiap6cw6msrwayxcajc57ruysnf2b26ucslkvxxmagizsnya6bqmom"
alt="GFG Logo" >
</td>
</tr>
</table>
and the output:
|
|
|
Markdown Table - use tablesgenerator.com/markdown_tables for quick creation of a markdown table
Added emojis and pictures in the table. column 1 is left aligned, column 2 right aligned and columns 3 to 6 are center aligned.
| Header 1 | Header 2| Header 3 | Header 4 | Header 5 |Header 6 |
|---|--:|:-:|:-:|:-:|:-:|
| abc | ☑️ | | | |  |
| def | | | | ❎ |  |
| ghi | | | | |  |
| jkl | | ✔️ | Y | ❌ |  |
and the output:
| Header 1 | Header 2 | Header 3 | Header 4 | Header 5 | Header 6 |
|---|---|---|---|---|---|
| abc | ☑️ | ||||
| def | ❎ | ||||
| ghi | |||||
| jkl | ✔️ | Y | ❌ |
Using a markdown table to display images in a grid (similar to HTML version)
| | |
|:-:|:-:|
|  |  |
|  |  |
and the output:
Footnotes (the footnotes are appended at bottom of document)
Here's a simple footnote,[^1] and here's a longer one.[^bignote]
[^1]: This is the first footnote.
[^bignote]: Here's one with multiple paragraphs and code.
Indent paragraphs to include them in the footnote.
`{ my code }`
Add as many paragraphs as you like.
### A dummy block to show the footnote location
-
-
-
-
and the output:
Here's a simple footnote,1 and here's a longer one.2
