# Shortcodes

{% subtitle %}

Shortcodes are simple snippets inside your content files calling built-in or custom templates.

{% endsubtitle %}

## Shortcodes markup


A shortcode is constituted of a *name*, *attributes* and *content*.
Here is what a shortcode looks like:

```handlebars
{% shortcode_name myattr="value" otherattr="value2" %}

some content

{% endshortcode_name %}
```

### Full shortcodes

Here is an example of the `alert` shortcode which makes use of *attributes* and *content*.

<div class="card card-body bg-light">

**Input**

```handlebars
{% alert type="warning" title="Be careful" %}

Be careful while driving!

{% endalert %}
```

**Output**

<div class="rendering-example">

{% alert type="warning" title="Be careful" %}

Be careful while driving!

{% endalert %}

</div>
</div>

### Shortcodes without content

Some shortcodes don't need any content, such as the `youtube` shortcode which renders a youtube player for a given video. With this kind of shortcode, there is no need for the closing tag (no `{% endyoutube %}` tag needed).

```handlebars
{% youtube id="M7lc1UVf-VE" %}
```

Which renders:

<div class="card card-body bg-light">
<div class="rendering-example">

{% youtube id="M7lc1UVf-VE" %}

</div>
</div>

Some shortcodes only make use of content. Here is an example of the `subtitle` shortcode rendering the subtitle of this same page.


```twig
{% subtitle %}

Shortcodes are simple snippets inside your content files calling built-in or custom templates.

{% endsubtitle %}
```

Which renders:

<div class="card card-body bg-light">
<div class="rendering-example">

{% subtitle %}

Shortcodes are simple snippets inside your content files calling built-in or custom templates.

{% endsubtitle %}

</div>
</div>

## Builtin shortcodes

### Alert

Display various alert types.

#### Attributes

| Attribute | Description | Default
| --- | --- | --- |
| **type** | Alert type used to style the background color and the icon. Can be one of `note`, `info`, `tip`, `summary`, `question`, `success`, `warning`, `error`.   | `note` |
| **title** | Title of the alert. | Uppercased type |

#### Examples

<div class="card card-body bg-light">

##### Info alert

Input

<div class="rendering-example-input">

```jinja
{% alert type="info" title="New version" %}

A new version of this API is available

{% endalert %}
```

</div>

Output

<div class="rendering-example">

{% alert type="info" title="New version" %}

A new version of this API is available

{% endalert %}

</div>
</div>

<div class="card card-body bg-light">

##### Warning alert

Input

<div class="rendering-example-input">

```jinja
{% alert type="warning" title="Be careful" %}

Be careful while crossing the road!

{% endalert %}
```

</div>

Output

<div class="rendering-example">

{% alert type="warning" title="Be careful" %}

Be careful while crossing the road!

{% endalert %}

</div>
</div>


***

### Gist

Display a [Gist](https://gist.github.com).

#### Attributes

| Attribute | Description | Default
| --- | --- | --- |
| **id** | Gist identifier (:owner/:hash) | *none* |


#### Examples

<div class="card card-body bg-light">

##### Gist

Input

<div class="rendering-example-input">

```jinja
{% gist id="mattallty/63c395f500732d6f0efc339aae28bcab" %}
```

</div>

Output

<div class="rendering-example">

{% gist id="mattallty/63c395f500732d6f0efc339aae28bcab" %}

</div>
</div>



### Subtitle

Display a subtitle, to be used under h1 headings.

#### Attributes

This shortcode does not accept any attribute.


#### Examples

<div class="card card-body bg-light">

##### Subtitle

Input

<div class="rendering-example-input">

```jinja
<h1>My title</h1>

{% subtitle %}

This is my subtitle.

{% endsubtitle %}
```

</div>

Output

<div class="rendering-example">

<h1>My title</h1>

{% subtitle %}

This is my subtitle.

{% endsubtitle %}

</div>
</div>

### Twitter

TWitter card

### Youtube