Markdown Mastery: Advanced Techniques
Delve into advanced Markdown techniques with custom examples tailored to test specific or rare styling cases. Explore shortcode notifications/alerts, manipulate image sizes, and create ordered/unordered heading lists.
Markdown Alerts
Various alert notification styles:
Note
Syntax:
> [!NOTE]
> Useful information that users should know, even when skimming content.
Output:
Tip
Syntax:
> [!TIP]
> Helpful advice for doing things better or more easily.
Output:
Syntax:
Important
> [!IMPORTANT]
> Key information users need to know to achieve their goal.
Output:
Warning
Syntax:
> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.
Output:
Caution
Syntax:
> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.
Output:
Note
Syntax:
> **Note**\
> This is a note
Output:
Note
This is a note
Markdown Images
Syntax:
Output:
Markdown Headings
Heading <h1>
Syntax:
# Heading
- # Heading
1. # Heading
Output:
Heading
Heading
Heading
Heading <h2>
Syntax:
## Heading
- ## Heading
1. ## Heading
Output:
Heading
Heading
Heading
Heading <h3>
Syntax:
### Heading
- ### Heading
1. ### Heading
Output:
Heading
Heading
Heading
Heading <h4>
Syntax:
#### Heading
- #### Heading
1. #### Heading
Output:
Heading
Heading
Heading
Heading <h5>
Syntax:
##### Heading
- ##### Heading
1. ##### Heading
Output:
Heading
Heading
Heading
Heading <h6>
Syntax:
###### Heading
- ###### Heading
1. ###### Heading
Output:
Heading
Heading
Heading
Shortcode Alerts
This only applies to Homelab-Alpha website
This is the default alert without any options.
No context
or icon parameter defined.
Markdown and HTML will be rendered. This next sentence demonstrates the colour of a link inside an alert box. We’re currently designing a new way to integrate the Payment Element, which allows you to create the PaymentIntent or SetupIntent after you render the Payment Element. If you’re interested in learning more about this feature.
Beginning of a second paragraph.
The default context icon
can be overridden with an emoji by setting the named parameter icon
to the emoji of choice. e.g.
{{< alert icon="🎃" text=“Make sure to always self-close the alert shortcode.” />}}
icon to an empty space. e.g.{{\< alert icon=" " text="Make sure to always self-close the alert shortcode." />}}
This next sentence demonstrates the colour of a link inside an alert box.
Hello World
Hello World
Hello World
The Tutorial is intended for novice to
intermediate users.
Hello World This next sentence demonstrates the
colour of a link inside an alert box.
Last updated 22 Sep 2024, 12:15 CEST .