Matt Wang 5f91e326c7
docs: label new features introduced in v0.4 (#1138)
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!
2023-01-29 17:48:22 -08:00

2.4 KiB

layout, title, parent, nav_order
layout title parent nav_order
default Callouts UI Components 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.

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.1

An untitled callout

{: .no_toc }

{: .highlight }
A paragraph

{: .highlight } A paragraph

A single paragraph callout

{: .no_toc }

{: .note }
A paragraph

{: .note } A paragraph

{: .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 }

{: .important }
> A paragraph
>
> Another paragraph
>
> The last paragraph

{: .important }

A paragraph

Another paragraph

The last paragraph

{: .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 }

> {: .highlight }
  A paragraph

{: .highlight } A paragraph

Indented multi-paragraph callouts

{: .no_toc }

> {: .new }
> > A paragraph
> >
> > Another paragraph
> >
> > The last paragraph

{: .new }

A paragraph

Another paragraph

The last paragraph

Nested callouts

{: .no_toc }

{: .important }
> {: .warning }
> A paragraph

{: .important }

{: .warning } A paragraph

Opaque background

{: .no_toc }

{: .important }
> {: .opaque }
> <div markdown="block">
> {: .warning }
> A paragraph
> </div>

{: .important }

{: .opaque }

{: .warning } A paragraph

  1. You can put the callout markup either before or after its content. ↩︎