mirror of
https://github.com/snachodog/just-the-docs.git
synced 2025-04-20 10:02:23 -06:00
5f91e326c7
In #1058, I noted: > Tangentially related work: > ... > - better annotate new features (motivated by writing these docs) > - we should add "New" to new features :) > - we should note when a feature was introduced (I think this is a core part of most software documentation) > - we should annotate things that are "Advanced" in so far as the average Just the Docs user will not use them / they require significant Jekyll knowledge > This came up again in https://github.com/just-the-docs/just-the-docs/discussions/1136#discussioncomment-4716253, so I think it's best for us to resolve this sooner rather than later. This PR is me doing that. I: - have added a headings-level "New" label to every new heading introduced since `v0.3` - added, when possible, inline YAML comments when new configuration options have been introduced I did this by scanning through the CHANGELOG and selecting each feature that is either tagged with `Add` and has documentation. I may have also missed any new features, so some double-checking would be helpful!
162 lines
2.4 KiB
Markdown
162 lines
2.4 KiB
Markdown
---
|
|
layout: default
|
|
title: Callouts
|
|
parent: UI Components
|
|
nav_order: 7
|
|
---
|
|
|
|
# Callouts
|
|
{: .d-inline-block }
|
|
|
|
New (v0.4.0)
|
|
{: .label .label-green }
|
|
|
|
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>
|