`, you need to capture it, then
print it and run it through the `markdownify` Liquid filter. Here's a demo:
{% capture tab3-content %}
#### A Markdown header
- list item 1
- list item 2
{% endcapture %}
{{ tab3-content | markdownify }}
{% capture tab4-content %}
#### Another Markdown header
- list item 3
- list item 4
{% endcapture %}
{{ tab4-content | markdownify }}
### Cards
In a Bootstrap row, your columns need to add up to 12. Here are three cards in
a row, each of which takes up 1/3 (4/12) of the row. You need a couple `
`s
to clear the row before.
This will take up 1/3 of the row unless the screen is small,
then it will take up the whole row.
This will take up 1/3 of the row unless the screen is small,
then it will take up the whole row.
This will take up 1/3 of the row unless the screen is small,
then it will take up the whole row.
### Columnar text
You can use the CSS `column-count` to flow your text into multiple columns.
You need a couple `
`s to clear the row before.
This example uses a HTML div. This example uses a HTML div. This example uses a HTML div.
This example uses a HTML div. This example uses a HTML div. This example uses a HTML div.
This example uses a HTML div. This example uses a HTML div. This example uses a HTML div.
This example uses a HTML div. This example uses a HTML div. This example uses a HTML div.
This example uses a HTML div. This example uses a HTML div. This example uses a HTML div.
This example uses a HTML div. This example uses a HTML div. This example uses a HTML div.
This example uses a HTML div. This example uses a HTML div. This example uses a HTML div.
This example uses a HTML div. This example uses a HTML div. This example uses a HTML div.
This example uses a HTML div. This example uses a HTML div. This example uses a HTML div.
This example does it with Markdown. You can't have any blank lines or it will
break the Markdown block up. This example does it with Markdown. You can't have any blank lines or it will
break the Markdown block up. This example does it with Markdown. You can't have any blank lines or it will
break the Markdown block up. This example does it with Markdown. You can't have any blank lines or it will
break the Markdown block up. This example does it with Markdown. You can't have any blank lines or it will
break the Markdown block up. This example does it with Markdown. You can't have any blank lines or it will
break the Markdown block up. This example does it with Markdown. You can't have any blank lines or it will
break the Markdown block up. This example does it with Markdown. You can't have any blank lines or it will
break the Markdown block up. This example does it with Markdown. You can't have any blank lines or it will
break the Markdown block up.
{: style="column-count: 3 "}
## Admonitions (notes)
> **Note**: This is a note.
> **Info**: This is an info.
> **Tip**: This is a tip.
> **Warning**: This is a warning.
> **Caution**: This is a caution.
> **Note**: One line of note text
> another line of note text
> **Note**: This is a note with a list and a table in it.
>
> - List item 1
> - List item 2
>
> |Table column 1 | Table column 2 |
> |----------------|----------------|
> | Row 1 column 1 | Row 2 column 2 |
> | Row 2 column 1 | Row 2 column 2 |
>
> And another sentence to top it all off.
## Comments
You can use XML style comments, which show up in the HTML "view source", or
Liquid ones, which don't. You'll need to view the source of this file to see
both styles.
{% comment %}This one won't.{% endcomment %}
## Code blocks
Rouge provides lots of different code block "hints". If you leave off the hint,
it tries to guess and sometimes gets it wrong. These are just a few hints that
we use often.
### Raw, no highlighting
The raw markup is needed to keep Liquid from interperting the things with double
braces as templating language.
```none
none with raw
{% raw %}
$ some command with {{double braces}}
$ some other command
{% endraw %}
```
### Raw, Bash
```bash
bash with raw
{% raw %}
$ some command with {{double braces}}
$ some other command
{% endraw %}
```
### Bash
```bash
$ echo "deb https://packages.docker.com/1.12/apt/repo ubuntu-trusty main" | sudo tee /etc/apt/sources.list.d/docker.list
```
### GO
```go
incoming := map[string]interface{}{
"asdf": 1,
"qwer": []interface{}{},
"zxcv": []interface{}{
map[string]interface{}{},
true,
int(1e9),
"tyui",
},
}
```
### Python
```python
return html.format(name=os.getenv('NAME', "world"), hostname=socket.gethostname(), visits=visits)
```
### Ruby
```ruby
docker_service 'default' do
action [:create, :start]
end
```
### JSON
Sometimes this doesn't work right and you have to use `none`.
```json
"server": {
"http_addr": ":4443",
"tls_key_file": "./fixtures/notary-server.key",
"tls_cert_file": "./fixtures/notary-server.crt"
}
```
### HTML
```html
Welcome to nginx!
```
### Markdown
```md
[](https://cloud.docker.com/stack/deploy/?repo=
)
```
### ini
```ini
[supervisord]
nodaemon=true
[program:sshd]
command=/usr/sbin/sshd -D
```
### Dockerfile
Yes, we have our own highlighting in Rouge!
```dockerfile
#
# example Dockerfile for https://docs.docker.com/examples/postgresql_service/
#
FROM ubuntu
RUN apt-key adv --keyserver hkp://p80.pool.sks-keyservers.net:80 --recv-keys B97B0AFCAA1A47F044F244A07FCC7D46ACCC4CF8
RUN echo "deb http://apt.postgresql.org/pub/repos/apt/ precise-pgdg main" > /etc/apt/sources.list.d/pgdg.list
RUN apt-get update && apt-get install -y python-software-properties software-properties-common postgresql-9.3 postgresql-client-9.3 postgresql-contrib-9.3
# Note: The official Debian and Ubuntu images automatically ``apt-get clean``
# after each ``apt-get``
USER postgres
RUN /etc/init.d/postgresql start &&\
psql --command "CREATE USER docker WITH SUPERUSER PASSWORD 'docker';" &&\
createdb -O docker docker
RUN echo "host all all 0.0.0.0/0 md5" >> /etc/postgresql/9.3/main/pg_hba.conf
RUN echo "listen_addresses='*'" >> /etc/postgresql/9.3/main/postgresql.conf
EXPOSE 5432
VOLUME ["/etc/postgresql", "/var/log/postgresql", "/var/lib/postgresql"]
CMD ["/usr/lib/postgresql/9.3/bin/postgres", "-D", "/var/lib/postgresql/9.3/main", "-c", "config_file=/etc/postgresql/9.3/main/postgresql.conf"]
```
### YAML
The `yaml` hint doesn't play nicely with Atom so we sometimes have to use `none`.
```none
authorizedkeys:
image: dockercloud/authorizedkeys
deployment_strategy: every_node
autodestroy: always
environment:
- AUTHORIZED_KEYS=ssh-rsa AAAAB3Nsomelongsshkeystringhereu9UzQbVKy9o00NqXa5jkmZ9Yd0BJBjFmb3WwUR8sJWZVTPFL
volumes:
/root:/user:rw
```
[Some Bootstrap image classes](https://v4-alpha.getbootstrap.com/content/images/)
might be interesting. You can use them with Markdown or HTML images.
- An image using the Bootstrap "thumbnail" class: {: class="img-thumbnail" }
- The same one, but using HTML: 
## Lists
- Bullet list item 1
- Bullet list item 2
* Bullet list item 3
1. Numbered list item 1. Two spaces between the period and the first letter
helps with alignment.
2. Numbered list item 2. Let's put a note in it.
>**Note**: We did it!
3. Numbered list item 3 with a code block in it. You need the blank line before
the code block happens.
```bash
$ docker run hello-world
```
4. Numbered list item 4 with a bullet list inside it and a numbered list
inside that.
- Sub-item 1
- Sub-item 2
1. Sub-sub-item 1
2. Sub-sub-item-2 with a table inside it because we like to party!
Indentation is super important.
|Header 1 | Header 2 |
|---------|----------|
| Thing 1 | Thing 2 |
| Thing 3 | Thing 4 |
## Tables
Some tables in markdown and html.
| Permission level | Access |
| ---------------- | ------------- |
| **Bold** or _italic_ within a table cell. Next cell is empty on purpose. | |
| | Previous cell is empty. A `--flag` in mono text. |
| Read | Pull |
| Read/Write | Pull, push |
| Admin | All of the above, plus update description, create and delete |
The alignment of the cells in the source doesn't really matter. The ending pipe
character is optional (unless the last cell is supposed to be empty). The header
row and separator row are optional.
If you need block-level HTML within your table cells, such as multiple
paragraphs, lists, sub-tables, etc, then you need to make a HTML table.
This is also the case if you need to use rowspans or colspans. Try to avoid
setting styles directly on your tables! If you set the width on a `