Admonition
Admonitions allow you to insert eye-catching callout boxes in your content.
Example: Markdown syntax with custom icon
> [!TIP]+ Custom Title
> This is a collapsible tip with a custom icon.
{icon="twitter"}Custom Title
This is a collapsible tip with a custom icon.
Supported types
Valid admonition types include GitHub alert types and Obsidian callout types. The types are case-insensitive.
GitHub types: NOTE, TIP, IMPORTANT, WARNING, CAUTION
Obsidian types: note, abstract, info, todo, tip, success, question, warning, failure, danger, bug, example, quote
Figure
Other than the markdown image syntax , Yore includes a figure shortcode for adding images to content. It provides more detail control to the markdown syntax.
You should always choose markdown syntax unless you need to insert custom classes to the images.
| Parameter | Description |
|---|---|
src | Required. The local path/filename or URL of the image. |
alt | Alternative text description for the image. |
caption | Markdown for the image caption, displayed below the image. |
class | Additional CSS classes to apply to the image. |
href | URL that the image should be linked to. |
target | The target attribute for the href URL. |
Example: Image with caption and link
{{< figure
src="img/07.webp"
alt="Nature scene"
caption="A beautiful photo from [Pixabay](https://pixabay.com/images/search/user_id%3a127419%20plane/)"
>}}
Markdown syntax example
Markdown attributes is also supported, for example:
{class="center-img center-cap"}
Note that Markdown attributes require configuration of the Goldmark renderer.
Lead
lead is used to bring emphasis to the start of an article, typically for introductions or key information.
The input is written in Markdown so you can format it however you please.
Example: Introductory text
{{% lead %}}
This is a **bold introduction** to grab the reader's attention.
{{% /lead %}}This is a bold introduction to grab the reader's attention.
Steps
The steps shortcode renders a styled ordered step list, useful for presenting sequential instructions or workflows.
Each step is defined with the step inner shortcode, which accepts either a label (custom text) or an icon to display in the step indicator. Use circleClass to inject additional CSS classes into the indicator, for example, to mark a completed step with a success color.
| Parameter | Description |
|---|---|
label | Optional. Custom text displayed in the step indicator. |
icon | Optional. Icon name displayed in the step indicator. Takes priority over label when both are set. |
circleClass | Optional. Additional CSS classes applied to the step indicator circle. Useful for conveying step state, such as text-success bg-success for completed steps. |
Example: Installation steps with labels and icons
{{% steps %}}
{{< step label=":watermelon:" >}}
<h3>Install Dependencies</h3>
Run `npm install` in your project root.
{{< /step >}}
{{< step label="2" >}}
<h3>Configure Environment</h3>
Copy `.env.example` to `.env` and fill in the required values.
{{< /step >}}
{{< step icon="check-circle" circleClass="text-success" >}}
<h3>Verify Setup</h3>
Run `npm run dev` and open `http://localhost:1313` in your browser.
{{< /step >}}
{{< step icon="check" circleClass="bg-success" >}}
<h3>Done</h3>
Your site is up and running[^fn-steps].
[^fn-steps]: Footnotes are supported!
{{< /step >}}
{{% /steps %}}- 🍉
Install Dependencies
Run
npm installin your project root. - 2
Configure Environment
Copy
.env.exampleto.envand fill in the required values. Verify Setup
Run
npm run devand openhttp://localhost:1313in your browser.Done
Your site is up and running1.
Tabs
The tabs shortcode is used to present different variants of content, such as installation steps or code examples, with optional synchronization.
| Parameter | Description |
|---|---|
group | Optional. Group name for synchronized tab switching. |
default | Optional. Label of the tab to be active by default. |
label | Required. The text label displayed on the tab button. |
icon | Optional. Icon name to display before the label. |
Example: Synchronized tabs with icons
{{% tabs group="lang" default="Python" %}}
{{< tab label="JavaScript" icon="code" >}}
```javascript
console.log("Hello");
```
{{< /tab >}}
{{< tab label="Python" icon="sun-light" >}}
```python
print("Hello")
```
{{< /tab >}}
{{< tab label="Go" icon="half-moon" >}}
```go
fmt.Println("Hello")
```
{{< /tab >}}
{{% /tabs %}}
{{% tabs group="lang" default="Python" %}}
{{< tab label="JavaScript" icon="code" >}}
```javascript
const add = (a, b) => a + b;
```
{{< /tab >}}
{{< tab label="Python" icon="sun-light" >}}
```python
def add(a, b): return a + b
```
{{< /tab >}}
{{< tab label="Go" icon="half-moon" >}}
```go
func add(a, b int) int { return a + b }
```
{{< /tab >}}
{{% /tabs %}}console.log("Hello");print("Hello")fmt.Println("Hello")const add = (a, b) => a + b;def add(a, b): return a + bfunc add(a, b int) int { return a + b }Footnotes are supported! ↩︎