I want to have my YAML header information centered on my html document.
I want everything else left alligned as normal.
Can I apply any html or other code to the YAML header to make this happen?
How do I do this??
Example:
I have:
---
title: "Shiny HTML Doc"
author: "theforestecologist"
date: "Apr 14, 2017"
output: html_document
runtime: shiny
---
Here is some css styling that you can use to accomplish what you need.
The markdown document title uses the h1.title CSS selector
The markdown document author field uses the h4.author CSS selector
The markdown document datea field uses the h4.date CSS selector
Here is the code:
---
title: "Shiny HTML Doc"
author: "theforestecologist"
date: "Apr 14, 2017"
output: html_document
runtime: shiny
---
<style type="text/css">
h1.title {
font-size: 38px;
color: DarkRed;
text-align: center;
}
h4.author { /* Header 4 - and the author and data headers use this too */
font-size: 18px;
font-family: "Times New Roman", Times, serif;
color: DarkRed;
text-align: center;
}
h4.date { /* Header 4 - and the author and data headers use this too */
font-size: 18px;
font-family: "Times New Roman", Times, serif;
color: DarkBlue;
text-align: center;
}
</style>
# H1 Header
Some body text
## H2 Header
More body text
```{r echo=T}
n <- 100
df <- data.frame(x=rnorm(n),y=rnorm(n))
```
And this is what it looks like in then end:
Related
I am trying to display some regression results in an rmarkdown html file. However, the output from the code chunks is too narrow and therefore it is very hard to read the p-values, etc, particularly when I include a floating table of contents. I have tried adjusting options(width = 9999) but this does not seem to fix the issue. I have also tried:
<style>
pre {
overflow-x: auto;
}
pre code {
word-wrap: normal;
white-space: pre;
}
</style>
which allows me to scroll horizontally if needed. However, given I am using regression results, I do not like having to scroll back and forth to read the coefficients and p-values. I have also tried:
<style>
.main-container { width: 1200px; max-width:2800px;}
</style>
adjusting the width and max-width values, to no avail. These solutions are suggested here.
Any idea how I can solve this issue?
Here is an example. Unfortunately I cannot post my regression results, so here is a matrix that essentially replicates the same issue:
---
title: "Untitled"
author: "me"
date: "11/10/2021"
output:
html_document:
toc: true
tow_float: true
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
options(width = 9999)
matrix = matrix(rnorm(100,5,2), ncol = 20)
matrix
However, when I knit the document, I get something like this:
How can I make the output wider?
I found out, where is your problem.
The floating toc is guilty.
Look, I took a code from that post and remove toc_float.
---
title: "R Notebook"
author: "me"
date: "11/10/2021"
output:
html_document:
toc: true
---
<style>
.main-container { width: 1800px; max-width:2800px;}
</style>
## R Markdown
```{r}
options(width = 1500)
dataM <- matrix(rnorm(100, 5, 2), ncol = 20)
dataM
```
And it works:
I think, that this space under toc is reserved. But can't say it with 100% confidence.
An addition
You should make a custom TOC with CSS.
I'm not a pro with CSS, so, I have compiled something for you. You can modify it...
CSS-file:
#TOC {
font-family: Arial, Helvetica, sans-serif;
color:black;
background-color: white;
position: fixed;
top: 0;
left: 0;
width: 150px;
border: 1px solid Black;
padding: 10px;
margin: 30px;
overflow:auto;
}
body {
max-width: 800px;
margin-left:210px;
line-height: 20px;
}
Your header:
---
title: "R Notebook"
author: "me"
date: "11/10/2021"
output:
html_document:
css: TOC.css
toc: true
---
I am using the xaringan library from Yihui in R to create a custom template for a presentation.
Part of this is creating custom body slides as pictured below.
I then use custom CSS for the headers and body:
.body-yellow > h2 {
font-size: 42px;
text-transform: uppercase;
padding-left:
}
And then just type in rmarkdown something like:
---
class: body-yellow
# Hello
## world
Hello world
This then populates the slide.
My question is, is there a way to create a placeholder for the image shown in the template above that I could adjust in the rmarkdown code itself?
I am imagining code like:
---
class: body-yellow
background-images: url(./img/my_new_custom_image.png)
# Hello
## world
Hello world
And the relevant adjustment in CSS:
.body-yellow > image {
background-images: PLACEHOLDER
position:right
}
Which will change the image as follows:
Excuse my CSS ignorance, but I am only starting to dabble in this area.
You can set a global background image for the body-yellow class, and override it with the background-image attribute on a particular slide. Here is a minimal example:
---
title: "Test"
output:
xaringan::moon_reader:
nature:
ratio: "16:9"
---
class: body-yellow
```{css, echo=FALSE}
.body-yellow > h2 {
font-size: 42px;
text-transform: uppercase;
padding-left: 50px;
}
.body-yellow {
background-image: url(https://i.stack.imgur.com/OSrg8t.png);
background-size: contain;
}
```
## Default background
---
class: body-yellow
background-image: url(https://i.stack.imgur.com/X1C2Bt.png)
## A custom background
With an external css file, I can change many items in an Rmd/html document, but some basic ones are overridden by inline css inserted by markdown (?).
.main-container {
....
h1 {
font-size: 34px;
}
h2 {
font-size: 30px;
}
So the only way to change h2 font size is by inserting the code directly into the document, which is ugly:
---
output:
html_document:
theme: cosmo
# css: whatever.css # adding h2 here does not work
---
<style type = "text/css">
h2 {color: red;}
</style>
## R Markdown
Any better solution? Is it possible to suppress the above inline chunk?
This was fixed by JJAllaire in:
https://github.com/rstudio/rmarkdown/issues/652#event-600790015
Using kable() to render a simple table yields what seems to be the default pale font color for the table caption in the resulting html file. Is there a way to control the table (or figure) caption font color, size, etc?
---
title: "test"
output:
html_document:
theme: cosmo
---
```{r}
library(knitr)
tab.1 = table(mtcars$cyl, mtcars$vs)
kable(tab.1, caption="Table 1: Caption Font Color")
```
Aha! Customizing the CSS stylesheet does the trick.
caption {
color: red;
font-weight: bold;
font-size: 1.0em;
}
Adding to Ani's answer: if you don't want to write the css stylesheet separately, you can just include another chunk after your YAML:
```{r results="asis"}
cat("
<style>
caption {
color: red;
font-weight: bold;
font-size: 1.0em;
}
</style>
")
```
Now you can use a css code chunk directly, bypassing R. Adding echo = FALSE keeps it from being part of your output.
```{css, echo = FALSE}
caption {
color: red;
font-weight: bold;
font-size: 1.0em;
}
```
I recently opened a standard Rmd file without editing anything. The default file looks like this:
Untitled.rmd
---
title: "myfile"
author: "Me"
date: "May 25, 2015"
output: html_document
fontsize: 12pt
---
This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.
When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this:
```{r}
summary(cars)
```
You can also embed plots, for example:
```{r, echo=FALSE}
plot(cars)
```
Note that the `echo = FALSE` parameter was added to the code chunk to prevent printing of the R code that generated the plot.
I wanted to create an html file corresponding to the above file so in a separate R script I did the following:
knit('Untitled.Rmd', 'doc.md')
markdownToHTML('doc.md', 'testing.html',header = TRUE)
For some reason the font size doesn't work and the header information that I was hoping for doesn't appear in my testing.html. Anyone know why this is happening?
This is what I used to control font size and color in an R-markdown file. It basically overrides the CSS style sheets without having to create a new file. The example changes the sizes of the headers and titles, as well as the inline text and the R-code text, and sets some colors as well.
In my case I needed to pack more information into a document that had a specified number of pages so I made everything smaller.
---
title: "This is a title"
date: 25 May 2015
output:
html_document:
theme: cerulean
---
<style type="text/css">
body{ /* Normal */
font-size: 12px;
}
td { /* Table */
font-size: 8px;
}
h1.title {
font-size: 38px;
color: DarkRed;
}
h1 { /* Header 1 */
font-size: 28px;
color: DarkBlue;
}
h2 { /* Header 2 */
font-size: 22px;
color: DarkBlue;
}
h3 { /* Header 3 */
font-size: 18px;
font-family: "Times New Roman", Times, serif;
color: DarkBlue;
}
code.r{ /* Code block */
font-size: 12px;
}
pre { /* Code block - determines code spacing between lines */
font-size: 14px;
}
</style>
# H1 Header
Some body text
## H2 Header
More body text
### H3 Header
blah blah blah
```{r echo=T}
n <- 100
df <- data.frame(x=rnorm(n),y=rnorm(n))
```
### Another H3
Update:
Added more more styles, comments, and a bit of color to make this answer more useful. And a screen shot: