Advanced Markdown Examples
Adventures in markdown, round 2! This round demonstrates how advanced markdown is styled on blog pages.
ℹ️ Quotes are from the markdown guide on extended syntax.
⚠️ Availability:
Not all Markdown applications support extended syntax elements. You’ll need to check whether or not the lightweight markup language your application is using supports the extended syntax elements you want to use. If it doesn’t, it may still be possible to enable extensions in your Markdown processor.
Table of Contents
1. [Checklists](#checklists)
2. [Dropdowns](#dropdowns)
3. [Tables](#tables)
Checklists
To create checklist, add dashes (-) and brackets with a space ([ ]) in front of task list items. To select a checkbox, add an x in between the brackets ([x]).
- [x] thing 1
- [ ] thing 2
- thing 1
- thing 2
Dropdowns
<details>
<summary>Example</summary>
This is a dropdown with text!
</details>
Example
This is a dropdown with text!Strikethrough
This markdown processor does ~~not~~ support strikethrough.
This markdown processor does not support strikethrough.
Tables
To add a table, use three or more hyphens (---) to create each column’s header, and use pipes (|) to separate each column. For compatibility, you should also add a pipe on either end of the row.
Tip: Creating tables with hyphens and pipes can be tedious. To speed up the process, try using the Markdown Tables Generator or AnyWayData Markdown Export. Build a table using the graphical interface, and then copy the generated Markdown-formatted text into your file.
Text Table
| Syntax | Description |
| ----------- | ----------- |
| Header | Title |
| Paragraph | Text |
| Syntax | Description |
|---|---|
| Header | Title |
| Paragraph | Text |
Image Table
| | | |
|-|-|-|
| |  | |
| |  | |
 | | |
| |
Photo by Jeremy Bishop on Unsplash
Image & Text Table
| | |
-|-
 | Photo by <a href="https://unsplash.com/photos/time-lapse-photography-of-ocean-waves-iftBhUFfecE">Jeremy Bishop</a> on <a href="https://unsplash.com/photos/time-lapse-photography-of-ocean-waves-iftBhUFfecE">Unsplash</a>
 | 
Photo by <a href="https://unsplash.com/photos/time-lapse-photography-of-ocean-waves-iftBhUFfecE">Jeremy Bishop</a> on <a href="https://unsplash.com/photos/time-lapse-photography-of-ocean-waves-iftBhUFfecE">Unsplash</a> | Photo by <a href="https://unsplash.com/photos/time-lapse-photography-of-ocean-waves-iftBhUFfecE">Jeremy Bishop</a> on <a href="https://unsplash.com/photos/time-lapse-photography-of-ocean-waves-iftBhUFfecE">Unsplash</a>
| Photo by Jeremy Bishop on Unsplash |
| |
| Photo by Jeremy Bishop on Unsplash | Photo by Jeremy Bishop on Unsplash |
Alignment
You can align text in the columns to the left, right, or center by adding a colon (:) to the left, right, or on both side of the hyphens within the header row.
| Syntax | Description | Test Text |
| :--- | :----: | ---: |
| Header | Title | Here's this |
| Paragraph | Text | And more |
| Syntax | Description | Test Text |
|---|---|---|
| Header | Title | Here’s this |
| Paragraph | Text | And more |