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
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'm creating an Html report from RMarkdown applying some simple css and I'm facing some issues when printing output report. Browser version applies correctly css but printed version doesn't. This would be a reproducible example of RMarkdown code:
---
title: "Table"
output:
html_document:
css: "test.css"
---
```{r}
library(knitr)
data(iris)
kable(iris)
```
And this is the content of my test.css file:
.main-container {
max-width: 1600px !important;
}
tr:nth-child(even) {background-color: #f2f2f2}
th {
background-color: #FF6319;
color: white;
font-size: 12px;
}
tbody {
font-size: 12px;
}
hr {
page-break-after: always;
}
How can I manage to get the same results in browser output than in printing output? I tried even checking backgroung graphics option in Chrome printing menu, but nothing changes.
Thank you.
I guess the problem is related to "background-color" and "background-image" properties that are ignored by default on many browsers (when printing).
For chrome you can add the following code to your print css, in firefox and IE you must select "print background" in the print dialog.
:root {
-webkit-print-color-adjust: exact;
}
You can do it like that in HTML:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
#media print {
tr:nth-child(even) {
background-color: #f2f2f2 !important;
-webkit-print-color-adjust: exact;
}
th {
background-color: #FF6319 !important;
-webkit-print-color-adjust: exact;
}
}
I'm toying bookdown to write some documentation for pixiedust that I feel might be a bit too lengthy for a vignette. I like the layout of bookdown::gitbook, but that, unfortunately, comes with its own table styling that is problematic for me. Since pixiedust is all about styling tables, it is a little challenging to show what pixiedust has done (or hasn't done) with the default gitbook styling.
I've tried clearing the CSS with guidance from
R bookdown gitbook - how to override table style
and
How to change the code padding effect of gitbook?
I've had no luck with putting the css code in a css file in my root directory and putting the file name in the css YAML tag. I've had no luck with making a styles subdirectory. And the version below hasn't worked either.
---
title: "Sample Book"
output:
bookdown::gitbook:
config:
toc:
collapse: section
scroll_highlight: true
before: null
after: null
theme: null
css: ".book .book-body .page-wrapper .page-inner section.normal table td, .book .book-body .page-wrapper .page-inner section.normal table th { border-left: none; border-right: none; }"
---
```{r, warning = FALSE, message = FALSE, echo = FALSE}
library(pixiedust)
dust(head(mtcars))
```
Everything I've tried produces a table that looks like
What I'd like is something that looks like
At the moment, my root directory is empty save for the index.Rmd file with the code given above.
I'm using R 3.2.2 and bookdown 0.3
Probably not the best solution but you can remove some of the styling by replacing it with some "default" CSS in your markdown above the chunk displaying the table:
```{r results="asis", echo=FALSE}
cat("
<style>
.book .book-body .page-wrapper .page-inner section.normal table
{
width:auto;
}
.book .book-body .page-wrapper .page-inner section.normal table td,
.book .book-body .page-wrapper .page-inner section.normal table th,
.book .book-body .page-wrapper .page-inner section.normal table tr
{
padding:0;
border:0;
background-color:#fff;
}
</style>
")
```
You can look for CSS resets and add more if you need to.
You could define a css reset class. Either with a bunch of properties you care about or try the new all attribute if internet explorer support is not important to you.
.reset{
all: initial;
}
Or
.reset{
border: initial;
padding: initial;
...
}
Then apply to the table:
<table class="reset">
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: