While we can automate number section by adding the option number_sections: true to in the YAML header, I wonder if we can change the headings style in r markdown. For example, can we customise it with letters like following?
A. Section A
A.1 Subsection
A.1.1 Sub subsection 1
A.1.2 Sub subsection 1
B. Section B
B.1 Subsection
B.1.1 Sub subsection
Answer for pdf_document
Save this line in an external file (e.g. inheader.tex):
\renewcommand{\thesection}{\Alph{section}}
and insert the file in document's header with:
---
title: "Lettered sections"
output:
pdf_document:
number_sections: true
includes:
in_header: inheader.tex
---
Answer for html_document format
tl;dr
Knit this Rmd file:
---
title: "Lettered sections"
output: html_document
---
```{css, echo=FALSE}
.header-section-number {
display: none;
}
body {
counter-reset: counter-level-1;
}
h1:not(.title) {
counter-increment: counter-level-1;
counter-reset: counter-level-2;
}
h1:not(.title)::before{
content: counter(counter-level-1, upper-alpha) ". ";
}
h2 {
counter-increment: counter-level-2;
counter-reset: counter-level-3;
}
h2::before {
content: counter(counter-level-1, upper-alpha) "." counter(counter-level-2) " ";
}
h3 {
counter-increment: counter-level-3;
}
h3::before {
content: counter(counter-level-1, upper-alpha) "." counter(counter-level-2) "." counter(counter-level-3) " ";
}
```
# Section
## Subsection
### Sub subsection
### Sub subsection
## Subsection
# Section
## Subsection
### Sub subsection
## Subsection
Explanations
Number sections is a native pandoc's option. It seems that pandoc does not provide any support for hierarchical headings customisation.
So, there are three options with HTML output:
deeply dive into pandoc and develop a new writer, because hierarchical headings are declared as integers see here, line #105. Note there's a relevant recent issue in order to facilitate headings customisation.
modify HTML rendering using CSS.
modify HTML elements with Javascript. This may be necessary for toc: true.
This answer provides an example of hierarchical headings customisation with CSS. It is recommended to save all the CSS code (i.e. lines 7 to 39) to an external file with .css extension and include it in HTML report using this YAML header:
---
title: "Lettered sections"
output:
html_document:
css: "filename.css"
---
Additional note
One can use other counters than numeric or alpha, see here for a list.
You also can define your own set of counter with #counter-style.
Related
I would like to apply a style to Quarto chunk output.
The first thing I made was to embed some CSS properties in a class .output in the Quarto document and then referenced it with :
```{r class.output="output"}
```
It worked, but I think it's not very efficient because I have to write it within each doc.
So I wrote a class .output with some CSS properties in a custom.scss file, but now
```{r class.output="output"}
```
doesn't work.
So where and how have I to declare it?
Many thanks!
Using a CSS style file to define CSS properties for quarto chunk output should suffice unless you want to build a custom theme (and in that case, you should use SCSS)
So write the CSS properties for a class selector in a styles.css file and use css YAML key to refer to this styles.css from a quarto document file.
style.css
.output {
color: green;
background-color: black;
}
quarto-doc.qmd
---
title: "Output-style"
format:
html:
css: styles.css
---
```{r}
#| class-output: output
x = "hello quarto"
print(x)
1 + 1
```
You can add options to executable code like this
```{r}
#| class-output: output
2 * 2
```
Now for the case of SCSS, to refer to a scss file, you need to use theme yaml key instead of css.
custom_style.scss
/*-- scss:rules --*/
.output {
color: green;
background-color: black;
}
quarto-doc.qmd
---
title: "Output-style"
format:
html:
theme: output_style.scss
---
```{r}
#| class-output: output
x = "hello quarto"
print(x)
1 + 1
```
And the output is similar as the above.
When using the cleanrmd package for R Markdown, the output html page is left-aligned if I specify the theme to use, while it's centered when the them is set as NULL.
theme set as NULL
---
title: "TEST"
output:
cleanrmd::html_document_clean:
theme: NULL
---
With a theme specified
---
title: "TEST"
output:
cleanrmd::html_document_clean:
theme: new.css
---
Anyone can help me to fix this?
Specify CSS rule body { margin: 0 auto; padding: 2rem;} for the entire body of the document, which will fix the issue.
---
title: "Title"
author: "Author"
date: "Date"
output:
cleanrmd::html_document_clean:
theme: new.css
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
```{css, echo = FALSE}
body {
margin: 0 auto;
max-width: 750px;
padding: 2rem;
}
```
## R Markdown
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.
Rendered output looks like,
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.
I am working on creating a resume in R using Pagedown. Currently, the default is to have your name in all capital letters at the top of the first page (e.g. JANE DOE). However, this doesn't look great with my name and I am wondering if there is a way to edit just the title line to have mixed case (Jane Doe). Thanks!
It is possible to remove the uppercase text transformation with CSS like that:
---
title: "Lijia Yu's resume"
author: Lijia Yu
date: "`r Sys.Date()`"
output:
pagedown::html_resume:
# set it to true for a self-contained HTML page but it'll take longer to render
self_contained: false
# uncomment this line to produce HTML and PDF in RStudio:
#knit: pagedown::chrome_print
---
```{css, echo=FALSE}
#title h1 {
text-transform: unset;
}
```
Aside
================================================================================
...
I know how to change R markdown style with a custom css file. However, when the changes are minor, I prefer internal or even inline css, to save trouble from managing two files. I googled and haven't find a solution for this. Below is a simple example of changing style with an external css file. Is there a way to do it with internal or inline css?
The R markdown file:
---
title: "test"
output:
html_document:
css: test.css
---
## Header 1 {#header1}
But how to change style with internal css?
The test.css file:
#header1 {
color: red;
}
Markdown accepts raw HTML and passes it through unaltered, so define your "styled" elements as HTML:
<h2 style="color: red;">Header 1</h2>
Of course, some tools don't actually allow the raw HTML to be passed through (for security reasons or because the final output is not HTML), so your mileage may vary.
Depending on the Markdown implementation you are using, you may be able to define styles in the attribute list (if it supports arbitrary keys):
## Header 1 {style="color: red;"}
However, that is the least likely to work.
And remember, HTML <style> tags do not need to be in the document <head> to work. If you can use raw HTML, you can include a <style> element in the body of your document (as pointed out by #user5219763 in a comment):
---
title: "test"
output:
html_document
---
<style>
#header1 {
color: red;
}
</style>
## Header 1 {#header1}
But how to change style with internal css?
If you don't want to create an external .css file, but would like to define several styles and would rather keep your code less crowded, another possibility is to use a css chunk at the beginning of your R markdown:
---
title: "test"
output: html_document
---
```{css, echo = FALSE}
#header1 {
color: red;
}
```
## Header 1 {#header1}
In the css chunk, you can control multiple styles, as you would do in an external .css file.
Another, sort of hacky option is to specify a css file in the script, then create it in the first chunk.
e.g. the first 18 lines of your .Rmd file:
---
title: "Something Important"
output:
html_document:
css: mystyle.css
---
```{r b, echo=F}
writeLines("td, th { padding : 6px }
th { background-color : coral ;
color : white;
border : 1px solid white; }
td { color : black ;
border : 1px solid skyblue }
h1, h2, h3, h4, h5, p { font-family: consolas; ",
con = "mystyle.css")
```
In the above, I first reference the file mystyle.css in the header block of markdown. Then, I create the file using writeLines(), and save it to the file specified with con = ....
Personally, I think the best option is to just throw your code in between some <script></script> tags if it's a one-off R script.
However, if you do want to create an external file, but don't want to edit a separate file, the above method provides a workaround. It just feels odd.