class: center, middle, inverse, title-slide .title[ # Xaringan example ] .subtitle[ ## RU template ] .author[ ### Joseph V. Casillas ] .date[ ### Rutgers University </br> 2024-02-18 ] --- background-size: 100% background-image: url(https://media.giphy.com/media/94iS62lx8CRQA/giphy.gif) ??? Image test. Taken from google. --- # IPA symbols work in unicode ## /ʃæ.'riŋ.ɡæn/ ### /θðszʃʒʂʐçʝʎʟɘɵəɜ/ #### e̪a̺u̯ | Word | Phonological transcription | Phonetic transcription | | :---------- | -------------------------- | ---------------------- | | casa | /ˈka.sa/ | [ˈka.sa] | | taco (Sp.) | /ˈta.ko/ | [ˈta.ko] | | taco (Eng.) | /ˈta.ko/ | [ˈt^ha.ko] | --- # Standard slide with R code ```r library(tidyverse) ggplot(cars, aes(x = dist, y = speed)) + geom_point() + {{ geom_smooth(method = 'lm', formula = y ~ poly(x, 2))}} # we can highlight lines of code ``` <img src="index_files/figure-html/unnamed-chunk-1-1.png" width="864" style="display: block; margin: auto;" /> --- # Slide basics - Unordered lists - can be created using "-" - and they can be nested using 2 or 4 spaces - We can also make `blockquotes` - we can use `<ru-blockquote>text</ru-blockquote>` - or `>` <ru-blockquote>This is a blocked quote</ru-blockquote> - Footnotes¹ .footnote[ [1] Information here. ] --- # More basics ### Ordered list 1. one 2. two 3. three -- - Spaced -- - List -- - with increments -- An incremental -- sentence with -- separation. --- background-image: url(https://github.com/yihui/xaringan/releases/download/v0.0.2/karl-moustache.jpg) background-position: 50% 50% class: center, bottom, inverse # You only live once! --- background-image: url(http://www.jvcasillas.com/ru_xaringan/img/logo/ru_shield2.png) background-position: 90% 50% background-size: 300pt # Another example ### Lists to the left - We can place images - anywhere on the screen - by using **background-image** - in conjunction with - **background-position** ### Image to the right - This can replicate my 'float right' hack - We can control the - size of the image - by using the - **background-size** option --- class: center, middle # Text adjustments -- It is also possible to change the .blue[color] of any text by using... -- .color[text here] -- For example -- .grey[grey] -- will make text .grey[grey] -- We can do this with white, .grey[grey], .black[black], .RUred[red] and .blue[blue]. -- To really make text stand out we can just use \*\*text\*\* like **this**. --- # Two columns! .pull-left[ ### Some things on the left 1. List of things 1. Plain Markdown; 1. blah blah 1. Plain Markdown; ] -- .pull-right[ ### and other things on the right 1. We do this by using the 1. \.pull-left[] and \.pull-right[] 1. commands. Just put any text inside the 1. brackets and you're good to go ] --- # R code and highlighting (I never use this) .pull-left[ An example using a leading `*`: ```r if (TRUE) { ** message("Very important!") } ``` Output: ```r if (TRUE) { * message("Very important!") } ``` This is invalid R code, so it is a plain fenced code block that is not executed. ] .pull-right[ An example using `{{}}`: ```{r tidy=FALSE} if (TRUE) { *{{ message("Very important!") }} } ``` Output: ```r if (TRUE) { * message("Very important!") } ``` ``` ## Very important! ``` It is valid R code so you can run it. ] --- class: middle, bottom background-image: url(http://www.jvcasillas.com/ru_xaringan/img/logo/ru_shield.png) background-size: contain ### <grey>You can</grey> ### <grey>fill the</grey> ### <grey>screen with </grey> ### **background-size: contain** --- # Macros - We can insert javascript macros into our presentations - For example, if we put the following code into `macros.js`... ```js remark.macros.scale = function (percentage) { var url = this; return '<img src="' + url + '" style="width: ' + percentage + '" />'; }; ``` - ...we can use the markdown call to resize images... ```md  ``` - These calls can also be put inside html divs so as to control where they appear. <div align="center">  </div> - All we need to do is include `beforeInit: "macros.js"` under nature in our YAML front matter --- # RU stuff ### General - The theme was designed to work with a 16:9 aspect ratio - Set the aspect ratio under the **nature** output parameter... nature: &nbsp; &nbsp; ratio: "16:9" ### Sections - We can create section dividers with RU red and grey by using the `class` call: ```md class: title-slide-section-red ``` or ```md class: title-slide-section-grey ``` --- class: title-slide-section-red # RU red section divider ### This is the H3 font color - Our text goes here - We can use **bold** - and .blue[blue] - and also .grey[grey] --- class: title-slide-section-grey # RU grey section divider ### This is the H3 font color - Our text goes here - We can use **bold** - and .blue[blue] - and also .black[black] --- # Tables ### Centering - Tables are centered by default in **xaringan**. - We can override this using... .pull-left[], .pull-right[], etc. .pull-right[ | This | is | a | Table | | :---- | :-- | :----- | :----------: | | It is | now | pulled | to the right | | 12 | 34 | 56 | 78 | ] --- background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/be/Sharingan_triple.svg) background-size: 100px background-position: 90% 8% # xaringan - Press `h` or `?` to see the possible ninjutsu you can use in remark.js. - You can see all the goodies like this. - Check out more in-depth tutorial [here](https://slides.yihui.name/xaringan/#1) --- class: title-slide-final, middle background-image: url(https://github.com/jvcasillas/ru_xaringan/raw/master/img/logo/ru_shield.png) background-size: 55px background-position: 9% 15% # Thanks! ## This is the final slide ### you can add your email, twitter, github, etc. info here Here is an example: | | | | :--------------------------------------------------------------------------------------------------------- | :-------------------------------- | | <a href="mailto:joseph.casillas@rutgers.edu">.RUred[<i class="fa fa-paper-plane fa-fw"></i>] | joseph.casillas@rutgers.edu | | <a href="http://www.jvcasillas.com/ru_xaringan/slides/index.html">.RUred[<i class="fa fa-link fa-fw"></i>] | jvcasillas.com/ru_xaringan/slides | | <a href="http://twitter.com/jvcasill">.RUred[<i class="fa fa-twitter fa-fw"></i>] | @jvcasill | | <a href="http://github.com/jvcasillas">.RUred[<i class="fa fa-github fa-fw"></i>] | @jvcasillas |