mirror of
https://github.com/snachodog/just-the-docs.git
synced 2025-04-23 19:42:23 -06:00
a789198b20
In touching up the migration guide, I noticed that many of our documentation site links are broken! For example, on the homepage, this link: <img width="782" alt="screenshot of homepage; code snippet is in next block" src="https://user-images.githubusercontent.com/14893287/210462690-31aa7bf5-dd79-4e8f-a3c5-1213e73771c4.png"> which has the following href ```code <a href="/just-the-docs/just-the-docs/CHANGELOG/">the CHANGELOG</a> ``` duplicates the `baseurl` twice. There are 14 such broken links across the site. Each link duplicates the `baseurl` and `link` tags, which has since been resolved with links being relative by default (there's a set of PRs that document this - I can't find the exact paper trail right now). To resolve this, I: - find and replace site-wide `{{ site.baseurl }}{% link` with `{% link` - tested each link, which now works properly locally *and* on the deploy preview I'm surprised we didn't catch this earlier! I also could be missing something else, in which case feedback on this PR is certainly welcome.
158 lines
2.3 KiB
Markdown
158 lines
2.3 KiB
Markdown
---
|
|
layout: default
|
|
title: Callouts
|
|
parent: UI Components
|
|
nav_order: 7
|
|
---
|
|
|
|
# Callouts
|
|
|
|
Markdown does not include support for callouts. However, you can style text as a callout using a Markdown extension supported by kramdown: [*block IALs*](https://kramdown.gettalong.org/quickref.html#block-attributes).
|
|
|
|
Common kinds of callouts include `highlight`, `important`, `new`, `note`, and `warning`.
|
|
|
|
{: .warning }
|
|
These callout names are *not* pre-defined by the theme: you need to define your own names.
|
|
|
|
When you have [configured]({% link docs/configuration.md %}#callouts) the `color` and (optional) `title` for a callout, you can apply it to a paragraph, or to a block quote with several paragraphs, as illustrated below.[^postfix]
|
|
|
|
[^postfix]:
|
|
You can put the callout markup either before or after its content.
|
|
|
|
#### An untitled callout
|
|
{: .no_toc }
|
|
|
|
```markdown
|
|
{: .highlight }
|
|
A paragraph
|
|
```
|
|
|
|
{: .highlight }
|
|
A paragraph
|
|
|
|
|
|
#### A single paragraph callout
|
|
{: .no_toc }
|
|
|
|
```markdown
|
|
{: .note }
|
|
A paragraph
|
|
```
|
|
|
|
{: .note }
|
|
A paragraph
|
|
|
|
```markdown
|
|
{: .note-title }
|
|
> My note title
|
|
>
|
|
> A paragraph with a custom title callout
|
|
```
|
|
|
|
{: .note-title }
|
|
> My note title
|
|
>
|
|
> A paragraph with a custom title callout
|
|
|
|
#### A multi-paragraph callout
|
|
{: .no_toc }
|
|
|
|
```markdown
|
|
{: .important }
|
|
> A paragraph
|
|
>
|
|
> Another paragraph
|
|
>
|
|
> The last paragraph
|
|
```
|
|
|
|
{: .important }
|
|
> A paragraph
|
|
>
|
|
> Another paragraph
|
|
>
|
|
> The last paragraph
|
|
|
|
```markdown
|
|
{: .important-title }
|
|
> My important title
|
|
>
|
|
> A paragraph
|
|
>
|
|
> Another paragraph
|
|
>
|
|
> The last paragraph
|
|
```
|
|
|
|
{: .important-title }
|
|
> My important title
|
|
>
|
|
> A paragraph
|
|
>
|
|
> Another paragraph
|
|
>
|
|
> The last paragraph
|
|
|
|
#### An indented callout
|
|
{: .no_toc }
|
|
|
|
```markdown
|
|
> {: .highlight }
|
|
A paragraph
|
|
```
|
|
|
|
> {: .highlight }
|
|
A paragraph
|
|
|
|
#### Indented multi-paragraph callouts
|
|
{: .no_toc }
|
|
|
|
```markdown
|
|
> {: .new }
|
|
> > A paragraph
|
|
> >
|
|
> > Another paragraph
|
|
> >
|
|
> > The last paragraph
|
|
```
|
|
|
|
> {: .new }
|
|
> > A paragraph
|
|
> >
|
|
> > Another paragraph
|
|
> >
|
|
> > The last paragraph
|
|
|
|
|
|
#### Nested callouts
|
|
{: .no_toc }
|
|
|
|
```markdown
|
|
{: .important }
|
|
> {: .warning }
|
|
> A paragraph
|
|
```
|
|
|
|
{: .important }
|
|
> {: .warning }
|
|
> A paragraph
|
|
|
|
#### Opaque background
|
|
{: .no_toc }
|
|
|
|
```markdown
|
|
{: .important }
|
|
> {: .opaque }
|
|
> <div markdown="block">
|
|
> {: .warning }
|
|
> A paragraph
|
|
> </div>
|
|
```
|
|
|
|
{: .important }
|
|
> {: .opaque }
|
|
> <div markdown="block">
|
|
> {: .warning }
|
|
> A paragraph
|
|
> </div>
|