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:
Related
I made a presentation in which I can change the text size of the slides. But if there is a math equation in the text, it doesn't render anymore. Is there a way that I could create a text class that would change the size of the text and be able to render math as well? Also, is there a way I can use the .tiny class on text, math, code input and output, in 1 CSS class definition or I would need to create 4 different .tiny classes (see the .tiny-code code.r and the .tiny-code code[class="remark-code"])?
---
title: Check this out
output:
xaringan::moon_reader:
seal: false
---
```{css, echo=FALSE}
.tiny {
font-size: .6rem;
font-weight: 200;
}
.huge {
font-size: 2.6rem;
font-weight: 200;
}
/* Tiny R block of code */
.tiny-code code.r {
font-weight: bold;
font-size: .3rem;
}
/* Tiny ouput */
.tiny-code code[class="remark-code"] {
font-size: .3rem;
display: block;
border: 0px solid red;
}
```
# Check this slide out
.tiny[get the **best estimation** of the parameters ( $\beta$ s), become a heRo]
.huge[this is huge]
.tiny-code[
```{r}
mtcars[1:5, "mpg"]
```
]
I found that this:
<span class="tiny">get the **best estimation** of the parameters ( $\beta$ s), become a heRo.</span>
works, but is there a way not to use html and write Markdown only?
Ok, found it...
.tiny[get the **best estimation** of the parameters ( \(\beta\) s), become a heRo]
Source here
.tiny[get the best estimation of the parameters ( \\(\beta\\) s), become a heRo]
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:
Is there an option I can provide to code chunks in RMarkdown so that it will have a cell number attached to the HTML output. Much like Jupyter has cell numbers.
I've seen some example with line numbering which is not what I want.
Using cell numbers is helpful when I'm discussing an RMarkdown HTML file over the phone with someone. I can ask him/her to see cell 23. I have a lot of R code, so providing section titles, while possible, is tedious.
Here's a solution using only CSS. It relies on CSS counters: each new R chunk increments the counter (named counter-rchunks).
You can knit the following minimal Rmd file and get this result:
---
title: "Counter for chunks"
author: "Romain Lesur"
output: html_document
---
```{css, echo=FALSE}
body {
counter-reset: counter-rchunks;
}
div.main-container {
padding-left: 5em;
}
pre.r {
counter-increment: counter-rchunks;
position: relative;
overflow: visible;
}
pre.r::before {
content: 'In [' counter(counter-rchunks) ']: ';
display: inline-block;
position: absolute;
left: -5em;
color: rgb(48, 63, 159);
}
```
```{r cars}
summary(cars)
```
```{r head-cars}
head(cars)
```
You may have to adapt this solution to your HTML template.
You also can insert these CSS rules to a .css file and includes it in your html_document.
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;
}
```