From 04e31466711cda598bb5af0cfae4031d5729b1fa Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Mon, 7 Oct 2024 17:11:06 +0200 Subject: [PATCH] add documentation about jump to slide feature --- .../demo/index/execute-results/html.json | 6 ++--- docs/presentations/revealjs/demo/index.qmd | 10 ++++++- docs/presentations/revealjs/presenting.qmd | 26 +++++++++++++++++-- 3 files changed, 36 insertions(+), 6 deletions(-) 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 626b22d36a..cbb0621fa2 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": "8f89deb925c50e85d075c39e27ec3e9f", + "hash": "a25e51fa991f3bd0af87c0521d12e70c", "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\n::: footer\nLearn more: [Navigation](https://quarto.org/docs/presentations/revealjs/presenting.html#navigation-menu)\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: \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", "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/docs/presentations/revealjs/demo/index.qmd b/docs/presentations/revealjs/demo/index.qmd index 8eb0f45814..4075cf765f 100644 --- a/docs/presentations/revealjs/demo/index.qmd +++ b/docs/presentations/revealjs/demo/index.qmd @@ -433,8 +433,16 @@ Toggle the slide menu with the menu button (bottom left of slide) to go to other You can also press `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. + ::: footer -Learn more: [Navigation](https://quarto.org/docs/presentations/revealjs/presenting.html#navigation-menu) +Learn more: [Navigation](/docs/presentations/revealjs/presenting.qmd#navigation-menu) / [Jump To Slide](/docs/presentations/revealjs/presenting.qmd#jump-to-slide) +::: + +## Jump To Slide + +::: {style="margin-bottom: 0.9em;"} +Quickly jump to other parts of your presentation ::: ## Chalkboard {chalkboard-buttons="true"} diff --git a/docs/presentations/revealjs/presenting.qmd b/docs/presentations/revealjs/presenting.qmd index 32164c3794..c9e9422c88 100644 --- a/docs/presentations/revealjs/presenting.qmd +++ b/docs/presentations/revealjs/presenting.qmd @@ -27,7 +27,7 @@ In addition to basic keyboard navigation, Reveal supports several more advanced These capabilities are described below. -## Navigation Menu +## Navigation Menu {#navigation-menu} Quarto includes a built in version of the [reveal.js-menu](https://github.com/denehyg/reveal.js-menu) plugin. You can access the navigation menu using the button ![](images/navigation-menu-icon.png){style="padding-bottom: 1px;" width="15" height="13"} located in the bottom left corner of the presentation. Clicking the button opens a slide navigation menu that enables you to easily jump to any slide: @@ -69,7 +69,29 @@ format: menu: false ``` -Note that you can still open the menu using the M key even if the button is hidden. +Note that you can still open the menu using the {{< kbd M >}} key even if the button is hidden. + +## Jump To Slide {#jump-to-slide} + +{{< include /docs/prerelease/1.6/_pre-release-feature.qmd >}} + +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 + +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 +format: + revealjs: + jump-to-slide: false +```` ## Overview Mode