How To Change Font Colors In R Markdown
R'due south Named Colors #
R ships with a list of colors with wonderful names, like lightgoldenrod3 and firebrick2. I don't know all of the names and used to turn to an online list of colors and then oft that I put it on a mug.
In R, you can reference the colour by name in nearly any function that applies to colors. They're particularly easy to use in visualizations, like those made with ggplot2, because there are 657 colors and many take 4 variations on the same color hue, indexed by suffixes one to four. For example, there are 4 variations of palevioletred that I'm using in the following plot for each of 4 years of Austin housing sales information.
g_austin_housing + ## A bones ggplot of home sale prices in Austin ## over four years, using the ggplot2::txhousing data scale_color_manual ( values = c ( "palevioletred1" , "palevioletred2" , "palevioletred3" , "palevioletred4" , ) ) 
Utility CSS #
If you're used to working with R's color names, they unfortunately don't align with HTML'southward named colors, which means that yous tin't write a CSS rule similar
h3 . plot-title { colour : palevioletred1 ; } considering palevioletred1 isn't a valid HTML colour. This causes problems if you use an R color name in a role that write CSS files.
I've also been interested lately in utility CSS frameworks, like Tailwinds CSS and Tachyons. What'due south awesome about these frameworks is that they use pocket-sized, single-purpose CSS classes — called utility classes — that can be flexibly applied to your HTML elements. I do most, if not all, of my writing in some variant of markdown, and utility classes let me build small components or slightly adjust appearances without having to write a whole lot of CSS.
Tailwinds looks amazing, but information technology requires a moderately complicated build setup, so I've settled on using Tachyons. In particular, it integrates nicely with xaringan and other R Markdown outputs where a complete CSS framework is in use (like R Markdown with bootstrap). For that reason, I've included it in xaringanExtra, and you lot can add together Tachyons to whatsoever R Markdown document with xaringanExtra::use_tachyons().
Hither's an instance of what y'all can do with utility CSS. If I want to create a uncomplicated box with…
- a edge
- on all sides (
.ba) - that's gray (
.b--gray) - with a medium line width (
.bw2),
- on all sides (
- medium outside margin (
.ma2), - big interior padding (
.pa4), - and a box shadow (
.shadow-i)
…I can apply those classes on the same chemical element. Here are four markdown syntax variations that apply those classes.
xaringan
.b--gray.ba.bw2.ma2.pa4.shadow-one[ Talent is a pursued involvement. Anything that you're willing to do, you can exercise. —Bob Ross ] R Markdown
::: {.b--gray .ba .bw2 .ma2 .pa4 .shadow-1} Talent is a pursued involvement. Anything that you're willing to practice, you tin do. —Bob Ross ::: HTML
< div class = "b--gray ba bw2 ma2 pa4 shadow-one" > < p >Talent is a pursued involvement. Anything that you're willing to practice, you tin practice. </ p > < p >—Bob Ross</ p > </ div > htmltools (R)
htmltools :: div ( form = "b--gray ba bw2 ma2 pa4 shadow-1" , htmltools :: p ( "Talent is a pursued interest." , "Annihilation that yous're willing to practice, yous can do." , ), htmltools :: p ( "—Bob Ross" ) ) CSS
Notation: this isn't the verbal CSS from Tachyons, simply it's very similar.
. b--grey { edge-color : #888888 ; } . ba { border-style : solid ; } . bw2 { border-width : .25 em ; } . ma2 { margin : one.five em ; } . pa4 { padding : 2 em ; } . shadow-1 { box-shadow : iv px four px eight px 0 rgba ( 0 , 0 , 0 , .two ); } Talent is a pursued interest. Anything that yous're willing to practice, you can do.
—Bob Ross
R Colors in CSS #
Wouldn't it exist great to have utility CSS classes that you could apply in xaringan slides and other R Markdown outputs?
@grrrck First of all, I 😻 `xaringanExtra`!
I am looking at the tachyons colors and can't help but think that the palette is rather limited. https://t.co/0BUPGnkrb4
Is there a way to intercept a tachyon with a named R color and generate a proper css with the correct hex code?
— Deemah 🇺🇦 🇳🇴 🇸🇪 (@dmi3k) September x, 2020
I thought this was a great thought, so I put together a set of stylesheets with all of R's named colors equally CSS classes. You can choose any or all of the three stylesheets, depending on your needs, they each work independently.
- r-colors.css Classes for setting foreground and groundwork colors
-
.palevioletred1sets the foreground colour -
.bg-palevioletred1sets the background color
-
- r-colors.hover.css Classes for setting foreground and groundwork colors on hover
-
.palevioletred1-hoversets the foreground color on hover -
.bg-palevioletred1-hoversets the groundwork colour on hover
-
- r-colors.vars.css CSS variables for each color proper name
-
var(--palevioletred1)for utilize in other CSS backdrop
-
For more on how to use the stylesheets, including a searchable table with all of the colors and an interactive color preview, check out the documentation page.
As an instance, allow's update the box example higher up with some color from R. I used the color picker table in the documentation to pick out an interesting colour combination.
CSS
I used the CSS variables stylesheet to add together a new CSS dominion in addition to the CSS in the example above. This class sets the border color for the box to paleturquoise4.
. b--paleturquoise4 { border-color : var ( -- paleturquoise4 ); } The other colors used are steelblue4 (text), mintcream (background), and mediumvioletred (text on hover, from the hover classes stylesheet).
xaringan
.b--grayness.ba.bw2.ma2.pa4.shadow-1.steelblue4.bg-mintcream.mediumvioletred-hover.b--paleturquoise4[ Talent is a pursued interest. Anything that you're willing to exercise, you can do. —Bob Ross ] R Markdown
::: {.b--gray .ba .bw2 .ma2 .pa4 .shadow-1 .steelblue4 .bg-mintcream .mediumvioletred-hover .b--paleturquoise4} Talent is a pursued interest. Anything that you're willing to do, you tin do. —Bob Ross ::: HTML
< div course = "b--gray ba bw2 ma2 pa4 shadow-1 steelblue4 bg-mintcream mediumvioletred-hover b--paleturquoise4" > < p >Talent is a pursued interest. Anything that you're willing to do, you can practise. </ p > < p >—Bob Ross</ p > </ div > htmltools (R)
htmltools :: div ( course = paste ( "b--gray ba bw2 ma2 pa4 shadow-one steelblue4" , "bg-mintcream mediumvioletred-hover b--paleturquoise4" ), htmltools :: p ( "Talent is a pursued interest." , "Anything that you're willing to practise, you can exercise." , ), htmltools :: p ( "—Bob Ross" ) ) Talent is a pursued interest. Anything that you're willing to do, you tin can do.
—Bob Ross
How To Change Font Colors In R Markdown,
Source: https://www.garrickadenbuie.com/blog/r-colors-css/
Posted by: mcclendonantaistry.blogspot.com
0 Response to "How To Change Font Colors In R Markdown"
Post a Comment