diff --git a/_freeze/docs/presentations/revealjs/index/execute-results/html.json b/_freeze/docs/presentations/revealjs/index/execute-results/html.json new file mode 100644 index 0000000000..cacfc30bec --- /dev/null +++ b/_freeze/docs/presentations/revealjs/index/execute-results/html.json @@ -0,0 +1,12 @@ +{ + "hash": "8a60b6868cd1de8939ce4e82df1f834b", + "result": { + "engine": "jupyter", + "markdown": "---\ntitle: \"Revealjs\"\nslide-format: revealjs\n---\n\n## Overview\n\nYou can create [Revealjs](https://revealjs.com/) presentations using the `revealjs` format. The best way to get a sense for the capabilities of Revealjs is this [demo](demo/){target=\"_blank\"} presentation:\n\n
\n\n\n```{=html}\n\n```\n\n\n
\n\nIf you prefer to view the demo in a standalone browser you can do that [here](demo/){target=\"_blank\"}. Check out the [source code](https://github.com/quarto-dev/quarto-web/blob/main/docs/presentations/revealjs/demo/index.qmd) for the demo to see how the slides were created.\n\nSee the Revealjs [format reference](../../reference/formats/presentations/revealjs.qmd) for a comprehensive overview of all options supported for Revealjs output.\n\n## Creating Slides\n\nIn markdown, slides are delineated using headings. For example, here is a simple slide show with two slides (each defined with a level 2 heading (`##`):\n\n``` {.markdown code-preview=\"/docs/presentations/revealjs/examples/creating-slides-1.qmd\"}\n---\ntitle: \"Habits\"\nauthor: \"John Doe\"\nformat: {{< meta slide-format >}}\n---\n\n## Getting up\n\n- Turn off alarm\n- Get out of bed\n\n## Going to sleep\n\n- Get in bed\n- Count sheep\n```\n\nYou can also divide slide shows into sections with title slides using a level 1 header (`#`). For example:\n\n``` {.markdown code-preview=\"/docs/presentations/revealjs/examples/creating-slides-2.qmd\"}\n---\ntitle: \"Habits\"\nauthor: \"John Doe\"\nformat: {{< meta slide-format >}}\n---\n\n# In the morning\n\n## Getting up\n\n- Turn off alarm\n- Get out of bed\n\n## Breakfast\n\n- Eat eggs\n- Drink coffee\n\n# In the evening\n\n## Dinner\n\n- Eat spaghetti\n- Drink wine\n\n## Going to sleep\n\n- Get in bed\n- Count sheep\n```\n\nFinally, you can also delineate slides using horizontal rules (for example, if you have a slide without a title):\n\n``` {.markdown code-preview=\"/docs/presentations/revealjs/examples/creating-slides-3.qmd\"}\n---\ntitle: \"Habits\"\nauthor: \"John Doe\"\nformat: {{< meta slide-format >}}\n---\n\n- Turn off alarm\n- Get out of bed\n\n---\n\n- Get in bed\n- Count sheep\n```\n\nThe examples above all use level 2 headings for slides and level 1 headings for sections/title slides. You can customize this using the `slide-level` option (See the Pandoc documentation on [structuring the slide show](https://pandoc.org/MANUAL.html#structuring-the-slide-show) for additional details.\n\n### Title Slide\n\nYou'll notice in the above examples that a title slide is automatically created based on the `title` and `author` provided in the document YAML options. However, sometimes you don't want an explicit title slide (e.g. if your first slide consists entirely of a background image). It's perfectly valid to create a presentation without a title slide, just exclude the `title` and `author` options:\n\n``` markdown\n---\nformat: {{< meta slide-format >}}\n---\n\n## Getting up\n\n- Turn off alarm\n- Get out of bed\n\n## Going to sleep\n\n- Get in bed\n- Count sheep\n```\n\n## Incremental Lists\n\nBy default number and bullet lists within slides are displayed all at once. You can override this globally using the `incremental` option. For example:\n\n```{.yaml code-preview=\"/docs/presentations/revealjs/examples/incremental-lists-1.qmd\"}\ntitle: \"My Presentation\"\nformat:\n {{< meta slide-format >}}:\n incremental: true \n```\n\nYou can also explicitly make any list incremental or non-incremental by surrounding it in a div with an explicit class that determines the mode. To make a list incremental do this:\n\n```{.markdown code-preview=\"/docs/presentations/revealjs/examples/incremental-lists-2.qmd\"}\n::: {.incremental}\n- Eat spaghetti\n- Drink wine\n:::\n```\n\nTo make a list non-incremental do this:\n\n```{.markdown code-preview=\"/docs/presentations/revealjs/examples/incremental-lists-3.qmd\"}\n::: {.nonincremental}\n- Eat spaghetti\n- Drink wine\n:::\n```\n\nYou can also insert a pause within a slide (keeping the content after the pause hidden) by inserting three dots separated by spaces:\n\n```{.markdown code-preview=\"/docs/presentations/revealjs/examples/incremental-pause.qmd\"}\n## Slide with a pause\n\ncontent before the pause\n\n. . .\n\ncontent after the pause\n```\n\n## Multiple Columns\n\nTo put material in side by side columns, you can use a native div container with class `.columns`, containing two or more div containers with class `.column` and a `width` attribute:\n\n```{.markdown code-preview=\"/docs/presentations/revealjs/examples/columns.qmd\"}\n:::: {.columns}\n\n::: {.column width=\"40%\"}\nLeft column\n:::\n\n::: {.column width=\"60%\"}\nRight column\n:::\n\n::::\n```\n\n\n\n\n## Content Overflow\n\nIf you have a slide that has more content than can be displayed on a single frame there are two slide-level classes you can apply to mitigate this:\n\n1. Use the `.smaller` class to use a smaller typeface so that more text fits on the slide. For example:\n\n ``` {.markdown code-preview=\"examples/smaller.qmd\"}\n ## Slide Title {.smaller}\n ```\n\n2. Use the `.scrollable` class to make off-slide content available by scrolling. For example:\n\n ``` {.markdown code-preview=\"examples/scrollable.qmd\"}\n ## Slide Title {.scrollable}\n ```\n\nBoth of these options can also be applied globally to all slides as follows:\n\n``` {.yaml code-preview=\"examples/scrollable-and-smaller.qmd\"}\n---\nformat:\n revealjs:\n smaller: true\n scrollable: true\n---\n```\n\n::: {.callout-note}\n\n## Limitation: Auto-stretch and Scrollable \n\nWhen a slide is [scrollable](index.qmd#content-overflow) the image size calculations used by [auto-stretch](advanced.qmd#stretch) may not work well and images may not appear. Two solutions depending on your needs are:\n\n- Disable auto-stretch at the presentation level, `auto-stretch: false`, and use `.r-stretch` on individual images only where needed.\n\n- On slides that are scrollable, add the `.nostretch` class to disable auto-stretch on the slide.\n\n:::\n\n## Speaker Notes\n\nYou can add speaker notes to a slide using a div with class `.notes`. For example:\n\n```{.markdown example-link=\"/docs/presentations/revealjs/examples/speaker-notes.qmd\"}\n## Slide with speaker notes\n\nSlide content\n\n::: {.notes}\nSpeaker notes go here.\n:::\n```\n\nThis is a Revealjs feature from [built-in plugin](https://revealjs.com/plugins/#built-in-plugins) which brings limitation: the content cannot rely on external dependencies. For instance, if you want to include a mermaid diagram that typically needs mermaid.js, it will need to be embed as an SVG or PNG image.\n\n\n\n\nPress the S key (or use the [Navigation Menu](presenting.qmd#navigation-menu)) to show the presentation speaker view:\n\n![](images/speaker-view.png){.border fig-alt=\"Screenshot of reveal.js presentation in Speaker View. On the right, the active slide is shown. The left column contains three sections which show (from top to bottom): the upcoming slide, time (both elapsed and clock time), and a section where speaker notes go.\"}\n\nYou'll typically use this view on one screen (e.g. your laptop) while presenting the slides on another screen.\n\n## Themes\n\nThere are 11 built-in themes provided for Reveal presentations (you can also create your own themes). The `default` and `dark` themes use fairly classic typography and color schemes and are a good place to start.\n\nThe `default` theme is used automatically --- use the `theme` option to switch to an alternate theme. For example\n\n```{.yaml code-preview=\"/docs/presentations/revealjs/examples/theme-dark.qmd\"}\n---\ntitle: \"Presentation\"\nformat:\n revealjs: \n theme: dark\n---\n```\n\nHere is the full list of available themes:\n\n- `beige`\n- `blood`\n- `dark`\n- `default`\n- `league`\n- `moon`\n- `night`\n- `serif`\n- `simple`\n- `sky`\n- `solarized`\n\n\n\n\n\nSee the article on [Reveal Themes](themes.qmd) for additional details on customizing themes and creating brand new themes of your own.\n\n## Asides & Footnotes\n\nAsides contain content of more peripheral interest, and are displayed in a smaller, lighter font at the bottom of the slide. Creates asides using a div with the `aside` class. For example:\n\n``` markdown\n## Slide Title\n\nSlide content\n\n::: aside\nSome additional commentary of more peripheral interest.\n:::\n```\n\nFootnotes have a similar visual treatment to asides, but include a footnote number. For example, here we use a footnote and an aside on a single slide:\n\n``` markdown\n## Slide Title\n\n- Green ^[A footnote]\n- Brown\n- Purple\n\n::: aside\nSome additional commentary of more peripheral interest.\n:::\n```\n\nWhich looks like this when rendered:\n\n![](images/footnote.png){.border fig-alt=\"Rendered slide with title at the top, followed by a bulleted list (the first item of which has a footnote). The bottom of the slide shows the aside (Some additional commentary of more peripheral interest.), and below that the footnote.\"}\n\nIf you prefer that footnotes be included at the end of the document, specify the `reference-location: document` option:\n\n``` yaml\n---\nformat:\n revealjs:\n reference-location: document\n---\n```\n\nNote that when specifying this option footnotes can still be viewed while on the slide by hovering over the footnote number.\n\n## Footer & Logo\n\nYou can include footer text and a logo at the bottom of each slide using the `footer` and `logo` options. For example:\n\n``` {.yaml code-preview=\"examples/footer-and-logo.qmd\"}\n---\nformat:\n revealjs:\n logo: logo.png\n footer: \"Footer text\"\n---\n```\n\nYou can also include a custom footer per-slide by adding a footer div at the bottom of the the slide:\n\n``` {.markdown code-preview=\"examples/per-slide-footer.qmd\"}\n## Slide Title\n\nSlide content\n\n::: footer\nCustom footer text\n:::\n```\n\n## Code Blocks\n\nMost of the core capabilities of Quarto [HTML Code Blocks](../../output-formats/html-code.qmd) are available for Reveal slides, including code folding, code copy, and the ability to pick a custom syntax highlighting theme. Note that if you choose a dark Reveal theme then the default Quarto dark syntax highlighting theme will be used.\n\n### Line Highlighting\n\nYou may want to highlight specific lines of code output (or even highlight distinct lines over a progression of steps). You can do this using the `code-line-numbers` attribute of code blocks. For example:\n\n```` {.java code-preview=\"examples/line-highlighting-1.qmd\"}\n```{.python code-line-numbers=\"6-8\"}\nimport numpy as np\nimport matplotlib.pyplot as plt\n\nr = np.arange(0, 2, 0.01)\ntheta = 2 * np.pi * r\nfig, ax = plt.subplots(subplot_kw={'projection': 'polar'})\nax.plot(theta, r)\nax.set_rticks([0.5, 1, 1.5, 2])\nax.grid(True)\nplt.show()\n```\n````\n\nNote that you can also highlight disparate ranges of lines by separating them with a comma. For example:\n\n```` {.java code-preview=\"examples/line-highlighting-2.qmd\"}\n```{.python code-line-numbers=\"7,9\"}\nimport numpy as np\nimport matplotlib.pyplot as plt\n\nr = np.arange(0, 2, 0.01)\ntheta = 2 * np.pi * r\nfig, ax = plt.subplots(subplot_kw={'projection': 'polar'})\nax.plot(theta, r)\nax.set_rticks([0.5, 1, 1.5, 2])\nax.grid(True)\nplt.show()\n```\n````\n\nFinally, you can highlight different line ranges progressively by separating them with `|`. For example, here we start by showing all lines, then progress to highlighting line 6, and finally to highlighting line 9:\n\n```` {.java code-preview=\"examples/line-highlighting-3.qmd\"}\n```{.python code-line-numbers=\"|6|9\"}\nimport numpy as np\nimport matplotlib.pyplot as plt\n\nr = np.arange(0, 2, 0.01)\ntheta = 2 * np.pi * r\nfig, ax = plt.subplots(subplot_kw={'projection': 'polar'})\nax.plot(theta, r)\nax.set_rticks([0.5, 1, 1.5, 2])\nax.grid(True)\nplt.show()\n```\n````\n\nYou can use this same option within an executable code cell by using the `code-line-numbers` cell options:\n\n```` {.java code-preview=\"examples/line-highlighting-4.qmd\"}\n```{{python}}\n#| code-line-numbers: \"|6|9\"\n\nimport numpy as np\nimport matplotlib.pyplot as plt\n\nr = np.arange(0, 2, 0.01)\ntheta = 2 * np.pi * r\nfig, ax = plt.subplots(subplot_kw={'projection': 'polar'})\nax.plot(theta, r)\nax.set_rticks([0.5, 1, 1.5, 2])\nax.grid(True)\nplt.show()\n```\n````\n\n### Code Block Height\n\nBy default, code blocks are limited to a maximum height of 500px. Code that exceeds this height introduces a scrollbar. To avoid a scrollbar you can increase the maximum height with the `code-block-height` option :\n\n\n```{yaml}\n---\nformat:\n revealjs: \n code-block-height: 800px\n---\n```\n\n\n## Executable Code\n\nYou can include the output of executable code blocks on slides just the same as with other Quarto documents. This works essentially the same for slides as it does for other formats, however there are a couple of special considerations for slides covered below.\n\n### Figure Size\n\nYou will frequently need to customize the size of figures created for slides so that they either fill the entire slide or whatever region of the slide you need them to. Quarto provides some help here: for Python the figure sizes for [Matplotlib](https://matplotlib.org/) and [Plotly Express](https://plotly.com/python/plotly-express/) are set to fill the slide area below the title, and for R the Knitr figure width and height are similarly defaulted.\n\nNevertheless, you will frequently need to change these defaults for a given figure. The details on how to do this vary by graphics library. Here's an example of explicitly sizing an [Altair](https://altair-viz.github.io/) plot:\n\n``` {.python code-preview=\"examples/executable-code-figure-size.qmd\"}\nalt.Chart(cars).mark_point().encode(\n x='Horsepower',\n y='Miles_per_Gallon',\n color='Origin',\n).properties(\n width=700,\n height=300\n).interactive()\n```\n\n### Code Echo\n\nUnlike with ordinary documents, within Quarto presentations executable code blocks do not `echo` their source code by default (this is because often the code produces a figure that wants to occupy as much vertical space as possible). You can override this behavior using the `echo` option. For example:\n\n```` {.java code-preview=\"examples/code-echo.qmd\"}\n```{{python}}\n#| echo: true\n\nimport numpy as np\nimport matplotlib.pyplot as plt\n\nr = np.arange(0, 2, 0.01)\ntheta = 2 * np.pi * r\nfig, ax = plt.subplots(subplot_kw={\"projection\": \"polar\"})\nax.plot(theta, r)\nax.set_rticks([0.5, 1, 1.5, 2])\nax.grid(True)\nplt.show()\n```\n````\n\n### Output Location\n\nBy default, output from executable code blocks is displayed immediately after the code. You can use the `output-location` option to modify this behavior as follows:\n\n| | |\n|-------------------|-----------------------------------------------------------------------------------------------------------------------------------------|\n| `fragment` | Display output as a [Fragment](advanced.qmd#fragments) (delay showing it until it is explicitly stepped through by advancing the slide). |\n| `slide` | Display output on the subsequent slide. |\n| `column` | Display output in a column adjacent to the code. |\n| `column-fragment` | Display output in a column adjacent to the code and delay showing it until it is explicitly stepped through by advancing the slide. |\n\nFor example, here we display cell output on its own slide:\n\n```{{r}}\n#| echo: true\n#| output-location: slide\nlibrary(ggplot2)\nggplot(airquality, aes(Temp, Ozone)) + \n geom_point() + \n geom_smooth(method = \"loess\")\n```\n\nSee the documentation on [Execution Options](../../computations/execution-options.qmd) for more details on the various other ways to customize output from code execution.\n\n## Tabsets\n\nYou can add tabbed content to slides using the standard Quarto syntax for [tabsets](../../output-formats/html-basics.qmd#tabsets). For example:\n\n``` {.markdown code-preview=\"examples/tabset.qmd\"}\n::: {.panel-tabset}\n\n### Tab A\n\nContent for `Tab A`\n\n### Tab B\n\nContent for `Tab B`\n\n:::\n```\n\nNote that one significant disadvantage to tabsets is that only the first tab will be visible when printing to PDF.\n\n## Slide Backgrounds\n\nSlides are contained within a limited portion of the screen by default to allow them to fit any display and scale uniformly. You can apply full page backgrounds outside of the slide area by adding a `background` attribute to your slide headers. Four different types of backgrounds are supported: color, image, video and iframe.\n\nAll CSS color formats are supported, including hex values, keywords, `rgba()` or `hsl()`. For example:\n\n``` {.markdown code-preview=\"examples/background-color.qmd\"}\n## Slide Title {background-color=\"aquamarine\"}\n```\n\nYou can also use various types of media (image, video, or iframe) as your slide background. These options are described below.\n\n::: {.callout-tip appearance=\"simple\"}\nNote that if the background color of your media differs from your presentation's theme (e.g. a dark image when using a light theme) then you should also explicitly set the `background-color` so that text on top of the background appears in the correct color (e.g. light text on a dark background).\n:::\n\n### Image Backgrounds\n\nBy default, background images are resized to cover the full page. Available options:\n\n| **Attribute** | **Default** | **Description** |\n|:----------------------|:------------|:--------------------------------------------------------------------------------------------------|\n| `background-image` | | URL of the image to show. GIFs restart when the slide opens. |\n| `background-size` | cover | See [background-size](https://developer.mozilla.org/docs/Web/CSS/background-size) on MDN. |\n| `background-position` | center | See [background-position](https://developer.mozilla.org/docs/Web/CSS/background-position) on MDN. |\n| `background-repeat` | no-repeat | See [background-repeat](https://developer.mozilla.org/docs/Web/CSS/background-repeat) on MDN. |\n| `background-opacity` | 1 | Opacity of the background image on a 0-1 scale. 0 is transparent and 1 is fully opaque. |\n\nFor example:\n\n``` {.markdown code-preview=\"examples/image-background.qmd\"}\n## Slide Title {background-color=\"black\" background-image=\"https://placekitten.com/100/100\" background-size=\"100px\" background-repeat=\"repeat\"}\n\nThis slide's background image will be sized to 100px and repeated.\n```\n\nSince this image has a dark background and our slides use the default (light) theme, we explicitly set the `background-color` to black so that text drawn on top of it is light.\n\n### Video Backgrounds\n\nAutomatically plays a full size video behind the slide.\n\n\n\n\n| **Attribute** | **Default** | **Description** |\n|:-------------------------|:------------|:----------------------------------------------------------------------------------------|\n| `background-video` | | A single video source, or a comma separated list of video sources. |\n| `background-video-loop` | false | Flags if the video should play repeatedly. |\n| `background-video-muted` | false | Flags if the audio should be muted. |\n| `background-size` | cover | Use `cover` for full screen and some cropping or `contain` for letterboxing. |\n| `background-opacity` | 1 | Opacity of the background video on a 0-1 scale. 0 is transparent and 1 is fully opaque. |\n\nFor example:\n\n``` markdown\n## Slide Title {background-video=\"video.mp4\" background-video-loop=\"true\" background-video-muted=\"true\"}\n\nThis slides's background video will play in a loop with audio muted.\n```\n\n\n\n### IFrame Backgrounds\n\nEmbeds a web page as a slide background that covers 100% of the reveal.js width and height. The iframe is in the background layer, behind your slides, and as such it's not possible to interact with it by default. To make your background interactive, you can add the `background-interactive` attribute.\n\n| **Attribute** | **Default** | **Description** |\n|:-------------------------|:------------|:------------------------------------------------------------------------------------------------------------------------------------------------|\n| `background-iframe` | | URL of the iframe to load |\n| `background-interactive` | false | Include this attribute to make it possible to interact with the iframe contents. Enabling this will prevent interaction with the slide content. |\n\nFor example:\n\n``` markdown\n## Slide Title {background-iframe=\"https://example.com\"}\n```\n\n### Slide Backgrounds Without a Title\n\nYou can always omit the title text, and specify only the slide background information:\n\n``` {.markdown code-preview=\"examples/background-no-title.qmd\"}\n## {background-color=\"aquamarine\"}\n\n(A slide with no title)\n\n## {background-color=\"black\" background-image=\"https://placekitten.com/100/100\" background-size=\"100px\" background-repeat=\"repeat\"}\n\n(Another slide with no title)\n```\n\n### Main Title Slide Background\n\nThe main title slide is the first slide, which is generated via document YAML options. As a result, the methods described above won't work for providing a background for the title slide. Rather, you need to do the following:\n\n1. Provide the title slide background options under `title-slide-attributes`\n2. Prepend the background options with `data-`\n\nFor example:\n\n```yaml\n---\ntitle: My Slide Show\ntitle-slide-attributes:\n data-background-image: /path/to/title_image.png\n data-background-size: contain\n data-background-opacity: \"0.5\"\n---\n```\n\n## Learning More\n\nSee these articles lo learn about more advanced capabilities of Reveal:\n\n- [Presenting Slides](presenting.qmd) describes slide navigation, printing to PDF, drawing on slides using a chalkboard, and creating multiplex presentations.\n- [Advanced Reveal](advanced.qmd) delves into transitions, animations, advanced layout and positioning, and other options available for customizing presentations.\n- [Reveal Themes](themes.qmd) talks about using and customizing existing themes as well as creating brand new themes.\n\n", + "supporting": [ + "index_files" + ], + "filters": [], + "includes": {} + } +} \ No newline at end of file diff --git a/docs/presentations/revealjs/index.qmd b/docs/presentations/revealjs/index.qmd index bc5d37a353..8d59514e81 100644 --- a/docs/presentations/revealjs/index.qmd +++ b/docs/presentations/revealjs/index.qmd @@ -218,6 +218,18 @@ plt.show() ``` ```` +### Code Block Height + +By default, code blocks are limited to a maximum height of 500px. Code that exceeds this height introduces a scrollbar. To avoid a scrollbar you can increase the maximum height with the `code-block-height` option: + +```{.yaml} +--- +format: + revealjs: + code-block-height: 650px +--- +``` + ## Executable Code You can include the output of executable code blocks on slides just the same as with other Quarto documents. This works essentially the same for slides as it does for other formats, however there are a couple of special considerations for slides covered below.