How to use CSS in Markdown?
you can use html in your mark down as normal.
<style>
mark{
color:red;
}
</style>
<mark>what is DataBase</mark>
Edit: If you want to include FontAwesome icons in R Markdown (or Shiny Apps), there is now a package to do exactly that: https://github.com/rstudio/fontawesome. The answer below is more general (not limited to R Markdown or FontAwesome) but somewhat of a workaround.
Not tested in Gitbook
but i hope this works just as well as on github
.
Here is one way for using Font Awesome icons in an html
document written in markdown
(with knitr
). To be able to display the resulting html
document correctly on github
, I used a workaround by linking to htmlpreview.github.io/?
(as niutech described here):
- Download Font Awesome here and unzip into your local repository where you also saved the
.Rmd
file. - Tell markdown which
.css
file to use by addingfont-awesome-4.4.0/css/font-awesome.css
into the header of your.Rmd
file. Note: you might need to change the version number to something other than 4.4.0. Make sure to specify
self_contained: no
. jmcphers explained here that this option keepspandoc
from combining multiple files into a single file, which somehow messes up the paths specified in thefont-awesome.css
file.In your
.Rmd
document, include a link tohttp://htmlpreview.github.io/?/url_to_html_on_github
where you replaceurl_to_html_on_github
with the url to yourhtml
file on github.
Here is a minimal working example (fa-5x
just makes the icon larger, as described in these examples):
---
title: "Title"
author: "Author"
date: "DATE"
output:
html_document:
css: font-awesome-4.4.0/css/font-awesome.css
self_contained: no
---
<i class="fa fa-renren fa-5x"></i>
To preview the correctly rendered html file, click
<a href="http://htmlpreview.github.io/?https://github.com/FlorianWanders/FAonGitHub/blob/master/MWE.html" title="preview on htmlpreview.github.io" target="_blank">here</a>.
And the resulting preview (see also this github repository):
The simplest way to add custom css styles is to use Pandoc attributes syntax (which can convert Markdown to html, pdf, pppt and more)
Heading Identifiers:
### Red text title {#identifier .red}
Fenced Code Attributes:
{.red .numberLines startFrom="1"}
Inline Code Attributes:
`red text`{.red}
Bracketed Spans:
[This is *some red text*]{.red}
Link Attributes:
![alt text](the.jpg){.center}