Skip to content

Commit 4deb131

Browse files
authored
Add special span classes (#1601)
* Add special span classes * Add callout for format exceptions
1 parent cf7c907 commit 4deb131

File tree

1 file changed

+39
-3
lines changed

1 file changed

+39
-3
lines changed

docs/authoring/markdown-basics.qmd

Lines changed: 39 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -397,7 +397,12 @@ Videos can refer to video files (e.g. MPEG) or can be links to videos published
397397

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

400-
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]).
400+
You can add classes, attributes, and other identifiers to regions of content using Divs and Spans.
401+
Although the terms *Div* and *Span* originate in HTML, the syntax is used in Quarto across output formats.
402+
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.
403+
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.
404+
405+
### Divs
401406

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

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

442447
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.
443448

449+
### Spans
450+
444451
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:
445452

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

458-
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.
459-
460465
### Ordering of Attributes
461466

462467
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:
@@ -514,6 +519,37 @@ Learn more in the article on [Callout Blocks](callouts.qmd).
514519
| ``` | |
515520
+--------------------------+--------------------------+
516521

522+
## Other Spans {#other-spans}
523+
524+
To create text in small caps, that is underlined, or that is highlighted, use a span with one of the
525+
classes `.smallcaps`, `.underline` or `.mark` respectively.
526+
527+
+----------------------------------------+-------------------------------------------+
528+
| Markdown Syntax | Output |
529+
+========================================+===========================================+
530+
| ``` markdown | [This text is smallcaps]{.smallcaps} |
531+
| [This text is smallcaps]{.smallcaps} | |
532+
| ``` | |
533+
+----------------------------------------+-------------------------------------------+
534+
| ``` markdown | [This text is underlined]{.underline} |
535+
| [This text is underlined]{.underline} | |
536+
| ``` | |
537+
+----------------------------------------+-------------------------------------------+
538+
| ``` markdown | [This text is highlighted]{.mark} |
539+
| [This text is highlighted]{.mark} | |
540+
| ``` | |
541+
+----------------------------------------+-------------------------------------------+
542+
543+
::: {.callout-note}
544+
545+
## In supported formats only
546+
547+
Support for these classes comes directly from Pandoc.
548+
Not all formats support all of these classes.
549+
In particular, `.mark` is not currently supported in `format: pptx`.
550+
551+
:::
552+
517553
## Special Characters
518554

519555
+-----------------+---------------+

0 commit comments

Comments
 (0)