Can I align body text with margin note? - css

I'm using the tufte R package to create an html document with margin notes. Some of my margin notes are figures that are fairly tall. For example:
---
title: Big sidenote
output:
tufte::tufte_html: default
---
```{r setup, include=FALSE}
library(tufte)
# invalidate cache when the tufte version changes
knitr::opts_chunk$set(tidy = FALSE, cache.extra = packageVersion('tufte'))
options(htmltools.dir.version = FALSE)
```
```{r fig.margin = TRUE, fig.cap="Fig1. My margin figure is kind of tall.", echo=FALSE}
plot(mtcars)
```
Here is paragraph 1. It's pretty short and it's associated with Fig 1.
```{r fig.margin = TRUE, fig.cap="Fig 2. Related to the second paragraph.", echo=FALSE}
plot(subset(mtcars, cyl==6))
```
I'd like this paragraph to start in line with Fig 2.
```
I would like the paragraph in the main body to begin below the bottom of the figure in the margin.
Is this possible within the markdown? My CSS skills/understanding are limited.

I figured this out. Simple for those who know CSS well, but here for those who don't. The margin notes are created with a float property. You can use the float property to disallow floating elements to the side of your text.
I created a new "cleared" class that clears elements to the right:
<style>
.cleared {clear: right;}
</style>
Then, whenever I wanted text to skip down to the next figure, I created a div of the cleared class:
<div class = "cleared"></div>
Here is the full example:
---
title: Big sidenote
output:
tufte::tufte_html: default
---
<style>
.cleared {clear: right;}
</style>
```{r setup, include=FALSE}
library(tufte)
# invalidate cache when the tufte version changes
knitr::opts_chunk$set(tidy = FALSE, cache.extra = packageVersion('tufte'))
options(htmltools.dir.version = FALSE)
```
```{r fig.margin = TRUE, fig.cap="Fig1. My margin figure is kind of tall.", echo=FALSE}
plot(mtcars)
```
Here is paragraph 1. It's pretty short and it's associated with Fig 1.
<div class = "cleared"></div>
```{r fig.margin = TRUE, fig.cap="Fig 2. Related to the second paragraph.", echo=FALSE}
plot(subset(mtcars, cyl==6))
```
I'd like this paragraph to start in line with Fig 2.
And the result:

Related

Chunks in text Rmarkdown - Xaringan

I am making a xaringan presentation and I am trying to show my chunk options in R Markdown, and I need that it appears in a gray square.
Like this image:
But I just get my code without that nice gray square:
And of course I don't know how to put the highlights in this kind of code chunks. If somebody knows how to do it, I will really appreciate it.
This is the code I wrote in order to get the chunk without the square:
```{r echo=FALSE, comment = NA}
cat("````
```{r, echo = TRUE, eval=TRUE, out.width = '50%', fig.align = 'center'}`r ''`
url <- 'https://media.springernature.com/full/springer-static/\nimage/art:10.1186%2Fs13059-020-02088-y/MediaObjects/13059_2020_2088_Fig1_HTML.png'
knitr::include_graphics(url)
```\n````")
```
Following the example in the "Ninja" presentation template, you can produce "raw chunks" by using the markdown formatting with some tricks:
# Test
````markdown
`r ''````{r, echo = TRUE, eval=TRUE, out.width = '50%', fig.align = 'center'}
url <- 'https://media.springernature.com/full/springer-static/\nimage/art:10.1186%2Fs13059-020-02088-y/MediaObjects/13059_2020_2088_Fig1_HTML.png'
knitr::include_graphics(url) #<<
```
````
Output:
```{r, echo = TRUE, eval=TRUE, out.width = '50%', fig.align = 'center'}
url <- 'https://media.springernature.com/full/springer-static/\nimage/art:10.1186%2Fs13059-020-02088-y/MediaObjects/13059_2020_2088_Fig1_HTML.png'
knitr::include_graphics(url) #<<
```
Line highlighting is done with #<<. For this, you need to enable the highlighting in the yaml header (again, I've taken the default from the Ninja template):
output:
xaringan::moon_reader:
lib_dir: libs
nature:
highlightStyle: github
highlightLines: true
countIncrementalSlides: false

xaringan slide separator not separating slides

In this example xaringan presentation, why are both the ## blank page and the leaflet map on the same slide, given I've separated them by the new-slide separator --- ?
---
title: "map test"
output:
xaringan::moon_reader:
css: ["default"]
nature:
highlightLines: true
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
## blank page
content
---
leaflet page
```{r}
library(leaflet)
leaflet() %>%
addTiles()
```
---
Looks like you've got an unintended space after the new slide separator after blank content as "--- ". Remove that space and it'll be recognized as real slide separator:
---
title: "map test"
output:
xaringan::moon_reader:
css: ["default"]
nature:
highlightLines: true
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
## blank page
content
---
leaflet page
```{r}
library(leaflet)
leaflet() %>%
addTiles()
```
---
In my case I'm adding mathjax/latex equations and I had:
$$
\begin{aligned} P(Y= k)=\comb{k-1}{r-1} * p^r q^{k-r}, \qquad k= r,r+1
\end{aligned}\label{pascal}\tag{5}
$$
And I had to remove the breaklines
$$\begin{aligned} P(Y= k)=\comb{k-1}{r-1} * p^r q^{k-r}, \qquad k= r,r+1
\end{aligned}\label{pascal}\tag{5}$$
and then it worked. I've that it renders mathjax better if all the code is in a single line.

R flexdashboard remove title bar

I am working on a project using rMarkdown and the flexdashboard package from rStudio. Everything is coming together nicely. But I would like to remove the blue title bar you see at the top of the image here.
We are dropping this html page into a window so it becomes a second title bar, which looks terrible. Is there a function in flexdashboard to remove this entire apparatus?
Here is the YAML and the first chunk you see just below the blue bar in the photograph. Any suggestion would be greatly appreciated.
---
title: New Hampshire Statewide Age Adjusted Incedence Rates of Lyme
output:
flexdashboard::flex_dashboard:
orientation: rows
---
```{r setup, include=FALSE, message=FALSE, warning=FALSE, echo=TRUE}
```
Row
-----------------------------------------------------------------------
###
```{r, aarState, message=FALSE, warning=FALSE}
library(flexdashboard)
library(rbokeh)
#load state-wide age adjusted rates
aar<-read.csv("stateAAR.csv")
figure(title=" Age Adjusted Rates by Year",width= 1500, height =600) %>%
ly_segments(year, lci*100000, year, uci*100000, data=aar, color = "#b37700", width = 1) %>%
ly_points(year, adj.rate*100000, glyph = 21, size=6, data = aar, hover= "<strong>Rate per 100,000:</strong> #rateHundThou </br> <strong>Upper Confidence:</strong> #uciHT </br><strong> Lower Confidence:</strong> #lciHT " , color="#666622" )%>%
x_axis(label ='Year')%>%
y_axis(label ='Age Adjusted Rate')
```
Row
You can just add CSS styling directly to your markdown document (no JQuery required):
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
<style>
body {
padding-top:0px
}
.navbar{
visibility: hidden
}
</style>
```{r setup, include=FALSE}
library(flexdashboard)
```
Column {data-width=650}
-----------------------------------------------------------------------
### Chart A
```{r}
hist(iris$Sepal.Length)
```
Column {data-width=350}
-----------------------------------------------------------------------
### Chart B
```{r}
hist(iris$Sepal.Width)
```
### Chart C
```{r}
hist(iris$Petal.Length)
```
Results in:
I am not aware of any flexdashboard option. But you could use jQuery to remove the navbar and move the body up. Just include the following snippet right after your YAML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.navbar').remove();
$('body').css('padding-top', '0px');
});
</script>
I think this leaves the main navigation bar of the parent document untouched. If not it might need some lsight modification.

Centering pander tables

I am using pander in my Rmarkdown document to display tables. Is there away to center the table?
I have tried a few different methods, but none of them seem to work. For example:
{r, fig.align="center"}
library(pander)
test <- as.data.frame(matrix(ncol = 5, nrow =5))
test[1] <- 1
pander(test, justify = "center")
Adding fig.align = "center" does not work and neither does justify = "center"
Does anyone know of a workaround ?
You could just add regular HTML tags to center the table (like <center>):
---
title: "test"
output:
html_document: default
pdf_document: default
---
<center>
```{r, fig.align="center"}
library(pander)
test <- as.data.frame(matrix(ncol = 5, nrow =5))
test[1] <- 1
pander(test, justify = "center")
```
</center>
If you want to show both the code and the centered table, but don't want the code centered, repeat the block, but don't evaluate it the first time, and then don't echo it the second time.
Here's an example:
Alternatively, add a custom CSS file with your styling options and add that to your header.
Example CSS (saved as "test.css"):
table {
margin:1em auto;
}
Example header:
---
title: "test"
output:
html_document:
css: test.css
---

Wrapping plots in another html container within an Rmd file

I have a situation where, for display purposes, I need to wrap an outputted plot in a <div> container.
At the most basic level, this is what I would like to do:
```{r fig.width=7, fig.height=6,results='asis',echo=FALSE}
cat('<div>')
plot(cars)
cat('</div>')
```
However, the output document looks like this:
![plot of chunk unnamed-chunk-2](figure/unnamed-chunk-2.png)
Is there a workaround if you need to "wrap" output?
The same behaviour only seems to occur when it's wrapping the plot. Otherwise, including closed tags works as expected:
```{r fig.width=7, fig.height=6,results='asis',echo=FALSE}
cat('<div>')
cat('</div>')
plot(cars)
cat('<h1>Hello</h1>')
```
Yet wrapping the image seems to break it. I'm also noticing that <img> is wrapped in <p> is it possible to stop this behaviour?
Here is one way to do it.
First, we create a chunk hook to wrap chunk output inside a tag.
We pass wrap = div as chunk option to wrap inside div.
Set out.extra = "" to fool knitr into outputting html for plot output. Note that this is required only for div tag and not for span, as markdown is parsed inside span tag.s
DONE!
Here is a gist with Rmd, md and html files, and here is the html preview
## knitr Chunk Hook to Wrap
```{r setup, echo = F}
knit_hooks$set(wrap = function(before, options, envir){
if (before){
paste0('<', options$wrap, '>')
} else {
paste0('</', options$wrap, '>')
}
})
```
```{r comment = NA, echo = F, wrap = 'div', out.extra=""}
plot(mtcars$mpg, mtcars$wt)
```

Resources