Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 39 additions & 3 deletions docs/authoring/markdown-basics.qmd
Original file line number Diff line number Diff line change
Expand Up @@ -397,7 +397,12 @@ Videos can refer to video files (e.g. MPEG) or can be links to videos published

## Divs and Spans {#sec-divs-and-spans}

You can add classes, attributes, and other identifiers to regions of content using Divs and Spans (you'll see an example of this below in [Callout Blocks]).
You can add classes, attributes, and other identifiers to regions of content using Divs and Spans.
Although the terms *Div* and *Span* originate in HTML, the syntax is used in Quarto across output formats.
For example, [Callout Blocks](#callout-blocks) are specified using the div syntax, and [Small Caps](#other-spans) are specified using the span syntax, and both work for many formats beyond HTML.
You may also use CSS and/or a [Filter](/docs/extensions/filters.qmd) along with Divs and Spans to provide styling or other behavior within rendered documents beyond what Quarto provides.

### Divs

For example, here we add the "border" class to a region of content using a div (`:::`):

Expand Down Expand Up @@ -441,6 +446,8 @@ Once rendered to HTML, Quarto will translate the markdown into:

Fences without attributes are always closing fences. Unlike with fenced code blocks, the number of colons in the closing fence need not match the number in the opening fence. However, it can be helpful for visual clarity to use fences of different lengths to distinguish nested divs from their parents.

### Spans

A bracketed sequence of inlines, as one would use to begin a link, will be treated as a `Span` with attributes if it is followed immediately by attributes:

``` markdown
Expand All @@ -455,8 +462,6 @@ Once rendered to HTML, Quarto will translate the markdown into:
</span>
```

Typically, you'll use CSS and/or a [Filter](/docs/extensions/filters.qmd) along with Divs and Spans to provide styling or other behavior within rendered documents.

### Ordering of Attributes

Both divs and spans in Pandoc can have any combination of identifiers, classes, and (potentially many) key-value attributes. In order for these to be recognized by Pandoc, they have to be provided in a specific order: identifiers, classes, and then key-value attributes. Any of these can be omitted, but must follow that order if they are provided. For example, the following is valid:
Expand Down Expand Up @@ -514,6 +519,37 @@ Learn more in the article on [Callout Blocks](callouts.qmd).
| ``` | |
+--------------------------+--------------------------+

## Other Spans {#other-spans}

To create text in small caps, that is underlined, or that is highlighted, use a span with one of the
classes `.smallcaps`, `.underline` or `.mark` respectively.

+----------------------------------------+-------------------------------------------+
| Markdown Syntax | Output |
+========================================+===========================================+
| ``` markdown | [This text is smallcaps]{.smallcaps} |
| [This text is smallcaps]{.smallcaps} | |
| ``` | |
+----------------------------------------+-------------------------------------------+
| ``` markdown | [This text is underlined]{.underline} |
| [This text is underlined]{.underline} | |
| ``` | |
+----------------------------------------+-------------------------------------------+
| ``` markdown | [This text is highlighted]{.mark} |
| [This text is highlighted]{.mark} | |
| ``` | |
+----------------------------------------+-------------------------------------------+

::: {.callout-note}

## In supported formats only

Support for these classes comes directly from Pandoc.
Not all formats support all of these classes.
In particular, `.mark` is not currently supported in `format: pptx`.

:::

## Special Characters

+-----------------+---------------+
Expand Down