---
title: "Hurry Potter and the Half-Baked Paged.js"
subtitle: "litedown demos"
author: "Yihui Xie"
date: "`{r} Sys.Date()`"
output:
  litedown::html_format:
    meta:
      css: ["default", "@article", "@tabsets", "@callout", "@heading-anchor", "@key-buttons", "@pages"]
      js: ["@sidenotes", "@tabsets", "@callout", "@right-quote", "@heading-anchor", "@key-buttons", "@toc-highlight", "@pages"]
    options:
      embed_resources: null
      number_sections: true
      toc: true
knit: litedown:::knit
---

```{r, include=FALSE}
litedown::reactor(time = TRUE)
```

## *Harry Potter and the Half-Blood Prince* {.unnumbered}

![Dumbledore](gif/dumbledore.webp){style="float: right; margin-left: 1em; width: 250px;"}

*In Harry Potter and the Half-Blood Prince (2005), Dumbledore brings Harry along
as he attempts to persuade Horace Slughorn to rejoin the Hogwarts faculty. Harry
notices that Dumbledore's right hand is shrivelled and blackened. During the
school year, Dumbledore uses the Pensieve to teach Harry about Voldemort's life
and his rise to power. In one of the Pensieve visions, Harry witnesses
Dumbledore's first encounter with the young Tom Riddle. Dumbledore had known
from the beginning that Riddle was dangerous, but believed that Hogwarts would
change him. [...]*

## Basic Markdown syntax

For the full list of supported document elements, please read the GFM spec.
Below is a quick summary:

-   Headings start with a number of `#`'s, e.g., `## level-two heading`.

-   Inline elements: `**strong**`, `_emphasis_`, `~~strikethrough~~`,
    `[text](link)`, and `![alt](image/path)`.

-   Inline code is written in a pair of backticks, e.g., `` `code` ``. Code
    blocks can be indented, or fenced by ```` ``` ````.

-   List items start with `-`, `+`, or `*`, e.g., `- item`. A task list item is
    a regular list item with `[ ]` or `[x]` in the beginning, e.g.,
    `- [ ] item`.

-   Block quotes start with `>`.

-   Tables are created with `|` as the column separator (i.e., Pandoc's pipe
    table).

## Add-on features

In addition to GFM features, the **litedown** package also supports the
following features.

### Raw LaTeX/HTML blocks

Raw LaTeX and HTML blocks can be written as fenced code blocks with language
names `=latex` (or `=tex`) and `=html`, e.g.,

```` markdown
```{=tex}
This only appears in \LaTeX{} output.
```
````

Alert: possible infinite recursion!

<iframe width="100%" height="400" src="https://www.youtube.com/embed/83XxhMIZkiw" title="Ihaka Lecture Series 2024 | Reimagining Literate Programming and Automated Report Generation" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>

</iframe>

### LaTeX math

You can write both `$inline$` and `$$display$$` LaTeX math, e.g.,
$\sin^{2}(\theta)+\cos^{2}(\theta) = 1$

$$\bar{X} = \frac{1}{n} \sum_{i=1}^n X_i$$

$$|x| = \begin{cases}
x &\text{if } x \geq 0 \\
-x &\text{if } x < 0
\end{cases}$$

### Superscripts and subscripts

Write superscripts in `^text^` and subscripts in `~text~` (same syntax as
Pandoc's Markdown), e.g., 2^10^ and H~2~O.

### Footnotes

Insert footnotes via `[^n]`, where `n` is a footnote number (a unique
identifier). The footnote content should be defined in a separate block starting
with `[^n]:`. For example:

``` markdown
Insert a footnote here.[^1]

[^1]: This is the footnote.
```

### Attributes

Attributes on images, links, fenced code blocks, and section headings can be
written in `{}`. For example, `![text](path){.foo #bar width="50%"}` will
generate an `<img>` tag with attributes in HTML output:

``` html
<img src="path" alt="text" id="bar" class="foo" width="50%" />
```

and `## Heading {#baz}` will generate:

``` html
<h2 id="baz">Heading</h2>
```

For fenced code blocks, a special rule is that the first class name will be
treated as the language name for a block, and the `class` attribute of the
result `<code>` tag will have a `language-` prefix. For example, the following
code block

```` markdown
```{.foo .bar #my-code style="color: red;"}
```
````

will generate the HTML output below:

``` html
<pre>
  <code class="language-foo bar" id="my-code" style="color: red;">
  </code>
</pre>
```

### Appendices

When a top-level heading has the attribute `.appendix`, the rest of the document
will be treated as the appendix. If section numbering is enabled, the appendix
section headings will be numbered differently.

### Fenced `Div`s

A fenced `Div` can be written in `:::` fences. Note that the opening fence must
have at least one attribute, such as the class name. For example:

``` markdown
::: foo
This is a fenced Div.
:::

::: {.foo}
The syntax `::: foo` is equivalent to `::: {.foo}`.
:::

::: {.foo #bar style="color: red;"}
This div has more attributes.

It will be red in HTML output.
:::
```

A fenced `Div` will be converted to `<div>` with attributes in HTML output,
e.g.,

``` html
<div class="foo" id="bar" style="color: red;">
</div>
```

For LaTeX output, it can be converted to a LaTeX environment if both the class
name and an attribute `data-latex` are present. For example,

``` markdown
::: {.tiny data-latex=""}
This is _tiny_ text.
:::
```

will be converted to:

``` latex
\begin{tiny}
This is \emph{tiny} text.
\end{tiny}
```

### Cross-references

To cross-reference an element, it must be numberd first. For section headings,
the numbers are automatically generated if the `number_sections` option is true.
For example, see @sec-citations.

For figures, these anchors are automatically generated if the chunk options
`fig.cap` (figure caption) or `fig.env` is not empty, e.g., the code chunk below
produces @fig-nice-plot.

```{{r}}
#| nice-plot, fig.cap="OMG, I felt like crying when I drew this plot in Auckland! It has been almost two decades since I first learned R and knew this volcano.", fig.height=5
par(mar = c(4, 4, 1, .5))
filled.contour(volcano, color.palette = terrain.colors)
```

Similarly, you can reference tables, e.g., @tab-nice-table.

```{{r}}
#| nice-table, tab.cap="This is your familiar `mtcars` dataset. Note that data frames are printed to tables by default.", print.args=list(data.frame=list(limit=c(6, 10)))
mtcars
```

By default, tables are truncated to 10 rows (to avoid generating huge tables by
accident), but this is configurable.

If you really want the "console output" for data frames, you can get it, too:

```{{r}}
#| print=xfun:::record_print.default
head(mtcars)
```

### Citations

This feature requires the R package **rbibutils**. Please make sure it is
installed before using citations.

``` r
xfun::pkg_load2("rbibutils")
```

To insert citations, you have to first declare one or multiple bibliography
databases in the YAML metadata, e.g.,

``` yaml
bibliography: ["papers.bib", "books.bib"]
```

Each `.bib` file contains entries that start with keywords. For example,
`R-base` is the keyword for the following entry:

``` plain
@Manual{R-base,
  title = {R: A Language and Environment for Statistical Computing},
  author = {{R Core Team}},
  organization = {R Foundation for Statistical Computing},
  address = {Vienna, Austria},
  year = {2024},
  url = {https://www.R-project.org/},
}
```

Then you can use `[@R-base]` or `@R-base` to cite this item. You can include
multiple keywords in `[ ]` separated by semicolons.

### Smart HTML entities

"Smart" HTML entities can be represented by ASCII characters, e.g., you can
write fractions in the form `n/m`. Below are some example entities:

```{r, smartypants, echo=FALSE}
p = litedown:::pants[-(4:14)]
t(as.matrix(setNames(p, sprintf('`%s`', names(p)))))
```

## Code chunks and inline code

Global chunk options are controlled by `litedown::reactor()`, which is similar
to `knitr::opts_chunk$set()`, e.g.,

``` r
litedown::reactor(fig.width = 10, fig.height = 6)
```

Some quick examples:

```{r}
litedown::mark('Hello _world_!')
litedown::mark('Hello _world_!', 'latex') # litedown does support latex output
litedown::timing_data()
```

Inline R code expressions can have options, too, e.g.,
`` `{r, eval=FALSE, order=10} 1 + 1` ``.

## Adding CSS/JS assets

Via meta variables in YAML:

``` yaml
output:
  litedown::html_format:
    meta:
      css: ["default", ...]
      js: [...]
```

All CSS/JS assets below are very lightweight and not tied to **litedown** (i.e.,
you can use them on any other web pages).

### Article mode

``` yaml
css: ["@default", "@article"]
js: ["@sidenotes"]
```

Testing a footnote.[^1]

[^1]: In the article mode, footnotes will be moved to the margin if
    `sidenotes.js` is used and the browser window is wide enough.

Testing a full-width image:

::: fullwidth
![full width
image](https://prose.yihui.org/post/2020/11/10/r-markdown-demo/index_files/figure-html/sunspots-1.svg)
:::

### Slides mode

``` yaml
css: ["@default", "@snap"]
js: ["@snap"]
```

-   Two modes: slides and article (depending on width and aspect ratio)

    -   You can't have your cake and eat it too? That's only true in Word and
        PowerPoint.

-   Keyboard shortcuts: <kbd>f</kbd> (fullscreen), <kbd>o</kbd> (overview), and
    <kbd>m</kbd> (mirror slides).

### Tabsets

You can load the script `tabsets.js` and CSS `tabsets.css` to create tabsets
from bullet lists.

``` yaml
css: ["@tabsets"]
js: ["@tabsets"]
```

::: tabset
:::

-   First tab

    Hi, tab!

-   Second tab <!--active-->

    This is the initial active tab.

-   Third tab

    Bye, tab!

    ::: tabset
    :::

    -   A child tabset

        Content.

    -   Another tab

        More content

### Code folding

``` yaml
js: ["@fold-details"]
```

### Callout blocks

A callout block is a fenced Div with the class name `callout-*`. Callouts
require `callout.css` and `callout.js`:

``` yaml
css: ["@callout"]
js: ["@callout"]
```

For example:

::: callout-tip
This is a tip.

> You can write arbitrary content, such as a blockquote.

::: callout-caution
Even another callout!
:::

::: callout-important
For the first time in your life, you have realized that you do not have to use
fontawesome for icons!
:::

Is that cool?
:::

### Right-align a quote footer

``` yaml
js: ["@right-quote"]
```

> You can use the script `right-quote.js` to right-align a blockquote footer if
> it starts with an em-dash (`---`).
>
> ---John Doe

### Add anchor links to headings

``` yaml
css: ["@heading-anchor"]
js: ["@heading-anchor"]
```

### Style keyboard shortcuts

``` yaml
css: ["@key-buttons"]
js: ["@key-buttons"]
```

`Esc` `Tab` `Enter` `Space` `Delete` `Home` `End` `PrtScr` `PrintScreen`
`PageUp` `PageDown` `Up` `Down` `Left` `Right`

`Ctrl` `Control` `Shift` `Alt` `Cmd` `Command` `fn`

`Ctrl / Cmd + C`

`Ctrl / Cmd + Alt + I`

`Shift + Enter`

`Cmd + Shift + 9`

`fn + F`

`Alt + Click`

### HTML pagination

``` yaml
css: ["@pages"]
js: ["@pages"]
```

Press <kbd>p</kbd> for PDF, but that's less fun than my Simon/Paul bots.
