Home > front end >  How to customize a paragraph with css in RMarkdown
How to customize a paragraph with css in RMarkdown

Time:10-29

---
title: "My study"
output:
  html_document:
    df_print: paged
---

I used the code below to control the text format of my entire document

<style type="text/css">
  body{
  font-size: 14pt;
  font-family: Garamond;
  line-height:1.8;
  
}
</style>

I want now to customize certain paragraphes or subtitles

## SUBTITLE 1 (to color in blue)

.

## SUBTITLE 2 (to color in blue)

.

 { in italic and colored in brown and line-height=1
    My paragraph text My paragraph text My paragraph text My paragraph text My paragraph text
    My paragraph text My paragraph text My paragraph text My paragraph text My paragraph text
    }

CodePudding user response:

Level 2 headings are rendered as h2 html elements. To change the color of all of these headings you could do the following, which will change all ## {insert heading} to have a blue font.

h2 {
  color: blue;
}

To change the color of certain headings, you can create them using html tags and give them a class. Then change the style of the class in the CSS.

HTML:

<h2 class="purple-heading">Some heading</h2>

CSS:

.purple-heading {
  color: purple;
}

To style certain paragraphs, wrap them in a <p> tag and give them a class. Then style the class in CSS.

HTML:

<p class="large-p">A long and very large paragraph.</p>

CSS:

.large-p {
  font-size: 96px;
}

Overall markdown file:

---
title: "test"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

<style type="text/css">
  body{
  font-size: 14pt;
  font-family: Garamond;
  line-height:1.8;
  }
  
  h2 {
    color: blue;
  }
  .purple-heading {
    color: purple;
  }
  
  .large-p {
    font-size: 96px;
  }
</style>

## H2
<h2 >Some heading</h2>
some un-styled text

<p >A long and very large paragraph.</p>

If you have more than a few things to style (and maybe even if you don't) I recommend separating the html/markdown from the CSS. You can create a .css file and change the YAML header as follows:

---
title: "test"
output: 
  html_document:
    css: your_path.css
---
  • Related