diff --git a/_freeze/docs/presentations/revealjs/demo/index/execute-results/html.json b/_freeze/docs/presentations/revealjs/demo/index/execute-results/html.json index 0ddceaa8ae..e78909f035 100644 --- a/_freeze/docs/presentations/revealjs/demo/index/execute-results/html.json +++ b/_freeze/docs/presentations/revealjs/demo/index/execute-results/html.json @@ -1,8 +1,8 @@ { - "hash": "a25e51fa991f3bd0af87c0521d12e70c", + "hash": "6569aeff5d394a79b1e1a44ebbdf3ff3", "result": { "engine": "knitr", - "markdown": "---\ntitle: \"Quarto Presentations\"\nsubtitle: \"Create beautiful interactive slide decks with Reveal.js\"\nformat:\n revealjs: \n slide-number: true\n chalkboard: \n buttons: false\n preview-links: auto\n logo: images/quarto.png\n css: styles.css\n footer: \nresources:\n - demo.pdf\n---\n\n\n\n## Hello, There\n\nThis presentation will show you examples of what you can do with Quarto and [Reveal.js](https://revealjs.com), including:\n\n- Presenting code and LaTeX equations\n- Including computations in slide output\n- Image, video, and iframe backgrounds\n- Fancy transitions and animations\n- Printing to PDF\n\n...and much more\n\n## Pretty Code {auto-animate=\"true\"}\n\n- Over 20 syntax highlighting themes available\n- Default theme optimized for accessibility\n\n``` r\n# Define a server for the Shiny app\nfunction(input, output) {\n \n # Fill in the spot we created for a plot\n output$phonePlot <- renderPlot({\n # Render a barplot\n })\n}\n```\n\n::: footer\nLearn more: [Syntax Highlighting](https://quarto.org/docs/output-formats/html-code.html#highlighting)\n:::\n\n## Code Animations {auto-animate=\"true\"}\n\n- Over 20 syntax highlighting themes available\n- Default theme optimized for accessibility\n\n``` r\n# Define a server for the Shiny app\nfunction(input, output) {\n \n # Fill in the spot we created for a plot\n output$phonePlot <- renderPlot({\n # Render a barplot\n barplot(WorldPhones[,input$region]*1000, \n main=input$region,\n ylab=\"Number of Telephones\",\n xlab=\"Year\")\n })\n}\n```\n\n::: footer\nLearn more: [Code Animations](https://quarto.org/docs/presentations/revealjs/advanced.html#code-animations)\n:::\n\n## Line Highlighting\n\n- Highlight specific lines for emphasis\n- Incrementally highlight additional lines\n\n``` {.python code-line-numbers=\"4-5|7|10\"}\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::: footer\nLearn more: [Line Highlighting](https://quarto.org/docs/presentations/revealjs/#line-highlighting)\n:::\n\n## Executable Code\n\n\n\n::: {.cell}\n\n```{.r .cell-code}\nlibrary(ggplot2)\nggplot(mtcars, aes(hp, mpg, color = am)) +\n geom_point() +\n geom_smooth(formula = y ~ x, method = \"loess\")\n```\n\n::: {.cell-output-display}\n![](index_files/figure-revealjs/unnamed-chunk-1-1.png){width=960}\n:::\n:::\n\n\n\n::: footer\nLearn more: [Executable Code](https://quarto.org/docs/presentations/revealjs/#executable-code)\n:::\n\n## LaTeX Equations\n\n[MathJax](https://www.mathjax.org/) rendering of equations to HTML\n\n::: columns\n::: {.column width=\"40%\"}\n``` tex\n\\begin{gather*}\na_1=b_1+c_1\\\\\na_2=b_2+c_2-d_2+e_2\n\\end{gather*}\n\n\\begin{align}\na_{11}& =b_{11}&\n a_{12}& =b_{12}\\\\\na_{21}& =b_{21}&\n a_{22}& =b_{22}+c_{22}\n\\end{align}\n```\n:::\n\n::: {.column width=\"60%\"}\n\n\n```{=tex}\n\\begin{gather*}\na_1=b_1+c_1\\\\\na_2=b_2+c_2-d_2+e_2\n\\end{gather*}\n```\n\n```{=tex}\n\\begin{align}\na_{11}& =b_{11}&\n a_{12}& =b_{12}\\\\\na_{21}& =b_{21}&\n a_{22}& =b_{22}+c_{22}\n\\end{align}\n```\n\n\n:::\n:::\n\n::: footer\nLearn more: [LaTeX Equations](https://quarto.org/docs/authoring/markdown-basics.html#equations)\n:::\n\n## Column Layout {.smaller}\n\nArrange content into columns of varying widths:\n\n::: columns\n::: {.column width=\"35%\"}\n#### Motor Trend Car Road Tests\n\nThe data was extracted from the 1974 Motor Trend US magazine, and comprises fuel consumption and 10 aspects of automobile design and performance for 32 automobiles.\n:::\n\n::: {.column width=\"3%\"}\n:::\n\n::: {.column width=\"62%\"}\n\n\n::: {.cell}\n::: {.cell-output-display}\n\n\n| | mpg| cyl| disp| hp| wt|\n|:-----------------|----:|---:|----:|---:|-----:|\n|Mazda RX4 | 21.0| 6| 160| 110| 2.620|\n|Mazda RX4 Wag | 21.0| 6| 160| 110| 2.875|\n|Datsun 710 | 22.8| 4| 108| 93| 2.320|\n|Hornet 4 Drive | 21.4| 6| 258| 110| 3.215|\n|Hornet Sportabout | 18.7| 8| 360| 175| 3.440|\n|Valiant | 18.1| 6| 225| 105| 3.460|\n\n\n:::\n:::\n\n\n:::\n:::\n\n::: footer\nLearn more: [Multiple Columns](https://quarto.org/docs/presentations/revealjs/#multiple-columns)\n:::\n\n## Incremental Lists\n\nLists can optionally be displayed incrementally:\n\n::: incremental\n- First item\n- Second item\n- Third item\n:::\n\n. . .\n\n
Insert pauses to make other types of content display incrementally.\n\n::: footer\nLearn more: [Incremental Lists](https://quarto.org/docs/presentations/revealjs/#incremental-lists)\n:::\n\n## Fragments\n\nIncremental text display and animation with fragments:\n\n
\n\n::: {.fragment .fade-in}\nFade in\n:::\n\n::: {.fragment .fade-up}\nSlide up while fading in\n:::\n\n::: {.fragment .fade-left}\nSlide left while fading in\n:::\n\n::: {.fragment .fade-in-then-semi-out}\nFade in then semi out\n:::\n\n. . .\n\n::: {.fragment .strike}\nStrike\n:::\n\n::: {.fragment .highlight-red}\nHighlight red\n:::\n\n::: footer\nLearn more: [Fragments](https://quarto.org/docs/presentations/revealjs/advanced.html#fragments)\n:::\n\n## Slide Backgrounds {background=\"#43464B\"}\n\nSet the `background` attribute on a slide to change the background color (all CSS color formats are supported).\n\nDifferent background transitions are available via the `background-transition` option.\n\n::: footer\nLearn more: [Slide Backgrounds](https://quarto.org/docs/presentations/revealjs/#color-backgrounds)\n:::\n\n## Media Backgrounds {background=\"#43464B\" background-image=\"images/milky-way.jpeg\"}\n\nYou can also use the following as a slide background:\n\n- An image: `background-image`\n\n- A video: `background-video`\n\n- An iframe: `background-iframe`\n\n::: footer\nLearn more: [Media Backgrounds](https://quarto.org/docs/presentations/revealjs/#image-backgrounds)\n:::\n\n## Absolute Position\n\nPosition images or other elements at precise locations\n\n![](mini/images/kitten-400-350.jpeg){.absolute top=\"170\" left=\"30\" width=\"400\" height=\"400\"}\n\n![](mini/images/kitten-450-250.jpeg){.absolute .fragment top=\"150\" right=\"80\" width=\"450\"}\n\n![](mini/images/kitten-300-200.jpeg){.absolute .fragment bottom=\"110\" right=\"130\" width=\"300\"}\n\n::: footer\nLearn more: [Absolute Position](https://quarto.org/docs/presentations/revealjs/advanced.html#absolute-position)\n:::\n\n## Auto-Animate {auto-animate=\"true\" auto-animate-easing=\"ease-in-out\"}\n\nAutomatically animate matching elements across slides with Auto-Animate.\n\n::: r-hstack\n::: {data-id=\"box1\" auto-animate-delay=\"0\" style=\"background: #2780e3; width: 200px; height: 150px; margin: 10px;\"}\n:::\n\n::: {data-id=\"box2\" auto-animate-delay=\"0.1\" style=\"background: #3fb618; width: 200px; height: 150px; margin: 10px;\"}\n:::\n\n::: {data-id=\"box3\" auto-animate-delay=\"0.2\" style=\"background: #e83e8c; width: 200px; height: 150px; margin: 10px;\"}\n:::\n:::\n\n::: footer\nLearn more: [Auto-Animate](https://quarto.org/docs/presentations/revealjs/advanced.html#auto-animate)\n:::\n\n## Auto-Animate {auto-animate=\"true\" auto-animate-easing=\"ease-in-out\"}\n\nAutomatically animate matching elements across slides with Auto-Animate.\n\n::: r-stack\n::: {data-id=\"box1\" style=\"background: #2780e3; width: 350px; height: 350px; border-radius: 200px;\"}\n:::\n\n::: {data-id=\"box2\" style=\"background: #3fb618; width: 250px; height: 250px; border-radius: 200px;\"}\n:::\n\n::: {data-id=\"box3\" style=\"background: #e83e8c; width: 150px; height: 150px; border-radius: 200px;\"}\n:::\n:::\n\n::: footer\nLearn more: [Auto-Animate](https://quarto.org/docs/presentations/revealjs/advanced.html#auto-animate)\n:::\n\n## Slide Transitions {.smaller}\n\nThe next few slides will transition using the `slide` transition\n\n| Transition | Description |\n|------------|------------------------------------------------------------------------|\n| `none` | No transition (default, switch instantly) |\n| `fade` | Cross fade |\n| `slide` | Slide horizontally |\n| `convex` | Slide at a convex angle |\n| `concave` | Slide at a concave angle |\n| `zoom` | Scale the incoming slide so it grows in from the center of the screen. |\n\n::: footer\nLearn more: [Slide Transitions](https://quarto.org/docs/presentations/revealjs/advanced.html#slide-transitions)\n:::\n\n## Tabsets {.smaller .scrollable transition=\"slide\"}\n\n::: panel-tabset\n### Plot\n\n\n\n::: {.cell}\n::: {.cell-output-display}\n![](index_files/figure-revealjs/unnamed-chunk-3-1.png){width=960}\n:::\n:::\n\n\n\n### Data\n\n\n\n::: {.cell}\n::: {.cell-output-display}\n\n\n| | mpg| cyl| disp| hp| drat| wt| qsec| vs| am| gear| carb|\n|:-------------------|----:|---:|-----:|---:|----:|-----:|-----:|--:|--:|----:|----:|\n|Mazda RX4 | 21.0| 6| 160.0| 110| 3.90| 2.620| 16.46| 0| 1| 4| 4|\n|Mazda RX4 Wag | 21.0| 6| 160.0| 110| 3.90| 2.875| 17.02| 0| 1| 4| 4|\n|Datsun 710 | 22.8| 4| 108.0| 93| 3.85| 2.320| 18.61| 1| 1| 4| 1|\n|Hornet 4 Drive | 21.4| 6| 258.0| 110| 3.08| 3.215| 19.44| 1| 0| 3| 1|\n|Hornet Sportabout | 18.7| 8| 360.0| 175| 3.15| 3.440| 17.02| 0| 0| 3| 2|\n|Valiant | 18.1| 6| 225.0| 105| 2.76| 3.460| 20.22| 1| 0| 3| 1|\n|Duster 360 | 14.3| 8| 360.0| 245| 3.21| 3.570| 15.84| 0| 0| 3| 4|\n|Merc 240D | 24.4| 4| 146.7| 62| 3.69| 3.190| 20.00| 1| 0| 4| 2|\n|Merc 230 | 22.8| 4| 140.8| 95| 3.92| 3.150| 22.90| 1| 0| 4| 2|\n|Merc 280 | 19.2| 6| 167.6| 123| 3.92| 3.440| 18.30| 1| 0| 4| 4|\n|Merc 280C | 17.8| 6| 167.6| 123| 3.92| 3.440| 18.90| 1| 0| 4| 4|\n|Merc 450SE | 16.4| 8| 275.8| 180| 3.07| 4.070| 17.40| 0| 0| 3| 3|\n|Merc 450SL | 17.3| 8| 275.8| 180| 3.07| 3.730| 17.60| 0| 0| 3| 3|\n|Merc 450SLC | 15.2| 8| 275.8| 180| 3.07| 3.780| 18.00| 0| 0| 3| 3|\n|Cadillac Fleetwood | 10.4| 8| 472.0| 205| 2.93| 5.250| 17.98| 0| 0| 3| 4|\n|Lincoln Continental | 10.4| 8| 460.0| 215| 3.00| 5.424| 17.82| 0| 0| 3| 4|\n|Chrysler Imperial | 14.7| 8| 440.0| 230| 3.23| 5.345| 17.42| 0| 0| 3| 4|\n|Fiat 128 | 32.4| 4| 78.7| 66| 4.08| 2.200| 19.47| 1| 1| 4| 1|\n|Honda Civic | 30.4| 4| 75.7| 52| 4.93| 1.615| 18.52| 1| 1| 4| 2|\n|Toyota Corolla | 33.9| 4| 71.1| 65| 4.22| 1.835| 19.90| 1| 1| 4| 1|\n|Toyota Corona | 21.5| 4| 120.1| 97| 3.70| 2.465| 20.01| 1| 0| 3| 1|\n|Dodge Challenger | 15.5| 8| 318.0| 150| 2.76| 3.520| 16.87| 0| 0| 3| 2|\n|AMC Javelin | 15.2| 8| 304.0| 150| 3.15| 3.435| 17.30| 0| 0| 3| 2|\n|Camaro Z28 | 13.3| 8| 350.0| 245| 3.73| 3.840| 15.41| 0| 0| 3| 4|\n|Pontiac Firebird | 19.2| 8| 400.0| 175| 3.08| 3.845| 17.05| 0| 0| 3| 2|\n|Fiat X1-9 | 27.3| 4| 79.0| 66| 4.08| 1.935| 18.90| 1| 1| 4| 1|\n|Porsche 914-2 | 26.0| 4| 120.3| 91| 4.43| 2.140| 16.70| 0| 1| 5| 2|\n|Lotus Europa | 30.4| 4| 95.1| 113| 3.77| 1.513| 16.90| 1| 1| 5| 2|\n|Ford Pantera L | 15.8| 8| 351.0| 264| 4.22| 3.170| 14.50| 0| 1| 5| 4|\n|Ferrari Dino | 19.7| 6| 145.0| 175| 3.62| 2.770| 15.50| 0| 1| 5| 6|\n|Maserati Bora | 15.0| 8| 301.0| 335| 3.54| 3.570| 14.60| 0| 1| 5| 8|\n|Volvo 142E | 21.4| 4| 121.0| 109| 4.11| 2.780| 18.60| 1| 1| 4| 2|\n\n\n:::\n:::\n\n\n:::\n\n::: footer\nLearn more: [Tabsets](https://quarto.org/docs/presentations/revealjs/#tabsets)\n:::\n\n## Interactive Slides {.smaller transition=\"slide\"}\n\nInclude Jupyter widgets and htmlwidgets in your presentations\n\n\n\n::: {.cell}\n::: {.cell-output-display}\n\n```{=html}\n
\n\n```\n\n:::\n:::\n\n\n\n::: footer\nLearn more: [Jupyter widgets](https://quarto.org/docs/interactive/widgets/jupyter.html), [htmlwidgets](https://quarto.org/docs/interactive/widgets/htmlwidgets.html)\n:::\n\n## Interactive Slides {.smaller transition=\"slide\"}\n\nTurn presentations into applications with Observable and Shiny. Use component layout to position inputs and outputs.\n\n\n\n::: {.cell}\n\n:::\n\n```{ojs}\n//| panel: sidebar\nviewof talentWeight = Inputs.range([-2, 2], { value: 0.7, step: 0.01, label: \"talent weight\" })\nviewof looksWeight = Inputs.range([-2, 2], { value: 0.7, step: 0.01, label: \"looks weight\" })\nviewof minimum = Inputs.range([-2, 2], { value: 1, step: 0.01, label: \"min fame\" })\n```\n\n```{ojs}\n//| panel: fill\nimport { plotActors } from './actors.js';\nplotActors(actors, talentWeight, looksWeight, minimum)\n```\n\n\n\n::: footer\nLearn more: [Observable](https://quarto.org/docs/interactive/ojs/), [Shiny](https://quarto.org/docs/interactive/shiny/), [Component Layout](https://quarto.org/docs/interactive/layout.html)\n:::\n\n## Preview Links\n\nNavigate to hyperlinks without disrupting the flow of your presentation.\n\nUse the `preview-links` option to open links in an iframe on top of your slides. Try clicking the link below for a demonstration:\n\n::: {style=\"text-align: center; margin-top: 1em\"}\n[Matplotlib: Visualization with Python](https://matplotlib.org/){preview-link=\"true\" style=\"text-align: center\"}\n:::\n\n::: footer\nLearn more: [Preview Links](https://quarto.org/docs/presentations/revealjs/presenting.html#preview-links)\n:::\n\n## Themes\n\n10 Built-in Themes (or [create your own](https://quarto.org/docs/presentations/revealjs/themes.html#creating-themes))\n\n::: {layout-ncol=\"2\"}\n![](images/moon.png)\n\n![](images/sky.png)\n:::\n\n::: footer\nLearn more: [Themes](https://quarto.org/docs/presentations/revealjs/themes.html)\n:::\n\n## Easy Navigation\n\n::: {style=\"margin-bottom: 0.9em;\"}\nQuickly jump to other parts of your presentation\n:::\n\n::: {layout=\"[1, 20]\"}\n![](images/presentation-menu.png){width=\"41\"}\n\nToggle the slide menu with the menu button (bottom left of slide) to go to other slides and access presentation tools.\n:::\n\nYou can also press `m` to toggle the menu open and closed.\n\nYou can also press `g` to toggle 'Jump To Slide' modal box to quickly go to one of your slide using its number or id.\n\n::: footer\nLearn more: [Navigation](/docs/presentations/revealjs/presenting.qmd#navigation-menu) / [Jump To Slide](/docs/presentations/revealjs/presenting.qmd#jump-to-slide)\n:::\n\n## Jump To Slide\n\n::: {style=\"margin-bottom: 0.9em;\"}\nQuickly jump to other parts of your presentation\n:::\n\n## Chalkboard {chalkboard-buttons=\"true\"}\n\n::: {style=\"margin-bottom: 0.9em;\"}\nFree form drawing and slide annotations\n:::\n\n::: {layout=\"[1, 20]\"}\n![](images/presentation-chalkboard.png){width=\"41\"}\n\nUse the chalkboard button at the bottom left of the slide to toggle the chalkboard.\n:::\n\n::: {layout=\"[1, 20]\"}\n![](images/presentation-notes-canvas.png){width=\"41\"}\n\nUse the notes canvas button at the bottom left of the slide to toggle drawing on top of the current slide.\n:::\n\nYou can also press `b` to toggle the chalkboard or `c` to toggle the notes canvas.\n\n::: footer\nLearn more: [Chalkboard](https://quarto.org/docs/presentations/revealjs/presenting.html#chalkboard)\n:::\n\n## Point of View\n\nPress `o` to toggle overview mode:\n\n![](images/overview-mode.png){.border}\n\nHold down the `Alt` key (or `Ctrl` in Linux) and click on any element to zoom towards it---try it now on this slide.\n\n::: footer\nLearn more: [Overview Mode](https://quarto.org/docs/presentations/revealjs/presenting.html#overview-mode), [Slide Zoom](https://quarto.org/docs/presentations/revealjs/presenting.html#slide-zoom)\n:::\n\n## Speaker View\n\nPress `s` (or use the presentation menu) to open speaker view\n\n![](images/speaker-view.png){fig-align=\"center\" style=\"border: 3px solid #dee2e6;\" width=\"780\"}\n\n::: footer\nLearn more: [Speaker View](https://quarto.org/docs/presentations/revealjs/presenting.html#speaker-view)\n:::\n\n## Authoring Tools {.smaller}\n\nLive side-by-side preview for any notebook or text editor including Jupyter and VS Code\n\n::: columns\n::: {.column width=\"50%\"}\n![](images/jupyter-edit.png){.border .border-thick}\n:::\n\n::: {.column width=\"50%\"}\n![](images/jupyter-preview.png){.border .border-thick}\n:::\n:::\n\n::: footer\nLearn more: [Jupyter](https://quarto.org/docs/tools/jupyter-lab.html), [VS Code](https://quarto.org/docs/tools/vscode.html), [Text Editors](https://quarto.org/docs/tools/text-editors.html)\n:::\n\n## Authoring Tools {.smaller}\n\nRStudio includes an integrated presentation preview pane\n\n![](images/rstudio.png){.border width=\"900\"}\n\n::: footer\nLearn more: [RStudio](https://quarto.org/docs/tools/rstudio.html)\n:::\n\n## And More...\n\n- [Touch](https://quarto.org/docs/presentations/revealjs/advanced.html#touch-navigation) optimized (presentations look great on mobile, swipe to navigate slides)\n- [Footer & Logo](https://quarto.org/docs/presentations/revealjs/#footer-logo) (optionally specify custom footer per-slide or hide global footer)\n- [Auto-Slide](https://quarto.org/docs/presentations/revealjs/presenting.html#auto-slide) (step through slides automatically, without any user input)\n- [Multiplex](https://quarto.org/docs/presentations/revealjs/presenting.html#multiplex) (allows your audience to follow the slides of the presentation you are controlling on their own phone, tablet or laptop).\n\n::: footer\nLearn more: [Quarto Presentations](https://quarto.org/docs/presentations/revealjs/)\n:::\n", + "markdown": "---\ntitle: \"Quarto Presentations\"\nsubtitle: \"Create beautiful interactive slide decks with Reveal.js\"\nformat:\n revealjs: \n slide-number: true\n chalkboard: \n buttons: false\n preview-links: auto\n logo: images/quarto.png\n css: styles.css\n footer: '[https://{{< meta prerelease-subdomain >}}quarto.org](https://{{< meta prerelease-subdomain >}}quarto.org)'\nresources:\n - demo.pdf\n---\n\n\n\n## Hello, There\n\nThis presentation will show you examples of what you can do with Quarto and [Reveal.js](https://revealjs.com), including:\n\n- Presenting code and LaTeX equations\n- Including computations in slide output\n- Image, video, and iframe backgrounds\n- Fancy transitions and animations\n- Activating scroll view\n\n...and much more\n\n## Pretty Code {auto-animate=\"true\"}\n\n- Over 20 syntax highlighting themes available\n- Default theme optimized for accessibility\n\n``` r\n# Define a server for the Shiny app\nfunction(input, output) {\n \n # Fill in the spot we created for a plot\n output$phonePlot <- renderPlot({\n # Render a barplot\n })\n}\n```\n\n::: footer\nLearn more: [Syntax Highlighting](https://{{< meta prerelease-subdomain >}}quarto.org/docs/output-formats/html-code.html#highlighting)\n:::\n\n## Code Animations {auto-animate=\"true\"}\n\n- Over 20 syntax highlighting themes available\n- Default theme optimized for accessibility\n\n``` r\n# Define a server for the Shiny app\nfunction(input, output) {\n \n # Fill in the spot we created for a plot\n output$phonePlot <- renderPlot({\n # Render a barplot\n barplot(WorldPhones[,input$region]*1000, \n main=input$region,\n ylab=\"Number of Telephones\",\n xlab=\"Year\")\n })\n}\n```\n\n::: footer\nLearn more: [Code Animations](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/advanced.html#code-animations)\n:::\n\n## Line Highlighting\n\n- Highlight specific lines for emphasis\n- Incrementally highlight additional lines\n\n``` {.python code-line-numbers=\"4-5|7|10\"}\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::: footer\nLearn more: [Line Highlighting](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/#line-highlighting)\n:::\n\n## Executable Code\n\n\n\n::: {.cell}\n\n```{.r .cell-code}\nlibrary(ggplot2)\nggplot(mtcars, aes(hp, mpg, color = am)) +\n geom_point() +\n geom_smooth(formula = y ~ x, method = \"loess\")\n```\n\n::: {.cell-output-display}\n![](index_files/figure-revealjs/unnamed-chunk-1-1.png){width=960}\n:::\n:::\n\n\n\n::: footer\nLearn more: [Executable Code](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/#executable-code)\n:::\n\n## LaTeX Equations\n\n[MathJax](https://www.mathjax.org/) rendering of equations to HTML\n\n::: columns\n::: {.column width=\"40%\"}\n``` tex\n\\begin{gather*}\na_1=b_1+c_1\\\\\na_2=b_2+c_2-d_2+e_2\n\\end{gather*}\n\n\\begin{align}\na_{11}& =b_{11}&\n a_{12}& =b_{12}\\\\\na_{21}& =b_{21}&\n a_{22}& =b_{22}+c_{22}\n\\end{align}\n```\n:::\n\n::: {.column width=\"60%\"}\n\n\n```{=tex}\n\\begin{gather*}\na_1=b_1+c_1\\\\\na_2=b_2+c_2-d_2+e_2\n\\end{gather*}\n```\n\n```{=tex}\n\\begin{align}\na_{11}& =b_{11}&\n a_{12}& =b_{12}\\\\\na_{21}& =b_{21}&\n a_{22}& =b_{22}+c_{22}\n\\end{align}\n```\n\n\n:::\n:::\n\n::: footer\nLearn more: [LaTeX Equations](https://{{< meta prerelease-subdomain >}}quarto.org/docs/authoring/markdown-basics.html#equations)\n:::\n\n## Column Layout {.smaller}\n\nArrange content into columns of varying widths:\n\n::: columns\n::: {.column width=\"35%\"}\n#### Motor Trend Car Road Tests\n\nThe data was extracted from the 1974 Motor Trend US magazine, and comprises fuel consumption and 10 aspects of automobile design and performance for 32 automobiles.\n:::\n\n::: {.column width=\"3%\"}\n:::\n\n::: {.column width=\"62%\"}\n\n\n::: {.cell}\n::: {.cell-output-display}\n\n\n| | mpg| cyl| disp| hp| wt|\n|:-----------------|----:|---:|----:|---:|-----:|\n|Mazda RX4 | 21.0| 6| 160| 110| 2.620|\n|Mazda RX4 Wag | 21.0| 6| 160| 110| 2.875|\n|Datsun 710 | 22.8| 4| 108| 93| 2.320|\n|Hornet 4 Drive | 21.4| 6| 258| 110| 3.215|\n|Hornet Sportabout | 18.7| 8| 360| 175| 3.440|\n|Valiant | 18.1| 6| 225| 105| 3.460|\n\n\n:::\n:::\n\n\n:::\n:::\n\n::: footer\nLearn more: [Multiple Columns](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/#multiple-columns)\n:::\n\n## Incremental Lists\n\nLists can optionally be displayed incrementally:\n\n::: incremental\n- First item\n- Second item\n- Third item\n:::\n\n. . .\n\n
Insert pauses to make other types of content display incrementally.\n\n::: footer\nLearn more: [Incremental Lists](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/#incremental-lists)\n:::\n\n## Fragments\n\nIncremental text display and animation with fragments:\n\n
\n\n::: {.fragment .fade-in}\nFade in\n:::\n\n::: {.fragment .fade-up}\nSlide up while fading in\n:::\n\n::: {.fragment .fade-left}\nSlide left while fading in\n:::\n\n::: {.fragment .fade-in-then-semi-out}\nFade in then semi out\n:::\n\n. . .\n\n::: {.fragment .strike}\nStrike\n:::\n\n::: {.fragment .highlight-red}\nHighlight red\n:::\n\n::: footer\nLearn more: [Fragments](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/advanced.html#fragments)\n:::\n\n## Slide Backgrounds {background=\"#43464B\"}\n\nSet the `background` attribute on a slide to change the background color (all CSS color formats are supported).\n\nDifferent background transitions are available via the `background-transition` option.\n\n::: footer\nLearn more: [Slide Backgrounds](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/#color-backgrounds)\n:::\n\n## Media Backgrounds {background=\"#43464B\" background-image=\"images/milky-way.jpeg\"}\n\nYou can also use the following as a slide background:\n\n- An image: `background-image`\n\n- A video: `background-video`\n\n- An iframe: `background-iframe`\n\n::: footer\nLearn more: [Media Backgrounds](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/#image-backgrounds)\n:::\n\n## Absolute Position\n\nPosition images or other elements at precise locations\n\n![](mini/images/kitten-400-350.jpeg){.absolute top=\"170\" left=\"30\" width=\"400\" height=\"400\"}\n\n![](mini/images/kitten-450-250.jpeg){.absolute .fragment top=\"150\" right=\"80\" width=\"450\"}\n\n![](mini/images/kitten-300-200.jpeg){.absolute .fragment bottom=\"110\" right=\"130\" width=\"300\"}\n\n::: footer\nLearn more: [Absolute Position](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/advanced.html#absolute-position)\n:::\n\n## Auto-Animate {auto-animate=\"true\" auto-animate-easing=\"ease-in-out\"}\n\nAutomatically animate matching elements across slides with Auto-Animate.\n\n::: r-hstack\n::: {data-id=\"box1\" auto-animate-delay=\"0\" style=\"background: #2780e3; width: 200px; height: 150px; margin: 10px;\"}\n:::\n\n::: {data-id=\"box2\" auto-animate-delay=\"0.1\" style=\"background: #3fb618; width: 200px; height: 150px; margin: 10px;\"}\n:::\n\n::: {data-id=\"box3\" auto-animate-delay=\"0.2\" style=\"background: #e83e8c; width: 200px; height: 150px; margin: 10px;\"}\n:::\n:::\n\n::: footer\nLearn more: [Auto-Animate](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/advanced.html#auto-animate)\n:::\n\n## Auto-Animate {auto-animate=\"true\" auto-animate-easing=\"ease-in-out\"}\n\nAutomatically animate matching elements across slides with Auto-Animate.\n\n::: r-stack\n::: {data-id=\"box1\" style=\"background: #2780e3; width: 350px; height: 350px; border-radius: 200px;\"}\n:::\n\n::: {data-id=\"box2\" style=\"background: #3fb618; width: 250px; height: 250px; border-radius: 200px;\"}\n:::\n\n::: {data-id=\"box3\" style=\"background: #e83e8c; width: 150px; height: 150px; border-radius: 200px;\"}\n:::\n:::\n\n::: footer\nLearn more: [Auto-Animate](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/advanced.html#auto-animate)\n:::\n\n## Slide Transitions {.smaller}\n\nThe next few slides will transition using the `slide` transition\n\n| Transition | Description |\n|------------|------------------------------------------------------------------------|\n| `none` | No transition (default, switch instantly) |\n| `fade` | Cross fade |\n| `slide` | Slide horizontally |\n| `convex` | Slide at a convex angle |\n| `concave` | Slide at a concave angle |\n| `zoom` | Scale the incoming slide so it grows in from the center of the screen. |\n\n::: footer\nLearn more: [Slide Transitions](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/advanced.html#slide-transitions)\n:::\n\n## Tabsets {.smaller .scrollable transition=\"slide\"}\n\n::: panel-tabset\n### Plot\n\n\n\n::: {.cell}\n::: {.cell-output-display}\n![](index_files/figure-revealjs/unnamed-chunk-3-1.png){width=960}\n:::\n:::\n\n\n\n### Data\n\n\n\n::: {.cell}\n::: {.cell-output-display}\n\n\n| | mpg| cyl| disp| hp| drat| wt| qsec| vs| am| gear| carb|\n|:-------------------|----:|---:|-----:|---:|----:|-----:|-----:|--:|--:|----:|----:|\n|Mazda RX4 | 21.0| 6| 160.0| 110| 3.90| 2.620| 16.46| 0| 1| 4| 4|\n|Mazda RX4 Wag | 21.0| 6| 160.0| 110| 3.90| 2.875| 17.02| 0| 1| 4| 4|\n|Datsun 710 | 22.8| 4| 108.0| 93| 3.85| 2.320| 18.61| 1| 1| 4| 1|\n|Hornet 4 Drive | 21.4| 6| 258.0| 110| 3.08| 3.215| 19.44| 1| 0| 3| 1|\n|Hornet Sportabout | 18.7| 8| 360.0| 175| 3.15| 3.440| 17.02| 0| 0| 3| 2|\n|Valiant | 18.1| 6| 225.0| 105| 2.76| 3.460| 20.22| 1| 0| 3| 1|\n|Duster 360 | 14.3| 8| 360.0| 245| 3.21| 3.570| 15.84| 0| 0| 3| 4|\n|Merc 240D | 24.4| 4| 146.7| 62| 3.69| 3.190| 20.00| 1| 0| 4| 2|\n|Merc 230 | 22.8| 4| 140.8| 95| 3.92| 3.150| 22.90| 1| 0| 4| 2|\n|Merc 280 | 19.2| 6| 167.6| 123| 3.92| 3.440| 18.30| 1| 0| 4| 4|\n|Merc 280C | 17.8| 6| 167.6| 123| 3.92| 3.440| 18.90| 1| 0| 4| 4|\n|Merc 450SE | 16.4| 8| 275.8| 180| 3.07| 4.070| 17.40| 0| 0| 3| 3|\n|Merc 450SL | 17.3| 8| 275.8| 180| 3.07| 3.730| 17.60| 0| 0| 3| 3|\n|Merc 450SLC | 15.2| 8| 275.8| 180| 3.07| 3.780| 18.00| 0| 0| 3| 3|\n|Cadillac Fleetwood | 10.4| 8| 472.0| 205| 2.93| 5.250| 17.98| 0| 0| 3| 4|\n|Lincoln Continental | 10.4| 8| 460.0| 215| 3.00| 5.424| 17.82| 0| 0| 3| 4|\n|Chrysler Imperial | 14.7| 8| 440.0| 230| 3.23| 5.345| 17.42| 0| 0| 3| 4|\n|Fiat 128 | 32.4| 4| 78.7| 66| 4.08| 2.200| 19.47| 1| 1| 4| 1|\n|Honda Civic | 30.4| 4| 75.7| 52| 4.93| 1.615| 18.52| 1| 1| 4| 2|\n|Toyota Corolla | 33.9| 4| 71.1| 65| 4.22| 1.835| 19.90| 1| 1| 4| 1|\n|Toyota Corona | 21.5| 4| 120.1| 97| 3.70| 2.465| 20.01| 1| 0| 3| 1|\n|Dodge Challenger | 15.5| 8| 318.0| 150| 2.76| 3.520| 16.87| 0| 0| 3| 2|\n|AMC Javelin | 15.2| 8| 304.0| 150| 3.15| 3.435| 17.30| 0| 0| 3| 2|\n|Camaro Z28 | 13.3| 8| 350.0| 245| 3.73| 3.840| 15.41| 0| 0| 3| 4|\n|Pontiac Firebird | 19.2| 8| 400.0| 175| 3.08| 3.845| 17.05| 0| 0| 3| 2|\n|Fiat X1-9 | 27.3| 4| 79.0| 66| 4.08| 1.935| 18.90| 1| 1| 4| 1|\n|Porsche 914-2 | 26.0| 4| 120.3| 91| 4.43| 2.140| 16.70| 0| 1| 5| 2|\n|Lotus Europa | 30.4| 4| 95.1| 113| 3.77| 1.513| 16.90| 1| 1| 5| 2|\n|Ford Pantera L | 15.8| 8| 351.0| 264| 4.22| 3.170| 14.50| 0| 1| 5| 4|\n|Ferrari Dino | 19.7| 6| 145.0| 175| 3.62| 2.770| 15.50| 0| 1| 5| 6|\n|Maserati Bora | 15.0| 8| 301.0| 335| 3.54| 3.570| 14.60| 0| 1| 5| 8|\n|Volvo 142E | 21.4| 4| 121.0| 109| 4.11| 2.780| 18.60| 1| 1| 4| 2|\n\n\n:::\n:::\n\n\n:::\n\n::: footer\nLearn more: [Tabsets](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/#tabsets)\n:::\n\n## Interactive Slides {.smaller transition=\"slide\"}\n\nInclude Jupyter widgets and htmlwidgets in your presentations\n\n\n\n::: {.cell}\n::: {.cell-output-display}\n\n```{=html}\n
\n\n```\n\n:::\n:::\n\n\n\n::: footer\nLearn more: [Jupyter widgets](https://{{< meta prerelease-subdomain >}}quarto.org/docs/interactive/widgets/jupyter.html), [htmlwidgets](https://{{< meta prerelease-subdomain >}}quarto.org/docs/interactive/widgets/htmlwidgets.html)\n:::\n\n## Interactive Slides {.smaller transition=\"slide\"}\n\nTurn presentations into applications with Observable and Shiny. Use component layout to position inputs and outputs.\n\n\n\n::: {.cell}\n\n:::\n\n```{ojs}\n//| panel: sidebar\nviewof talentWeight = Inputs.range([-2, 2], { value: 0.7, step: 0.01, label: \"talent weight\" })\nviewof looksWeight = Inputs.range([-2, 2], { value: 0.7, step: 0.01, label: \"looks weight\" })\nviewof minimum = Inputs.range([-2, 2], { value: 1, step: 0.01, label: \"min fame\" })\n```\n\n```{ojs}\n//| panel: fill\nimport { plotActors } from './actors.js';\nplotActors(actors, talentWeight, looksWeight, minimum)\n```\n\n\n\n::: footer\nLearn more: [Observable](https://{{< meta prerelease-subdomain >}}quarto.org/docs/interactive/ojs/), [Shiny](https://{{< meta prerelease-subdomain >}}quarto.org/docs/interactive/shiny/), [Component Layout](https://{{< meta prerelease-subdomain >}}quarto.org/docs/interactive/layout.html)\n:::\n\n## Preview Links\n\nNavigate to hyperlinks without disrupting the flow of your presentation.\n\nUse the `preview-links` option to open links in an iframe on top of your slides. Try clicking the link below for a demonstration:\n\n::: {style=\"text-align: center; margin-top: 1em\"}\n[Matplotlib: Visualization with Python](https://matplotlib.org/){preview-link=\"true\" style=\"text-align: center\"}\n:::\n\n::: footer\nLearn more: [Preview Links](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/presenting.html#preview-links)\n:::\n\n## Themes\n\n10 Built-in Themes (or [create your own](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/themes.html#creating-themes))\n\n::: {layout-ncol=\"2\"}\n![](images/moon.png)\n\n![](images/sky.png)\n:::\n\n::: footer\nLearn more: [Themes](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/themes.html)\n:::\n\n## Easy Navigation\n\n::: {style=\"margin-bottom: 0.9em;\"}\nQuickly jump to other parts of your presentation\n:::\n\n::: {layout=\"[1, 20]\"}\n![](images/presentation-menu.png){width=\"41\"}\n\nToggle the slide menu with the menu button (bottom left of slide) to go to other slides and access presentation tools.\n:::\n\nYou can also press {{< kbd m >}} to toggle the menu open and closed.\n\nYou can also press {{< kbd g >}} to toggle 'Jump To Slide' modal box to quickly go to one of your slide using its number or id.\n\n::: footer\nLearn more: [Navigation](/docs/presentations/revealjs/presenting.qmd#navigation-menu) / [Jump To Slide](/docs/presentations/revealjs/presenting.qmd#jump-to-slide)\n:::\n\n## Jump To Slide\n\n::: {style=\"margin-bottom: 0.9em;\"}\nQuickly jump to other parts of your presentation\n:::\n\n## Chalkboard {chalkboard-buttons=\"true\"}\n\n::: {style=\"margin-bottom: 0.9em;\"}\nFree form drawing and slide annotations\n:::\n\n::: {layout=\"[1, 20]\"}\n![](images/presentation-chalkboard.png){width=\"41\"}\n\nUse the chalkboard button at the bottom left of the slide to toggle the chalkboard.\n:::\n\n::: {layout=\"[1, 20]\"}\n![](images/presentation-notes-canvas.png){width=\"41\"}\n\nUse the notes canvas button at the bottom left of the slide to toggle drawing on top of the current slide.\n:::\n\nYou can also press {{< kbd b >}} to toggle the chalkboard or {{< kbd c >}} to toggle the notes canvas.\n\n::: footer\nLearn more: [Chalkboard](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/presenting.html#chalkboard)\n:::\n\n## Point of View\n\npress {{< kbd o >}} to toggle overview mode:\n\n![](images/overview-mode.png){.border}\n\nHold down the {{< kbd Alt linux=Ctrl >}} and click on any element to zoom towards it---try it now on this slide.\n\n::: footer\nLearn more: [Overview Mode](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/presenting.html#overview-mode), [Slide Zoom](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/presenting.html#slide-zoom)\n:::\n\n## Speaker View\n\npress {{< kbd s >}} (or use the tools in presentation menu ![](../images/navigation-menu-icon.png){style=\"padding-bottom: 1px; margin: 0\" width=\"0.5em\" height=\"0.5em\"}) to open speaker view\n\n![](images/speaker-view.png){fig-align=\"center\" style=\"border: 3px solid #dee2e6;\" width=\"780\"}\n\n::: footer\nLearn more: [Speaker View](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/presenting.html#speaker-view)\n:::\n\n## Scroll View {#scroll-view}\n\nPress {{< kbd r >}} (or use the tools in presentation menu ![](../images/navigation-menu-icon.png){style=\"padding-bottom: 1px; margin: 0\" width=\"0.5em\" height=\"0.5em\"}) to open scroll view\n\nTry it now on this slide --- You'll see a scroll bar on the right and you can scroll down the presentation using your mouse.\n\nScroll view behavior can be configured using `scroll-view` configuration. \n\n::: footer\nLearn more: [Scroll View](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/presenting.html#scroll-view)\n:::\n\n## Authoring Tools {.smaller}\n\nLive side-by-side preview for any notebook or text editor including Jupyter and VS Code\n\n::: columns\n::: {.column width=\"50%\"}\n![](images/jupyter-edit.png){.border .border-thick}\n:::\n\n::: {.column width=\"50%\"}\n![](images/jupyter-preview.png){.border .border-thick}\n:::\n:::\n\n::: footer\nLearn more: [Jupyter](https://{{< meta prerelease-subdomain >}}quarto.org/docs/tools/jupyter-lab.html), [VS Code](https://{{< meta prerelease-subdomain >}}quarto.org/docs/tools/vscode.html), [Text Editors](https://{{< meta prerelease-subdomain >}}quarto.org/docs/tools/text-editors.html)\n:::\n\n## Authoring Tools {.smaller}\n\nRStudio includes an integrated presentation preview pane\n\n![](images/rstudio.png){.border width=\"900\"}\n\n::: footer\nLearn more: [RStudio](https://{{< meta prerelease-subdomain >}}quarto.org/docs/tools/rstudio.html)\n:::\n\n## And More...\n\n- [Touch](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/advanced.html#touch-navigation) optimized (presentations look great on mobile, swipe to navigate slides)\n- [Footer & Logo](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/#footer-logo) (optionally specify custom footer per-slide or hide global footer)\n- [Auto-Slide](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/presenting.html#auto-slide) (step through slides automatically, without any user input)\n- [Multiplex](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/presenting.html#multiplex) (allows your audience to follow the slides of the presentation you are controlling on their own phone, tablet or laptop).\n\n::: footer\nLearn more: [Quarto Presentations](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/)\n:::\n", "supporting": [ "index_files" ], @@ -11,7 +11,7 @@ ], "includes": { "include-in-header": [ - "\n\n\n\n\n\n\n\n\n\n\n" + "\n\n\n\n\n\n\n\n\n\n\n" ], "include-after-body": [ "\n\n\n" diff --git a/_quarto-prerelease.yml b/_quarto-prerelease.yml index 9484b55b4c..c35504b531 100644 --- a/_quarto-prerelease.yml +++ b/_quarto-prerelease.yml @@ -1,3 +1,4 @@ prerelease-title: Pre-release prerelease-lower: pre-release -prerelease-mode: "" \ No newline at end of file +prerelease-mode: "" +prerelease-subdomain: prerelease. \ No newline at end of file diff --git a/_quarto-rc.yml b/_quarto-rc.yml index 3084566f05..0f2c2e4d62 100644 --- a/_quarto-rc.yml +++ b/_quarto-rc.yml @@ -1,3 +1,4 @@ prerelease-title: Release Candidate prerelease-lower: release candidate -prerelease-mode: Release Candidate \ No newline at end of file +prerelease-mode: Release Candidate +prerelease-subdomain: '' \ No newline at end of file diff --git a/docs/presentations/revealjs/advanced.qmd b/docs/presentations/revealjs/advanced.qmd index 0236ee69dc..c3178e0e33 100644 --- a/docs/presentations/revealjs/advanced.qmd +++ b/docs/presentations/revealjs/advanced.qmd @@ -573,7 +573,7 @@ If your content benefits from vertical orientation (e.g. you have optional drill ## Touch Navigation -You can swipe to navigate through a presentation on any touch-enabled device. Horizontal swipes change between horizontal slides, vertical swipes change between vertical slides. +You can swipe to navigate through a presentation on any touch-enabled device. If you wish to disable this you can set the `touch` option to `false`: diff --git a/docs/presentations/revealjs/demo/index.qmd b/docs/presentations/revealjs/demo/index.qmd index 4075cf765f..aeed12628c 100644 --- a/docs/presentations/revealjs/demo/index.qmd +++ b/docs/presentations/revealjs/demo/index.qmd @@ -9,7 +9,7 @@ format: preview-links: auto logo: images/quarto.png css: styles.css - footer: + footer: '[https://{{< meta prerelease-subdomain >}}quarto.org](https://{{< meta prerelease-subdomain >}}quarto.org)' resources: - demo.pdf --- @@ -22,7 +22,7 @@ This presentation will show you examples of what you can do with Quarto and [Rev - Including computations in slide output - Image, video, and iframe backgrounds - Fancy transitions and animations -- Printing to PDF +- Activating scroll view ...and much more @@ -43,7 +43,7 @@ function(input, output) { ``` ::: footer -Learn more: [Syntax Highlighting](https://quarto.org/docs/output-formats/html-code.html#highlighting) +Learn more: [Syntax Highlighting](https://{{< meta prerelease-subdomain >}}quarto.org/docs/output-formats/html-code.html#highlighting) ::: ## Code Animations {auto-animate="true"} @@ -67,7 +67,7 @@ function(input, output) { ``` ::: footer -Learn more: [Code Animations](https://quarto.org/docs/presentations/revealjs/advanced.html#code-animations) +Learn more: [Code Animations](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/advanced.html#code-animations) ::: ## Line Highlighting @@ -89,7 +89,7 @@ plt.show() ``` ::: footer -Learn more: [Line Highlighting](https://quarto.org/docs/presentations/revealjs/#line-highlighting) +Learn more: [Line Highlighting](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/#line-highlighting) ::: ## Executable Code @@ -105,7 +105,7 @@ ggplot(mtcars, aes(hp, mpg, color = am)) + ``` ::: footer -Learn more: [Executable Code](https://quarto.org/docs/presentations/revealjs/#executable-code) +Learn more: [Executable Code](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/#executable-code) ::: ## LaTeX Equations @@ -148,7 +148,7 @@ a_{21}& =b_{21}& ::: ::: footer -Learn more: [LaTeX Equations](https://quarto.org/docs/authoring/markdown-basics.html#equations) +Learn more: [LaTeX Equations](https://{{< meta prerelease-subdomain >}}quarto.org/docs/authoring/markdown-basics.html#equations) ::: ## Column Layout {.smaller} @@ -173,7 +173,7 @@ knitr::kable(head(mtcars)[,c("mpg", "cyl", "disp", "hp", "wt")]) ::: ::: footer -Learn more: [Multiple Columns](https://quarto.org/docs/presentations/revealjs/#multiple-columns) +Learn more: [Multiple Columns](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/#multiple-columns) ::: ## Incremental Lists @@ -191,7 +191,7 @@ Lists can optionally be displayed incrementally:
Insert pauses to make other types of content display incrementally. ::: footer -Learn more: [Incremental Lists](https://quarto.org/docs/presentations/revealjs/#incremental-lists) +Learn more: [Incremental Lists](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/#incremental-lists) ::: ## Fragments @@ -227,7 +227,7 @@ Highlight red ::: ::: footer -Learn more: [Fragments](https://quarto.org/docs/presentations/revealjs/advanced.html#fragments) +Learn more: [Fragments](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/advanced.html#fragments) ::: ## Slide Backgrounds {background="#43464B"} @@ -237,7 +237,7 @@ Set the `background` attribute on a slide to change the background color (all CS Different background transitions are available via the `background-transition` option. ::: footer -Learn more: [Slide Backgrounds](https://quarto.org/docs/presentations/revealjs/#color-backgrounds) +Learn more: [Slide Backgrounds](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/#color-backgrounds) ::: ## Media Backgrounds {background="#43464B" background-image="images/milky-way.jpeg"} @@ -251,7 +251,7 @@ You can also use the following as a slide background: - An iframe: `background-iframe` ::: footer -Learn more: [Media Backgrounds](https://quarto.org/docs/presentations/revealjs/#image-backgrounds) +Learn more: [Media Backgrounds](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/#image-backgrounds) ::: ## Absolute Position @@ -265,7 +265,7 @@ Position images or other elements at precise locations ![](mini/images/kitten-300-200.jpeg){.absolute .fragment bottom="110" right="130" width="300"} ::: footer -Learn more: [Absolute Position](https://quarto.org/docs/presentations/revealjs/advanced.html#absolute-position) +Learn more: [Absolute Position](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/advanced.html#absolute-position) ::: ## Auto-Animate {auto-animate="true" auto-animate-easing="ease-in-out"} @@ -284,7 +284,7 @@ Automatically animate matching elements across slides with Auto-Animate. ::: ::: footer -Learn more: [Auto-Animate](https://quarto.org/docs/presentations/revealjs/advanced.html#auto-animate) +Learn more: [Auto-Animate](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/advanced.html#auto-animate) ::: ## Auto-Animate {auto-animate="true" auto-animate-easing="ease-in-out"} @@ -303,7 +303,7 @@ Automatically animate matching elements across slides with Auto-Animate. ::: ::: footer -Learn more: [Auto-Animate](https://quarto.org/docs/presentations/revealjs/advanced.html#auto-animate) +Learn more: [Auto-Animate](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/advanced.html#auto-animate) ::: ## Slide Transitions {.smaller} @@ -320,7 +320,7 @@ The next few slides will transition using the `slide` transition | `zoom` | Scale the incoming slide so it grows in from the center of the screen. | ::: footer -Learn more: [Slide Transitions](https://quarto.org/docs/presentations/revealjs/advanced.html#slide-transitions) +Learn more: [Slide Transitions](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/advanced.html#slide-transitions) ::: ## Tabsets {.smaller .scrollable transition="slide"} @@ -343,7 +343,7 @@ knitr::kable(mtcars) ::: ::: footer -Learn more: [Tabsets](https://quarto.org/docs/presentations/revealjs/#tabsets) +Learn more: [Tabsets](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/#tabsets) ::: ## Interactive Slides {.smaller transition="slide"} @@ -360,7 +360,7 @@ leaflet() %>% ``` ::: footer -Learn more: [Jupyter widgets](https://quarto.org/docs/interactive/widgets/jupyter.html), [htmlwidgets](https://quarto.org/docs/interactive/widgets/htmlwidgets.html) +Learn more: [Jupyter widgets](https://{{< meta prerelease-subdomain >}}quarto.org/docs/interactive/widgets/jupyter.html), [htmlwidgets](https://{{< meta prerelease-subdomain >}}quarto.org/docs/interactive/widgets/htmlwidgets.html) ::: ## Interactive Slides {.smaller transition="slide"} @@ -388,7 +388,7 @@ plotActors(actors, talentWeight, looksWeight, minimum) ``` ::: footer -Learn more: [Observable](https://quarto.org/docs/interactive/ojs/), [Shiny](https://quarto.org/docs/interactive/shiny/), [Component Layout](https://quarto.org/docs/interactive/layout.html) +Learn more: [Observable](https://{{< meta prerelease-subdomain >}}quarto.org/docs/interactive/ojs/), [Shiny](https://{{< meta prerelease-subdomain >}}quarto.org/docs/interactive/shiny/), [Component Layout](https://{{< meta prerelease-subdomain >}}quarto.org/docs/interactive/layout.html) ::: ## Preview Links @@ -402,12 +402,12 @@ Use the `preview-links` option to open links in an iframe on top of your slides. ::: ::: footer -Learn more: [Preview Links](https://quarto.org/docs/presentations/revealjs/presenting.html#preview-links) +Learn more: [Preview Links](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/presenting.html#preview-links) ::: ## Themes -10 Built-in Themes (or [create your own](https://quarto.org/docs/presentations/revealjs/themes.html#creating-themes)) +10 Built-in Themes (or [create your own](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/themes.html#creating-themes)) ::: {layout-ncol="2"} ![](images/moon.png) @@ -416,7 +416,7 @@ Learn more: [Preview Links](https://quarto.org/docs/presentations/revealjs/prese ::: ::: footer -Learn more: [Themes](https://quarto.org/docs/presentations/revealjs/themes.html) +Learn more: [Themes](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/themes.html) ::: ## Easy Navigation @@ -431,9 +431,9 @@ Quickly jump to other parts of your presentation Toggle the slide menu with the menu button (bottom left of slide) to go to other slides and access presentation tools. ::: -You can also press `m` to toggle the menu open and closed. +You can also press {{< kbd m >}} to toggle the menu open and closed. -You can also press `g` to toggle 'Jump To Slide' modal box to quickly go to one of your slide using its number or id. +You can also press {{< kbd g >}} to toggle 'Jump To Slide' modal box to quickly go to one of your slide using its number or id. ::: footer Learn more: [Navigation](/docs/presentations/revealjs/presenting.qmd#navigation-menu) / [Jump To Slide](/docs/presentations/revealjs/presenting.qmd#jump-to-slide) @@ -463,32 +463,44 @@ Use the chalkboard button at the bottom left of the slide to toggle the chalkboa Use the notes canvas button at the bottom left of the slide to toggle drawing on top of the current slide. ::: -You can also press `b` to toggle the chalkboard or `c` to toggle the notes canvas. +You can also press {{< kbd b >}} to toggle the chalkboard or {{< kbd c >}} to toggle the notes canvas. ::: footer -Learn more: [Chalkboard](https://quarto.org/docs/presentations/revealjs/presenting.html#chalkboard) +Learn more: [Chalkboard](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/presenting.html#chalkboard) ::: ## Point of View -Press `o` to toggle overview mode: +press {{< kbd o >}} to toggle overview mode: ![](images/overview-mode.png){.border} -Hold down the `Alt` key (or `Ctrl` in Linux) and click on any element to zoom towards it---try it now on this slide. +Hold down the {{< kbd Alt linux=Ctrl >}} and click on any element to zoom towards it---try it now on this slide. ::: footer -Learn more: [Overview Mode](https://quarto.org/docs/presentations/revealjs/presenting.html#overview-mode), [Slide Zoom](https://quarto.org/docs/presentations/revealjs/presenting.html#slide-zoom) +Learn more: [Overview Mode](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/presenting.html#overview-mode), [Slide Zoom](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/presenting.html#slide-zoom) ::: ## Speaker View -Press `s` (or use the presentation menu) to open speaker view +press {{< kbd s >}} (or use the tools in presentation menu ![](../images/navigation-menu-icon.png){style="padding-bottom: 1px; margin: 0" width="0.5em" height="0.5em"}) to open speaker view ![](images/speaker-view.png){fig-align="center" style="border: 3px solid #dee2e6;" width="780"} ::: footer -Learn more: [Speaker View](https://quarto.org/docs/presentations/revealjs/presenting.html#speaker-view) +Learn more: [Speaker View](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/presenting.html#speaker-view) +::: + +## Scroll View {#scroll-view} + +Press {{< kbd r >}} (or use the tools in presentation menu ![](../images/navigation-menu-icon.png){style="padding-bottom: 1px; margin: 0" width="0.5em" height="0.5em"}) to open scroll view + +Try it now on this slide --- You'll see a scroll bar on the right and you can scroll down the presentation using your mouse. + +Scroll view behavior can be configured using `scroll-view` configuration. + +::: footer +Learn more: [Scroll View](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/presenting.html#scroll-view) ::: ## Authoring Tools {.smaller} @@ -506,7 +518,7 @@ Live side-by-side preview for any notebook or text editor including Jupyter and ::: ::: footer -Learn more: [Jupyter](https://quarto.org/docs/tools/jupyter-lab.html), [VS Code](https://quarto.org/docs/tools/vscode.html), [Text Editors](https://quarto.org/docs/tools/text-editors.html) +Learn more: [Jupyter](https://{{< meta prerelease-subdomain >}}quarto.org/docs/tools/jupyter-lab.html), [VS Code](https://{{< meta prerelease-subdomain >}}quarto.org/docs/tools/vscode.html), [Text Editors](https://{{< meta prerelease-subdomain >}}quarto.org/docs/tools/text-editors.html) ::: ## Authoring Tools {.smaller} @@ -516,16 +528,16 @@ RStudio includes an integrated presentation preview pane ![](images/rstudio.png){.border width="900"} ::: footer -Learn more: [RStudio](https://quarto.org/docs/tools/rstudio.html) +Learn more: [RStudio](https://{{< meta prerelease-subdomain >}}quarto.org/docs/tools/rstudio.html) ::: ## And More... -- [Touch](https://quarto.org/docs/presentations/revealjs/advanced.html#touch-navigation) optimized (presentations look great on mobile, swipe to navigate slides) -- [Footer & Logo](https://quarto.org/docs/presentations/revealjs/#footer-logo) (optionally specify custom footer per-slide or hide global footer) -- [Auto-Slide](https://quarto.org/docs/presentations/revealjs/presenting.html#auto-slide) (step through slides automatically, without any user input) -- [Multiplex](https://quarto.org/docs/presentations/revealjs/presenting.html#multiplex) (allows your audience to follow the slides of the presentation you are controlling on their own phone, tablet or laptop). +- [Touch](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/advanced.html#touch-navigation) optimized (presentations look great on mobile, swipe to navigate slides) +- [Footer & Logo](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/#footer-logo) (optionally specify custom footer per-slide or hide global footer) +- [Auto-Slide](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/presenting.html#auto-slide) (step through slides automatically, without any user input) +- [Multiplex](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/presenting.html#multiplex) (allows your audience to follow the slides of the presentation you are controlling on their own phone, tablet or laptop). ::: footer -Learn more: [Quarto Presentations](https://quarto.org/docs/presentations/revealjs/) +Learn more: [Quarto Presentations](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/) ::: diff --git a/docs/presentations/revealjs/presenting.qmd b/docs/presentations/revealjs/presenting.qmd index c9e9422c88..e4a251ece7 100644 --- a/docs/presentations/revealjs/presenting.qmd +++ b/docs/presentations/revealjs/presenting.qmd @@ -6,15 +6,20 @@ title: "Presenting Slides" This article covers the mechanics of presenting slides with Reveal. Basic navigation is done using the following keyboard shortcuts: ++----------------------------+--------------------------------------------+ | Action | Keys | -|----------------------------|--------------------------------------------| ++============================+============================================+ | Next slide | → SPACE N | ++----------------------------+--------------------------------------------+ | Previous slide | ← P | ++----------------------------+--------------------------------------------+ | Navigate without fragments | Alt → Alt ← | ++----------------------------+--------------------------------------------+ | Jump to first/last slide | Shift → Shift ← | ++----------------------------+--------------------------------------------+ ::: {.callout-tip appearance="simple"} -You will often want to enter fullscreen mode when presenting. You can do this by pressing the F key. +You will often want to enter fullscreen mode when presenting. You can do this by pressing the {{< kbd F >}} key. ::: In addition to basic keyboard navigation, Reveal supports several more advanced capabilities, including: @@ -38,18 +43,22 @@ Quarto includes a built in version of the [reveal.js-menu](https://github.com/de ::: ::: {.callout-tip appearance="simple"} -You can also open the navigation menu by pressing the M key. +You can also open the navigation menu by pressing the {{< kbd M >}} key. ::: The navigation menu also includes a **Tools** pane that provides access to the various other navigation tools including Fullscreen, Speaker View, Overview Mode, and Print to PDF. Use the following options to customize the appearance and behavior of the menu: ++-----------+--------------------------------------------------------------------------------------------------------------------+ | Option | Description | -|-----------|--------------------------------------------------------------------------------------------------------------------| ++===========+====================================================================================================================+ | `side` | Side of the presentation where the menu will be shown. `left` or `right` (defaults to `left`). | ++-----------+--------------------------------------------------------------------------------------------------------------------+ | `width` | Width of the menu (`normal`, `wide`, `third`, `half`, `full`, or any valid css length value). Defaults to `normal` | ++-----------+--------------------------------------------------------------------------------------------------------------------+ | `numbers` | Add slide numbers to menu items. | ++-----------+--------------------------------------------------------------------------------------------------------------------+ For example: @@ -77,21 +86,19 @@ Note that you can still open the menu using the {{< kbd M >}} key even if the bu You can skip ahead to a specific slide using reveal.js' jump-to-slide shortcut. Here's how it works: -- Press {{< kbd G >}} to activate -- Type a slide number or an id -- Press Enter to confirm +- Press {{< kbd G >}} to activate +- Type a slide number or an id +- Press Enter to confirm -You can either enter -- a numeric value to navigate to the desired slide number -- a string, which will try to locate a slide with a matching id and navigate to it. +You can either enter - a numeric value to navigate to the desired slide number - a string, which will try to locate a slide with a matching id and navigate to it. This feature can be opt-out by setting `jump-to-slide: false` option: -````yaml +``` yaml format: revealjs: jump-to-slide: false -```` +``` ## Overview Mode @@ -100,17 +107,94 @@ Overview mode provides an alternate view that shows you a thumbnail for each sli ![](images/overview-mode.png){.border fig-alt="Screenshot of slides shown in overview mode, showing a series of thumbnails for the slides in the presentation."} ::: {.callout-tip appearance="simple"} -You can enable Overview Mode by pressing the O key. +You can enable Overview Mode by pressing the {{< kbd O >}} key. ::: +## Scroll View {#scroll-view} + +{{< include /docs/prerelease/1.6/_pre-release-feature.qmd >}} + +Reveal presentations can be presented in [Scroll View](https://revealjs.com/scroll-view/) with vertically scrolled navigation instead of Slides. This is a new view mode introduced in Revealjs 5. It is always available in presentations as an alternative view mode (like [Print view](#print-to-pdf)), and it will be used as the default view on small screens (e.g. viewing a presentation on a mobile). + +Our demo presentation can be seen [in scroll view mode](https://{{< meta prerelease-subdomain >}}quarto.org/docs/presentations/revealjs/demo/?view=scroll) and below + +
+ +```{=html} + +``` + +
+ +### Entering Scroll View {#scroll-view-toggle} + +To enter Scroll View , do one the following: + +- Toggle into Scroll View using the {{< kbd R >}} key + +- Toggle into Scroll View using the [Navigation Menu](#navigation-menu) + +- Toggle into Scroll View by adding `?view=scroll` to the url, e.g. `https://quarto.org/docs/presentations/revealjs/demo/?view=scroll` + +You can easily toggle out of Scroll View by the same action. + +### Default View Mode + +Scroll View can be set as the default mode for the presentation using the `scroll-view` option: + +``` yaml +format: + revealjs: + scroll-view: true +``` + +### Scroll View Options + +Scroll View can be configured using the following options under `scroll-view`: + ++--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| Option | Description | ++====================+===========================================================================================================================================================================================================================================================+ +| `progress` | `auto`: Show the scrollbar while scrolling and hide while idle (default). Set to `true` to always show, `false` to always hide. | ++--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| `snap` | `mandatory`: When scrolling, it will automatically snap to the closest slide (default). Only snap when close to the top of a slide using `proximity`. Disable snapping altogether by setting to `false`. | ++--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| `layout` | `full`: Each slide will be sized to be as tall as the viewport (default). If you prefer a more dense layout with multiple slides visible in parallel, set to `compact`. | ++--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| `activation-width` | Control scroll view activation width. The scroll view is automatically activated when the viewport reaches mobile widths. Set to `0` to disable automatic scroll view or to another value in pixels to automatically trigger on bigger or smaller widths. | ++--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| `activate` | Activate scroll view by default for the presentation (default `false`). Otherwise, entering scroll view require a manual trigger (See [Entering Scroll View](#scroll-view-toggle)). `scroll-view: true` is equivalent to | +| | | +| | ``` yaml | +| | scroll-view: | +| | activate: true | +| | ``` | ++--------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ + +For example, the following specifies that we want a compact layout, proximity snap mode, to always show the progress scrollbar, and to never automatically activate for small screens: + +``` yaml +--- +title: "Presentation" +format: + revealjs: + scroll-view: + layout: compact + snap: proximity + progress: true + activation-width: 0 +--- +``` + ## Slide Zoom -Hold down the Alt key (or Ctrl in Linux) and click on any element to zoom towards it. Try zooming in on one of these images: +Hold down the {{< kbd Alt linux=Ctrl >}} key and click on any element to zoom towards it. Try zooming in on one of these images: ```{=html} ``` -Alt or Ctrl click again to zoom back out. + +{{< kbd Alt >}} or {{< kbd Ctrl >}} click again to zoom back out. ## Speaker View @@ -119,7 +203,7 @@ The speaker view shows the current slide along with the upcoming slide, a timer, ![](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."} ::: {.callout-tip appearance="simple"} -You can enable Speaker View by pressing the S key. +You can enable Speaker View by pressing the {{< kbd S >}} key. ::: You can add speaker notes to a slide using a div with class `.notes`. For example: @@ -167,7 +251,7 @@ The `show-slide-number` option supports the following values: | `print` | Only show slide numbers when printing to PDF | | `speaker` | Only show slide numbers in the speaker view | -## Print to PDF +## Print to PDF {#print-to-pdf} Reveal presentations can be exported to PDF via a special print stylesheet. @@ -177,8 +261,8 @@ Note: This feature has been confirmed to work in [Google Chrome](https://google. To Print to PDF, do the following: -1. Toggle into Print View using the {{< kbd E >}} key (or using the [Navigation Menu]) -2. Open the in-browser print dialog {{< kbd Ctrl+P win=Ctrl+P mac=Command+P >}}. +1. Toggle into Print View using the {{< kbd E >}} key (or using the [Navigation Menu](#navigation-menu)) +2. Open the in-browser print dialog {{< kbd Ctrl+P mac=Command+P >}}. 3. Change the **Destination** setting to **Save as PDF**. 4. Change the **Layout** to **Landscape**. 5. Change the **Margins** to **None**. @@ -195,12 +279,17 @@ Here's what the Chrome print dialog would look like with these settings enabled: There are a number of options that affected printed output that you may want to configure prior to printing: ++---------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | Option | Description | -|---------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| ++===========================+======================================================================================================================================================================================+ | `show-notes` | Include speaker notes (`true`, `false`, or `separate-page)` | ++---------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | `slide-number` | Include slide numbers (`true` or `false`) | ++---------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | `pdf-max-pages-per-slide` | Slides that are too tall to fit within a single page will expand onto multiple pages. You can limit how many pages a slide may expand to using the `pdf-max-pages-per-slide` option. | ++---------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | `pdf-separate-fragments` | Slides with multiple fragments are printed on a single page by default. To create a page for each fragment set this option to `true`. | ++---------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ For example, the following specifies that we want to print speaker notes on their own page and include slide numbers: @@ -224,11 +313,15 @@ When you click on a hyperlink with `preview-links: true`, the link will be navig Available values for `preview-link` include: -| Value | Description | -|---------|-----------------------------------------------------------------------------------------| -| `auto` | Preview links when presenting in full-screen mode (otherwise navigate to them normally) | -| `true` | Always preview links | -| `false` | Never preview links (the default) | ++------------+-----------------------------------------------------------------------------------------+ +| Value | Description | ++============+=========================================================================================+ +| `auto` | Preview links when presenting in full-screen mode (otherwise navigate to them normally) | ++------------+-----------------------------------------------------------------------------------------+ +| `true` | Always preview links | ++------------+-----------------------------------------------------------------------------------------+ +| `false` | Never preview links (the default) | ++------------+-----------------------------------------------------------------------------------------+ For example, here we set `preview-links` to `auto`: @@ -281,7 +374,7 @@ format: --- ``` -A play/pause control element will automatically appear for auto-sliding decks. Sliding is automatically paused if the user starts interacting with the deck. It's also possible to pause or resume sliding by pressing A on the keyboard. +A play/pause control element will automatically appear for auto-sliding decks. Sliding is automatically paused if the user starts interacting with the deck. It's also possible to pause or resume sliding by pressing {{< kbd A >}} on the keyboard. You can disable the auto-slide controls and prevent sliding from being paused by specifying `auto-slide-stoppable: false`. @@ -297,7 +390,7 @@ It's also possible to override the slide duration for individual slides and frag There are two main ways to publish Reveal presentations: -1. As a PDF file---see [Print to PDF] above for details on how to do this. +1. As a PDF file---see [Print to PDF](#print-to-pdf) above for details on how to do this. 2. As an HTML file. For HTML, it's often most convenient to distribute the presentation as a single self contained file. To do this, specify the `embed-resources` option: @@ -310,8 +403,8 @@ There are two main ways to publish Reveal presentations: --- ``` - All of the dependent images, CSS styles, and other assets will be contained within the HTML file created by Quarto. - + All of the dependent images, CSS styles, and other assets will be contained within the HTML file created by Quarto. + ::: {.callout-note appearance="simple"} Note that specifying `embed-resources` can slow down rendering by a couple of seconds, so you may want to enable `embed-resources` only when you are ready to publish. Also note that Reveal plugin [Chalkboard] is not compatible with `embed-resources` --- when [Chalkboard] plugin is enabled, specifying `embed-resources: true` will result an error. ::: @@ -322,12 +415,17 @@ See the documentation on [Publishing HTML](/docs/publishing/index.qmd) for detai There are several navigational cues provided as part of Reveal presentations and corresponding options that control them: ++-------------+------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | Option | Description | -|-------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| ++=============+==============================================================================================================================================================================+ | `controls` | Show arrow controls for navigating through slides (defaults to `auto`, which will show controls when vertical slides are present or when the deck is embedded in an iframe). | ++-------------+------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | `progress` | Show a progress bar at the bottom (defaults to `true`). | ++-------------+------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | `history` | Push slide changes to the browser history. Defaults to `true`, which means that the browser Forward/Back buttons can be used for slide navigation. | -| `hash-type` | Type of URL hash to use for slides. Defaults to `title` which is derived from the slide title. You can also specify `number`. | ++-------------+------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| `hash-type` | Type of URL hash to use for slides. Defaults to `title` which is derived from the slide title. You can also specify `number`. | ++-------------+------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ For example, the following configuration hides the progress bar and specifies that we want to use browser history: @@ -366,21 +464,21 @@ Here are what the notes canvas and chalkboard look like when activated: ![](images/chalkboard.png){.border fig-alt="Screenshot of chalkboard canvas with color selector on the left, and paintbrush tool at the bottom. The background is dark, and the equation 'y = mx + b' has been drawn in white with a chalky texture."} ::: -To toggle the notes canvas on and off use the ![](images/canvas-icon.png){width="19" height="17"} button or the C key. +To toggle the notes canvas on and off use the ![](images/canvas-icon.png){width="19" height="17"} button or the {{< kbd C >}} key. -To toggle the chalkboard on and off use the ![](images/chalkboard-icon.png){width="19" height="20"} button or the B key. +To toggle the chalkboard on and off use the ![](images/chalkboard-icon.png){width="19" height="20"} button or the {{< kbd B >}} key. Here are all of the keyboard shortcuts associated with the notes canvas and chalkboard: -| Action | Key | -|-------------------------|----------------------| -| Toggle notes canvas | C | -| Toggle chalkboard | B | -| Reset all drawings | BACKSPACE | -| Clear drawings on slide | DEL | -| Cycle colors forward | X | -| Cycle colors backward | Y | -| Download drawings | D | +| Action | Key | +|-------------------------|-----------------------| +| Toggle notes canvas | {{< kbd C >}} | +| Toggle chalkboard | {{< kbd B >}} | +| Reset all drawings | {{< kbd BACKSPACE >}} | +| Clear drawings on slide | {{< kbd DEL >}} | +| Cycle colors forward | {{< kbd X >}} | +| Cycle colors backward | {{< kbd Y >}} | +| Download drawings | {{< kbd D >}} | The following mouse and touch gestures can be used for interacting with drawings: @@ -400,7 +498,7 @@ The following mouse and touch gestures can be used for interacting with drawings ### Restoring Drawings -The D key downloads any active drawings into a JSON file. You can then restore these drawings when showing your presentation using the `src` option. For example: +The {{< kbd D >}} key downloads any active drawings into a JSON file. You can then restore these drawings when showing your presentation using the `src` option. For example: ``` yaml --- @@ -416,16 +514,25 @@ format: The following options are available to customize the behavior and appearance of the chalkboard: -| Option | Description | -|---------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------| -| `theme` | Can be set to either `chalkboard` (default) or `whiteboard`. | -| `boardmarker-width` | The drawing width of the boardmarker; larger values draw thicker line. Defaults to `3`. | -| `chalk-width` | The drawing width of the chalk; larger values draw thicker lines. Defaults to `7`. | -| `chalk-effect` | A float in the range `[0.0, 1.0]`, the intensity of the chalk effect on the chalk board. Full effect (default) `1.0`, no effect `0.0`. | -| `src` | Optional file name for pre-recorded drawings (download drawings using the D key). | -| `read-only` | Configuration option to prevent changes to existing drawings. `true`: no changes can be made, `false` (default): changes can be made. | -| `buttons` | Add chalkboard buttons at the bottom of the slide (defaults to `true`). | -| `transition` | Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed. | ++---------------------+-------------------------------------------------------------------------------------------------------------------------------------------------+ +| Option | Description | ++=====================+=================================================================================================================================================+ +| `theme` | Can be set to either `chalkboard` (default) or `whiteboard`. | ++---------------------+-------------------------------------------------------------------------------------------------------------------------------------------------+ +| `boardmarker-width` | The drawing width of the boardmarker; larger values draw thicker line. Defaults to `3`. | ++---------------------+-------------------------------------------------------------------------------------------------------------------------------------------------+ +| `chalk-width` | The drawing width of the chalk; larger values draw thicker lines. Defaults to `7`. | ++---------------------+-------------------------------------------------------------------------------------------------------------------------------------------------+ +| `chalk-effect` | A float in the range `[0.0, 1.0]`, the intensity of the chalk effect on the chalk board. Full effect (default) `1.0`, no effect `0.0`. | ++---------------------+-------------------------------------------------------------------------------------------------------------------------------------------------+ +| `src` | Optional file name for pre-recorded drawings (download drawings using the {{< kbd D >}} key). | ++---------------------+-------------------------------------------------------------------------------------------------------------------------------------------------+ +| `read-only` | Configuration option to prevent changes to existing drawings. `true`: no changes can be made, `false` (default): changes can be made. | ++---------------------+-------------------------------------------------------------------------------------------------------------------------------------------------+ +| `buttons` | Add chalkboard buttons at the bottom of the slide (defaults to `true`). | ++---------------------+-------------------------------------------------------------------------------------------------------------------------------------------------+ +| `transition` | Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed. | ++---------------------+-------------------------------------------------------------------------------------------------------------------------------------------------+ For example, the following configuration specifies that we want to use the `whiteboard` theme with a (thicker) boardmarker width, and that we want to hide the chalkboard buttons at the bottom of each slide: @@ -466,10 +573,13 @@ format: Rendering the presentation will result in two HTML files being created by Quarto: ++-----------------------------+------------------------------------------------------------------------------------------------------------------------------------+ | File | Description | -|-----------------------------|------------------------------------------------------------------------------------------------------------------------------------| ++=============================+====================================================================================================================================+ | `presentation.html` | This is the file you should publish online and that your audience should view. | ++-----------------------------+------------------------------------------------------------------------------------------------------------------------------------+ | `presentation-speaker.html` | This is the file that you should present from . This file can remain on your computer and does not need to be published elsewhere. | ++-----------------------------+------------------------------------------------------------------------------------------------------------------------------------+ The two versions of the presentation will be synchronized such that when the speaker version switches slides the viewers also all switch to the same slide. @@ -516,4 +626,4 @@ See these articles lo learn more about using Reveal: - [Reveal Basics](index.qmd) covers the basic mechanics of creating presentations. - [Advanced Reveal](advanced.qmd) delves into transitions, animations, advanced layout and positioning, and other options available for customizing presentations. -- [Reveal Themes](themes.qmd) talks about using and customizing existing themes as well as creating brand new themes. +- [Reveal Themes](themes.qmd) talks about using and customizing existing themes as well as creating brand new themes. \ No newline at end of file