Writing

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 ![](img.jpg), 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/)"
>}}

Nature scene — A beautiful photo from Pixabay

Markdown syntax example

![Alt text](/img/07.webp "A beautiful photo from [Pixabay](https://pixabay.com/images/search/user_id%3a127419%20plane/)")

Alt text — A beautiful photo from Pixabay

Markdown attributes is also supported, for example:

![qwe](/img/animated-webp-supported.webp "[Source](https://mathiasbynens.be/demo/animated-webp)")
{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.

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" %}}
  ```python
  print("Hello")
  ```
  {{% /tab %}}

  {{% tab label="Go" icon="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" %}}
  ```python
  def add(a, b): return a + b
  ```
  {{% /tab %}}

  {{% tab label="Go" icon="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 + b

func add(a, b int) int { return a + b }