{"id":15975929,"url":"https://github.com/gadenbuie/xaringanextra","last_synced_at":"2025-04-12T17:44:35.929Z","repository":{"id":37898780,"uuid":"220368896","full_name":"gadenbuie/xaringanExtra","owner":"gadenbuie","description":":ferris_wheel: A playground of enhancements and extensions for xaringan slides.","archived":false,"fork":false,"pushed_at":"2024-05-20T13:54:19.000Z","size":9991,"stargazers_count":450,"open_issues_count":32,"forks_count":37,"subscribers_count":12,"default_branch":"main","last_synced_at":"2025-04-03T19:16:02.650Z","etag":null,"topics":["remarkjs","rmarkdown","slides","tabs","xaringan","xaringan-slides"],"latest_commit_sha":null,"homepage":"https://pkg.garrickadenbuie.com/xaringanExtra","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gadenbuie.png","metadata":{"files":{"readme":"README.Rmd","changelog":"NEWS.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-11-08T02:17:28.000Z","updated_at":"2025-01-26T02:05:05.000Z","dependencies_parsed_at":"2024-12-15T19:05:53.937Z","dependency_job_id":"f02937a0-fbc5-4455-8e33-9dee26e083b6","html_url":"https://github.com/gadenbuie/xaringanExtra","commit_stats":{"total_commits":266,"total_committers":6,"mean_commits":"44.333333333333336","dds":0.4586466165413534,"last_synced_commit":"0a4271a6a934e1e2878535342a21283549e0ac22"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gadenbuie%2FxaringanExtra","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gadenbuie%2FxaringanExtra/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gadenbuie%2FxaringanExtra/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gadenbuie%2FxaringanExtra/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gadenbuie","download_url":"https://codeload.github.com/gadenbuie/xaringanExtra/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248609455,"owners_count":21132914,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["remarkjs","rmarkdown","slides","tabs","xaringan","xaringan-slides"],"created_at":"2024-10-07T22:06:25.952Z","updated_at":"2025-04-12T17:44:35.896Z","avatar_url":"https://github.com/gadenbuie.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"---\ntitle: xaringanExtra\noutput: github_document\nalways_allow_html: true\n---\n\n\u003c!-- badges: start --\u003e\n[![CRAN status](https://www.r-pkg.org/badges/version/xaringanExtra)](https://CRAN.R-project.org/package=xaringanExtra)\n[![xaringanExtra status badge](https://gadenbuie.r-universe.dev/badges/xaringanExtra)](https://gadenbuie.r-universe.dev)\n[![R-CMD-check](https://github.com/gadenbuie/xaringanExtra/actions/workflows/R-CMD-check.yaml/badge.svg)](https://github.com/gadenbuie/xaringanExtra/actions/workflows/R-CMD-check.yaml)\n\u003c!-- badges: end --\u003e\n\n```{r include=FALSE}\nINCLUDE_CHILD_HEADER \u003c- FALSE\nIN_README \u003c- TRUE\n```\n\n\u003c!-- Links --\u003e\n[xaringan]: https://slides.yihui.org/xaringan\n[remarkjs]: https://remarkjs.com/\n[animate.css]: https://daneden.github.io/animate.css/\n[text-poster]: https://github.com/IMAGINARY/text-poster#readme\n\n`xaringanExtra` is a playground of enhancements and extensions for [xaringan] slides.\n\n- Add an overview of your presentation with [tile view](#-tile-view)\n- Make your slides [editable](#-editable)\n- Share your slides in style with [share again](#-share-again)\n- Broadcast your slides in real time to viewers with [broadcast](#-broadcast)\n- Scribble on your slides during your presentation with [scribble](#-scribble)\n- Announce slide changes with a [subtle tone](#-slide-tone)\n- Animate slide transitions with [animate.css](#-animatecss)\n- Add tabbed panels to slides with [panelset](#-panelset)\n- Add a logo to all of your slides with [logo](#-logo)\n- Add a top or bottom banner to all of your slides with [banner](#-banner)\n- Add a search box to search through your slides with [search](#-search)\n- Use the [Tachyons CSS utility toolkit](#-tachyons)\n- Add a live video feed of your [webcam](#-webcam)\n- Add one-click code copying with [clipboard](#-clipboard)\n- Always play gifs from the start with [freezeframe](#-freezeframe)\n- Fit your slides to [fill the browser window](#-fit-to-screen)\n- Add [extra CSS styles](#-extra-styles)\n\nEach item can be enabled separately,\nor load everything at once with a single call.\n\n````markdown\n```{r xaringanExtra, echo=FALSE}`r ''`\nxaringanExtra::use_xaringan_extra(c(\"tile_view\", \"animate_css\", \"tachyons\"))\n```\n````\n\n## Installation\n\nYou can install the released version of xaringanExtra from CRAN:\n\n``` r\ninstall.packages(\"xaringanExtra\")\n```\n\nYou can install the latest development version from [GitHub](https://github.com/gadenbuie/xaringanExtra/):\n\n``` r\n# install.packages(\"remotes\")\nremotes::install_github(\"gadenbuie/xaringanExtra\")\n```\n\nor from [gadenbuie.r-universe.dev](https://gadenbuie.r-universe.dev/):\n\n``` r\noptions(repos = c(\n  gadenbuie = 'https://gadenbuie.r-universe.dev',\n  CRAN = 'https://cloud.r-project.org'\n))\n\ninstall.packages('xaringanExtra')\n```\n\n\n## \u0026#x1F5FA; Tile View\n\n#### \u0026#x1F4FA; [Tile View Demo](https://pkg.garrickadenbuie.com/xaringanExtra/tile-view/)\n\nTile view gives you a way to quickly jump between slides.\nJust press \u003ckbd\u003eO\u003c/kbd\u003e\n(the letter **O** for **O**verview)\nat any point in your slideshow and the tile view appears.\nClick on a slide to jump to the slide, or press \u003ckbd\u003eO\u003c/kbd\u003e to exit tile view.\n\n![](man/figures/tile-view.png)\n\nTo add tile view to your xaringan presentation,\nadd the following code chunk to your slides' R Markdown file.\n\n````markdown\n```{r xaringan-tile-view, echo=FALSE}`r ''`\nxaringanExtra::use_tile_view()\n```\n````\n\nTile view is heavily inspired by\n(and is essentially a port to Vanilla JavaScript of)\n[a jQuery remarkjs hook](https://github.com/StephenHesperus/remark-hook/)\nby the same name by [Stephen Hesperus](https://github.com/StephenHesperus).\n\n## \u0026#x1F4DD; Editable\n\n#### \u0026#x1F4FA; [Editable Demo](https://pkg.garrickadenbuie.com/xaringanExtra/editable/)\n\nEditable gives you a way to write directly inside your slides,\nupdating your content live.\nMake any element of your slides editable by using the `.can-edit[...]` class.\n\n![](man/figures/editable.gif)\n\nMake your slides editable with the following code chunk.\n\n````markdown\n```{r xaringan-editable, echo=FALSE}`r ''`\nxaringanExtra::use_editable(expires = 1)\n```\n````\n\nThen, to make a component of your slides editable,\nuse the `.can-edit[]` class.\n\n```markdown\n## .can-edit[You can edit this slide title]\n```\n\nEditable fields that only have the `.can-edit` class\nare reset whenever the slides are re-loaded in your browser.\nIf you want to store the edited values and\nhave them persist across browser sessions,\ngive each editable field a `.key-\u003cNAME\u003e` class.\nBe sure to make each key unique and\nnote that the key name must be a valid CSS class,\ni.e. it cannot contain spaces.\n\n```markdown\n## .can-edit.key-firstSlideTitle[Change this title and then reload the page]\n```\n\nFor more complicated HTML elements,\nit's best to make only spans of text editable, such as\n\n```\nHello, .can-edit[world], and welcome to my talk!\n```\n\nor to use placeholder text.\n\n```markdown\n## A few of my favorite things\n\n.can-edit.key-likes[\n- thing one\n- thing two\n]\n```\n\n## \u0026#x1F4FC; Share Again\n\n#### \u0026#x1F4FA; [Share Again](https://pkg.garrickadenbuie.com/xaringanExtra/share-again/share-again.html)\n\nShare your slides in style with _share again_!\nIt adds a share bar to your slides that only shows up when they're embedded in another page.\nThe bar adds easy slide navigation, quick access to full screen views,\nand a share menu for one-click (or tap!) sharing on social media sites.\n\n![](man/figures/meet-share-again.jpg)\n\nAdd share again to your slides in three easy steps.\n\n1. Add `use_share_again()` to your slides\n\n    ````markdown\n    ```{r share-again, echo=FALSE}`r ''`\n    xaringanExtra::use_share_again()\n    ```\n    ````\n\n1. Style your share bar and choose social media sites\n\n    ````markdown\n    ```{r style-share-again, echo=FALSE}`r ''`\n    xaringanExtra::style_share_again(\n      share_buttons = c(\"twitter\", \"linkedin\", \"pocket\")\n    )\n    ```\n    ````\n\n1. Embed your slides in [blogdown](https://bookdown.org/yihui/blogdown/) or R Markdown websites\n\n    ````markdown\n    ```{r embed-xaringan, echo=FALSE}`r ''`\n    xaringanExtra::embed_xaringan(url = \"share-again.html\", ratio = \"4:3\")\n    ```\n    ````\n\n    `embed_xaringan()` works with\n    \u003cspan style=\"text-decoration: underline\"\u003eany\u003c/span\u003e xaringan presentation,\n    _share again_ not required!\n\n    Here's what your [slides will look like](https://pkg.garrickadenbuie.com/xaringanExtra/share-again/)\n    in an R Markdown HTML document.\n\n## \u0026#x1F4E1; Broadcast\n\n#### \u0026#x1F4FA; [Broadcast Demo](https://pkg.garrickadenbuie.com/xaringanExtra/broadcast/)\n\n**Broadcast** lets others follow along, in real time!\nBuilt with [PeerJS](https://peerjs.com),\n**broadcast** give you a unique URL to share with your viewers.\nThen, when they load your slides,\ntheir slides will automatically follow you as you present!\n\n```{r child=\"man/fragments/broadcast-details.Rmd\"}\n```\n\n## \u0026#x1F469;\u0026#x200D;\u0026#x1F3A8; Scribble\n\n#### \u0026#x1F4FA; [Scribble Demo](https://pkg.garrickadenbuie.com/xaringanExtra/scribble/)\n\nScribble lets you draw on your [xaringan](https://slides.yihui.org/xaringan) slides.\nClick the *pencil* icon or press \u003ckbd\u003eS\u003c/kbd\u003e to begin drawing.\nPressing \u003ckbd\u003eS\u003c/kbd\u003e or starting the drawing mode toggles the scribble toolbox.\nThere, you'll find the *eraser* button, which helps you remove lines from your drawing.\nOr click the *trash* button to clear the drawings on the current slide.\n\n````markdown\n```{r xaringan-scribble, echo=FALSE}`r ''`\nxaringanExtra::use_scribble()\n```\n````\n\nYour drawings stay with each slide when you change slides.\nNote that you won't be able to change slides while you're in drawing mode.\nIn fact, you can use the \u003ckbd\u003e\u0026larr;\u003c/kbd\u003e and \u003ckbd\u003e\u0026rarr;\u003c/kbd\u003e keys\nto **undo** or **redo** your drawings.\n\nRemember that if you use slide continuations to partially reveal slide contents,\neach partial slide is technically a _brand-new_ slide as far as xaringan is concerned.\nThis means that each partial slide will have it's own drawing layer\nand your drawings on one slide won't carry over to the next.\n(But they'll still be there when you switch back!)\n\nTo save a copy of the slide with your drawings,\nyour best option is to print your presentation from the browser.\n\n## \u0026#x1F50A; Slide Tone\n\n#### \u0026#x1F4FA; [Slide Tone Demo](https://pkg.garrickadenbuie.com/xaringanExtra/slide-tone/)\n\nSlide tone plays a subtle sound when you change slides.\nIt was\n[requested by a blind R user](https://github.com/yihui/xaringan/issues/214)\nand enables users to hear an auditory signal of their progress through the slides.\n\nThe tones increase in pitch for each slide from a low C to a high C note.\nThe tone pitch stays the same for incremental slides.\n\nVisit the\n[slide tone demo slides](https://pkg.garrickadenbuie.com/xaringanExtra/slide-tone/)\nto experience it yourself.\nOr include slide tone in your next xaringan presentation\nby adding the following code chunk to your slides' R Markdown.\n\n````markdown\n```{r xaringan-slide-tone, echo=FALSE}`r ''`\nxaringanExtra::use_slide_tone()\n```\n````\n\n## \u0026#x1F4FD; Animate.css\n\n#### \u0026#x1F4FA; [Animate.css Demo](https://pkg.garrickadenbuie.com/xaringanExtra/animate-css/)\n\n[Animate.css] is a popular collection of CSS animations. It contains\n\n\u003e a bunch of cool, fun, and cross-browser animations for you to use in your\n\u003e projects. Great for emphasis, home pages, sliders, and general\n\u003e just-add-water-awesomeness.\n\nUse `use_animate_css()` to include the animate.css stylesheets in your slides.\nThis function automatically modifies the CSS selector that enables the animation\nso that only the slides that are visible are animated.\nThis drastically improves performance on large slide decks with many animations.\nFor use in other HTML documents,\nset `xaringan = FALSE` to load the default `animate.css` file\nwithout this performance tweak.\n\nTo use animate.css in your slides,\nadd the following code chunk to your slides' R Markdown.\n\n````markdown\n```{r xaringan-animate-css, echo=FALSE}`r ''`\nxaringanExtra::use_animate_css()\n```\n````\n\nThen add the `animated` class and the [desired animation class][animate.css] to the slides you want to animate.\n`Out` animations are only applied to slides on exit.\n\n```markdown\n---\nclass: animated slideInRight fadeOutLeft\n\n## This slide...\n\n- slides in from the right\n- and fades out to the left on exit\n```\n\nIf you want to use the same slide transitions for all slides,\nyou can use `use_animate_all()`.\nThis function sets a default in and out animation for all slides.\nAnimations can be disabled for individual slides\nby adding the class `no-animation` to the slide.\n\n````markdown\n```{r xaringan-animate-all, echo=FALSE}`r ''`\nxaringanExtra::use_animate_all(\"slide_left\")\n```\n````\n\nNote: because `use_animate_all()` only imports the CSS required for the slide in and slide out animations,\nyou need to also include `use_animate_css()` (see above)\nif you want to use other animations from `animate.css` in your slides.\n\n## \u0026#x1F5C2; Panelset\n\n#### \u0026#x1F4FA; [Panelset Demo](https://pkg.garrickadenbuie.com/xaringanExtra/panelset/)\n\nPanelset adds accessible tabbed panels —\njust like R Markdown's `.tabset` panels —\nto your xaringan slides.\nYou can activate a panel by clicking on the tab,\nor you can use the keyboard.\nWhen you reach a slide with a panelset,\nthe left and right arrows will step through the panels.\n\nTo use panelset, add the following chunk to your slides.\n\n````markdown\n```{r xaringan-panelset, echo=FALSE}`r ''`\nxaringanExtra::use_panelset()\n```\n````\n\n![](man/figures/panelset.gif)\n\nThen, create a `.panelset[...]` that contains `.panel[]`s.\nEach `.panel[]` should have a `.panel-name[]` and content\n(everything that isn't the panel's name).\n\n```markdown\n.panel[.panel-name[NAME]\n...content...\n]\n```\n\nHere's the example used in the demo slides.\n\n````markdown\n.panelset[\n.panel[.panel-name[R Code]\n\n```{r panel-chunk, fig.show='hide'}`r ''`\n# ... r code ...\n```\n]\n\n.panel[.panel-name[Plot]\n\n![](`r knitr::fig_chunk(\"panel-chunk\", \".png\")`)\n]\n]\n````\n\n### Sideways Panelsets\n\n```{r child=\"man/fragments/panelset_sideways.Rmd\"}\n```\n\n### Use in R Markdown\n\n[rmarkdown::html_document()]: https://rmarkdown.rstudio.com/docs/reference/html_document.html\n\n\n[Example R Markdown output with panelset](https://pkg.garrickadenbuie.com/xaringanExtra/panelset//rmarkdown.html)\n\n```{r child=\"man/fragments/panelset_other-rmd.Rmd\"}\n```\n\n### Customize Panelset Appearance\n\n```{r child=\"man/fragments/panelset_custom-styles.Rmd\"}\n```\n\n### Panelset knitr Chunks\n\n```{r child=\"man/fragments/panelset_chunks.Rmd\"}\n```\n\n## \u0026#x1F48C; Logo\n\n#### \u0026#x1F4FA; [Logo Demo](https://pkg.garrickadenbuie.com/xaringanExtra/logo/)\n\n`use_logo()` adds a logo to all of your slides.\nYou can make the logo a clickable link and choose where on the slide it is placed.\nYou can also set which types of slides will not get the logo by default.\n\nTo add a logo to your xaringan presentation,\nadd the following code chunk to your slides' R Markdown file.\n\n````markdown\n```{r xaringan-logo, echo=FALSE}`r ''`\nxaringanExtra::use_logo(\n  image_url = \"https://raw.githubusercontent.com/rstudio/hex-stickers/master/PNG/xaringan.png\"\n)\n```\n````\n\nSee the documentation for `?use_logo` for more options regarding sizing\nand positioning. You can also make the logo a link using `link_url` and\nyou can hide the logo for a particular slide by using the `hide_logo`\nslide class.\n\n## \u0026#x1F4F0; Banner\n\n#### \u0026#x1F4FA; [Banner Demo](https://pkg.garrickadenbuie.com/xaringanExtra/banner/)\n\n`use_banner()` adds a banner to the top or the bottom of your slides.\nUse banner to add the title of your talk,\na link to your materials online,\nor any other text to every slide.\nEach banner has three columns: left, center, and right.\nChoose to `exclude` the banner from particular slides by class.\n\n````markdown\n```{r xaringan-banner, echo=FALSE}`r ''`\nxaringanExtra::use_banner(\n  top_left = \"My Awesome Talk Title\",\n  top_right = \"Mr. Fancy Pants\",\n  bottom_left = \"bit.ly/my-awesome-talk\",\n  exclude = \"title-slide\"\n)\n```\n````\n\nBanners are fully customizable and can be styled based on slide class,\nalthough the defaults will generally work in most places.\nSee `style_banner()` for full details!\n\n## \u0026#x1F50D; Search\n\n#### \u0026#x1F4FA; [Search Demo](https://pkg.garrickadenbuie.com/xaringanExtra/search/)\n\nBrings [remark.search](https://github.com/arestivo/remark.search) to xaringan slides! Call `use_search()` to add **search** to your slides and to choose your options.\n\n````markdown\n```{r xaringanExtra-search, echo=FALSE}`r ''`\nxaringanExtra::use_search(show_icon = TRUE)\n```\n````\n\n| Parameter | Description |\n|:-|:-|\n| `position` | Where to place the search box. |\n| `case_sensitive` | If \u003ccode\u003eFALSE\u003c/code\u003e, ignores case of search and text. |\n| `show_icon` | Show the icon to open or close the search? |\n| `auto_search` | Search on each keystroke (\u003ccode\u003eTRUE\u003c/code\u003e) or on enter (\u003ccode\u003eFALSE\u003c/code\u003e)? |\n\nIn your slides, press \u003ckbd\u003eControl\u003c/kbd\u003e + \u003ckbd\u003eF\u003c/kbd\u003e to start searching, or click on the search icon \u0026#x1F50D; if you set `show_icon = TRUE`. Press \u003ckbd\u003eEnter\u003c/kbd\u003e to jump to the next match.\n\nTo change the appearance of the **search** box, use `style_search()`:\n\n````markdown\n```{r xaringanExtra-search-style, echo=FALSE}`r ''`\nxaringanExtra::style_search(match_background = \"pink\")\n```\n````\n\n| Argument | Description |\n|:-|:-|\n| `icon_fill` | Color of search icon |\n| `input_background` | Color of search input box background |\n| `input_foreground` | Color of text in search input box |\n| `input_border` | Border style of search input box |\n| `match_background` | Color of match background (not current) |\n| `match_foreground` | Color of match text (not current) |\n| `match_current_background` | Color of current match background |\n| `match_current_foreground` | Color of current match text |\n| `selector` | CSS selector specifying which search bar to update (for advanced or unusual uses only) |\n\n\n## \u0026#x1F3D7; Tachyons\n\n#### \u0026#x1F4FA; [Tachyons Demo](https://pkg.garrickadenbuie.com/xaringanExtra/tachyons/)\n\n[tachyons]: http://tachyons.io/\n[tachyons-docs]: http://tachyons.io/docs/\n[tachyons-cheatsheet]: https://roperzh.github.io/tachyons-cheatsheet/\n\n[Tachyons] is a collection of CSS utility classes\nthat works beautifully with [xaringan] presentations\nand the [remarkjs] class syntax.\n\nTo use tachyons in your slides,\nadd the following code chunk to your slides' R Markdown.\n\n````markdown\n```{r xaringan-tachyons, echo=FALSE}`r ''`\nxaringanExtra::use_tachyons()\n```\n````\n\nTachyons provides small, single-purpose CSS classes that are easily composed to achieve larger functionality and styles.\nIn the\n[remarkjs content classes syntax](https://github.com/gnab/remark/wiki/Markdown#content-classes),\nyou can compose classes by chaining them together.\nFor example,\nthe following markdown produces a box with a\nwashed green background (`.bg-washed-green`)\nand a dark green border (`.b--dark-green`)\non all sides (`.ba`)\nwith line width 2 (`.bw2`)\nand border radius (`.br3`).\nThe box has a shadow (`.shadow-5`)\nand medium-large horizontal padding (`.ph4`)\nwith a large top margin (`.mt5`).\n\n```markdown\n.bg-washed-green.b--dark-green.ba.bw2.br3.shadow-5.ph4.mt5[\nThe only way to write good code is to write tons of bad code first.\nFeeling shame about bad code stops you from getting to good code\n\n.tr[\n— Hadley Wickham\n]]\n```\n\n![](man/figures/tachyons.png)\n\nTachyons provides hundreds of CSS classes that are abbreviated and terse,\nso it takes some time to learn.\nIn addition to the [tachyons documentation][tachyons-docs],\nthe [Tachyons Cheatsheet][tachyons-cheatsheet] is an excellent and easy to use reference.\n\n## \u0026#x1F933; Webcam\n\n#### \u0026#x1F4FA; [Webcam Demo](https://pkg.garrickadenbuie.com/xaringanExtra/webcam/)\n\nAdd a live video of your webcam into your slides (in your own browser only).\nUseful when you are presenting via video conference to include your video,\nor when you are recording a class or lecture.\n\n```{r child=\"man/fragments/webcam-details.Rmd\"}\n```\n\nThe webcam extension is based on the original\n[webcam implementation](https://yihui.org/en/2017/12/html5-camera/) by\nYihui Xie, author of [xaringan].\n\n\n## \u0026#x23F8;\u0026#xFE0F; FreezeFrame\n\n#### \u0026#x1F4FA; [FreezeFrame Demo](https://pkg.garrickadenbuie.com/xaringanExtra/freezeframe/)\n\n[freezeframejs]: http://ctrl-freaks.github.io/freezeframe.js/\n\nFreezeFrame starts any gifs on a slide when you turn to that slide. This helps\nalleviate the awkward pause that can happen when you turn to a slide\nwith a gif that has already started and you have to wait until it loops\nback around. You can also directly click on the gif to stop or start it. Built using [freezeframe.js][freezeframejs].\n\nTo add FreezeFrame to your `xaringan` presentation, add the following\ncode chunk to your slides\\' R Markdown file.\n\n````markdown\n```{r xaringanExtra-freezeframe, echo=FALSE}`r ''`\nxaringanExtra::use_freezeframe()\n```\n````\n\n| Argument | Description |\n|:-|:-|\n| selector | The selector used to search for `.gifs` to freeze. |\n| trigger | The trigger event to start animation for non-touch devices. One of `\"click\"` (default), `\"hover\"` or `\"none\"`. |\n| overlay | Whether or not to display a play icon on top of the paused image, default: `FALSE`. |\n| responsive | Whether or not to make the image responsive (100% width), default: `TRUE`. |\n| warnings | Whether or not to issue warnings in the browser console if an image doesn't appear to be a gif. |\n\n\n## \u0026#x1F4CB; Clipboard\n\n#### \u0026#x1F4FA; [Clipboard Demo](https://pkg.garrickadenbuie.com/xaringanExtra/clipboard/)\n\n[clipboardjs]: https://clipboardjs.com/\n\nAdd a \"Copy Code\" button for one-click code chunk copying.\n\n```{r child=\"man/fragments/clipboard-details.Rmd\"}\n```\n\nclipboard works in xaringan slides, R Markdown documents, blogdown sites, and Shiny apps!\n\n**Related projects:** For related R packages that provide copy support via [clipboard.js][clipboardjs] see\n\n- [RLesur/klippy: Copy to Clipboard Buttons for RMarkdown HTML Documents](https://github.com/RLesur/klippy)\n- [sbihorel/rclipboard: clipboard.js for R/Shiny Applications](https://github.com/sbihorel/rclipboard)\n\n## \u0026#x1F4D0; Fit to Screen\n\n#### \u0026#x1F4FA; [Fit to Screen Demo](https://pkg.garrickadenbuie.com/xaringanExtra/fit-screen/)\n\nxaringan/remark slides scale at a consistent ratio when the browser window is resized.\nIn other words, if the slide ratio is `4:3`,\nthen remark scales the slides and positions them in the browser window\nso that they maintain the aspect ratio.\n\nIn certain situations,\nlike when showing slides in split screen next to another window like RStudio,\nthis causes the slides to become rather small.\nAlternatively,\nit's a great way to be able to adapt your slides\nto the aspect ratio of the projector or television screen\nwhen you don't know the ratio ahead of time.\n\nThis extension adds a short cut key — \u003ckbd\u003eAlt\u003c/kbd\u003e/\u003ckbd\u003eOption\u003c/kbd\u003e+ \u003ckbd\u003eF\u003c/kbd\u003e —\nthat fits the slides to the screen and ignores the slide ratio.\n(Currently, it only turns on; reload your slides to return to normal.)\n\n![](man/figures/fit-screen.gif)\n\n````markdown\n```{r xaringan-fit-screen, echo=FALSE}`r ''`\nxaringanExtra::use_fit_screen()\n```\n````\n\n\n## \u0026#x1F60E; Extra Styles\n\n#### \u0026#x1F4FA; [Extra Styles Demo](https://pkg.garrickadenbuie.com/xaringanExtra/extra-styles/)\n\n### Extra Styles\n\nI've collected a few CSS extras that I like to include in my slides,\nthat I've bundled up into the `use_extra_styles()` function.\n\n````markdown\n```{r xaringan-extra-styles}`r ''`\nxaringanExtra::use_extra_styles(\n  hover_code_line = TRUE,         #\u003c\u003c\n  mute_unhighlighted_code = TRUE  #\u003c\u003c\n)\n```\n````\n\n- `hover_code_line` adds a little floating triangle next to the hovered line in a code chunk\n\n- `mute_unhighlighted_code` modifies the xaringan/remarkjs line highlighting to mute the lines that _aren't highlighted_.\n\n![](man/figures/extra-styles-hover.gif)\n\n### Progress Bar\n\nYou can also add an animated progress bar using `xaringanExtra::use_progress_bar()`.\n\n````markdown\n```{r xaringanExtra, echo = FALSE}`r ''`\nxaringanExtra::use_progress_bar(color = \"#0051BA\", location = \"top\")\n```\n````\n\n- `color` can be any CSS color\n\n- `location` can be `\"top\"` or `\"bottom\"`\n\n- `height` can be a valid CSS unit, e.g. `10px` or `0.25em`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgadenbuie%2Fxaringanextra","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgadenbuie%2Fxaringanextra","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgadenbuie%2Fxaringanextra/lists"}