Quarto Functionality Example Library (for development only!)
Quarto Functionality Example Library
A On-mouse-over Popup
<span class="hover-tooltip" data-tooltip="The colors for this popup are defined in the style sheet.">Mouse-me-over!</span>
gives:
Mouse-me-over!
Note: This requires the definition of the ‘hover-tooltip’ in styles/styles.css.
Highlight Text
Text [in red]{.red-text}
or [in_green]{.green-text}
or [in blue]{.blue-text}
gives:
Text in red or in_green or in blue
Note: This requires the definition of the .color-text tags in styles/styles.css.
Mark Text
Text can be [marked red]{.mark-red} or [marked green]{.mark-green} or <mark>marked in HTML default</mark>.
gives:
Text can be marked red or marked green or marked in HTML default.
Note: This requires the definition of the .mark-color tags in styles/styles.css.
Collapsable Sections
### A Collapsable Section
::: {#id1 .callout collapse="false"}
#### A detailed discussion (not collapsed by default)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
::: {#id2 .callout collapse="true"}
#### A more detailed discussion (collapsed by default)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
:::
:::
gives:
A Collapsable Section
A Comment in the Markup
<!--- This is just an example of a comment in the markup --->
<By definition: Nothing to see here, the comment in the markup is not shown!>