3.1 custom block

Source

Hello world!

We show some verbatim text here.

This paragraph will be centered on the page, and its width is 50% of the width of its parent element.

3.1.1 Adding a shaded box

First, we show how to include content in a shaded box. The box has a black background with an orange frame with rounded corners. The text in the box is in white.

For HTML output, we define these rules in a CSS file. If you are unfamiliar with CSS, there are plenty of free online tutorials, e.g., https://www.w3schools.com/css/.

.blackbox {
  padding: 1em;
  background: black;
  color: white;
  border: 2px solid orange;
  border-radius: 10px;
}
.center {
  text-align: center;
}

NOTICE!

Thank you for noticing this new notice! Your noticing it has been noted, and will be reported to the authorities!

3.1.2 Including icons

directory/
├── your-report.Rmd
├── style.css
├── preamble.tex
└── images/ 
      └── ├── important.png
          ├── note.png
          └── caution.png

::: {.infobox .caution data-latex="{caution}"}
**NOTICE!**

Thank you for noticing this **new notice**! Your noticing it has
been noted, and _will be reported to the authorities_!
:::

NOTICE!

Thank you for noticing this new notice! Your noticing it has been noted, and will be reported to the authorities!

.infobox {
  padding: 1em 1em 1em 4em;
  margin-bottom: 10px;
  border: 2px solid orange;
  border-radius: 10px;
  background: #f5f5f5 5px center/3em no-repeat;
}

.caution {
  background-image: url("images/caution.png");
}

.warning {
  background-image: url("images/warning.png");
}

:::: {.infobox .warning data-latex="warning"}

Include the actual content here.

::::

Include the actual content here.

NOTICE!

Thank you for noticing this new warningn! Your noticing it has been noted, and will be reported to the authorities!

NOTICE!

Thank you for noticing this new caution! Your noticing it has been noted, and will be reported to the authorities!

NOTICE!

Thank you for noticing this new note! Your noticing it has been noted, and will be reported to the authorities!

NOTICE!

Thank you for noticing this new tip! Your noticing it has been noted, and will be reported to the authorities!

NOTICE!

Thank you for noticing this new important! Your noticing it has been noted, and will be reported to the authorities!