<p><div><div><div><div data-width="100" data-show-faces="false" data-send="true" data-layout="button_count" data-height="21" data-href="https://www.r-bloggers.com/use-css-to-format-markdown-or-html-files/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="http://educate-r.org//2017/01/03/highlighthtml.html"> Educate-R - R</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<p>Markdown (and Rmarkdown) are great ways to quickly develop material without worrying about the formatting. The documents can then be compiled using the <code>knitr</code> or <code>rmarkdown</code> packages to output formats such as HTML, latex, or even word. The main drawback of this approach is that formatting of documents is limited to italics, bold, or strikethrough. Markdown does have support for inline HTML, therefore you can add your own formatting inline using CSS or other HTML attributes, however this moves away from the quick markdown flavor.</p>
<p>To help solve this problem, many R packages are useful for formatting tables, either through conditional formatting or otherwise. The most interesting to me is the <a target="_blank" rel="nofollow" href="https://renkun.me/formattable/">formattable</a> package. Other options include the <a target="_blank" rel="nofollow" href="http://davidgohel.github.io/ReporteRs/">ReporteRs</a> and <a target="_blank" rel="nofollow" href="https://cran.r-project.org/web/packages/condformat/index.html">condformat</a> packages. These packages however focus on table formatting. An option I started working on a few years ago, <a target="_blank" rel="nofollow" href="https://github.com/lebebr01/highlightHTML">highlightHTML</a>, is a relatively simple package that will help inject CSS automatically into an HTML document to take care of formatting of text and tables.</p>
<p>Since this package uses CSS for the formatting, knowledge of CSS is required to create the tags to be injected. This has the advantage of allowing users a lot of flexibility with the look they wish to achieve, however, it will be more difficult for users if they do not know CSS. Below is a short demo of functions of interest.</p>
<h2>Installation</h2>
<p>The package was published on CRAN a few days ago and can be installed using <code>install.packages</code>:</p>
<pre><code>install.packages('highlightHTML')
</code></pre>
<p>To get the most out of the package, <code>rmarkdown</code> and <code>knitr</code> are useful to have installed as well, although not required.</p>
<h2>Simple Example</h2>
<p>Suppose you have a table like the following:</p>
<table>
<thead>
<tr>
<th> Color Name </th>
<th> Number </th>
</tr>
</thead>
<tbody>
<tr>
<td> Blue </td>
<td> 5 </td>
</tr>
<tr>
<td> Green </td>
<td> 35 </td>
</tr>
<tr>
<td> Orange </td>
<td> 100 </td>
</tr>
<tr>
<td> Red </td>
<td> 200 </td>
</tr>
</tbody>
</table>
<p>You could then add some conditional formatting by adding the following tags to the table.</p>
<table>
<thead>
<tr>
<th> Color Name </th>
<th> Number </th>
</tr>
</thead>
<tbody>
<tr>
<td> Blue </td>
<td> 5 #bgblue </td>
</tr>
<tr>
<td> Green </td>
<td> 35 </td>
</tr>
<tr>
<td> Orange </td>
<td> 100 </td>
</tr>
<tr>
<td> Red </td>
<td> 200 #bgred </td>
</tr>
</tbody>
</table>
<p>The addition of the <em>#bgblue</em> and <em>#bgred</em> indicates which cells will be changed. After turning the markdown document into an html file, this package can now be used to post-process the html file. The post-processing will add an id value for each cell with the <em>#bgblue</em> or <em>#bgred</em> and remove those from the table.</p>
<p>The function to use for the post-processing is <code>highlight_html</code> and requires three arguments, the input file, the output file, and the CSS tags themselves. This will look something like the following using an example file from the package:</p>
<pre><code>library(highlightHTML)
file &lt;- system.file('examples', 'bgtable.html', 
                    package = 'highlightHTML')
tags &lt;- c(&quot;#bgred {background-color: #FF0000;}&quot;, 
  &quot;#bgblue {background-color: #0000FF;}&quot;)
highlight_html(input = file, 
               output = tempfile(fileext = &quot;.html&quot;), 
               tags = tags,
               update_css = TRUE, 
               browse = TRUE,
               print = FALSE)
</code></pre>
<p>This command will return an HTML file that automatically injects the CSS tags shown above. The new HTML file will add background color to the HTML file as such:</p>
<p><img alt="" src="https://i0.wp.com/educate-r.org//2017/01/03/figs/highlight_table.png?w=456" data-recalc-dims="1"></p>
<h2>Formatting Text</h2>
<p>The package also allows for the formatting of text with CSS as well. The following is markdown text that will be formatted:</p>
<pre><code>Can highlight {#bgblack multiple words}.
</code></pre>
<p>The key is the use of braces following by the CSS id to add to the HTML file. Example usage can be shown with an example file that comes with the package and generated with the following code:</p>
<pre><code>file &lt;- system.file('examples', 'bgtext.html', package = 'highlightHTML')

# Change background color and text color with CSS
tags &lt;- c(&quot;#bgblack {background-color: black; color: white;}&quot;, 
  &quot;#bgblue {background-color: #0000FF; color: white;}&quot;,
  &quot;#colgreen {color: green;}&quot;)

# Post-process HTML file
highlight_html(input = file, output = tempfile(fileext = &quot;.html&quot;),
               tags = tags, update_css = TRUE, browse = TRUE)
</code></pre>
<p>The HTML file would look as follows:</p>
<p><img alt="" src="https://i0.wp.com/educate-r.org//2017/01/03/figs/highlight_text.png?w=456" data-recalc-dims="1"></p>
<h2>Markdown to HTML Directly</h2>
<p>Finally, with help of the <code>rmarkdown</code> package, files can be rendered directly from markdown to an HTML file. Below is an example of this:</p>
<pre><code>file &lt;- system.file('examples', 'mwe.md', package = 'highlightHTML')
tags &lt;- c(&quot;#bgred {background-color: #FF0000; color: white;}&quot;,
   &quot;#bgblue {background-color: #0000FF; color: white;}&quot;,
   &quot;#bgblack {background-color: #000000; color: white;}&quot;,
   &quot;#colgold {color: #FFD700;}&quot;)
highlight_html(input = file, output = tempfile(fileext = '.html'),
  tags = tags, update_css = TRUE, browse = TRUE, render = TRUE)
</code></pre>
<h2>Summary</h2>
<p>The package has a few additional features including the ability to inject tags directly into R tables, see for an example of this. To come are a few basic CSS tags that will be built into the package using specific CSS ids. Bug reports are appreciated and can be logged on GitHub <a target="_blank" rel="nofollow" href="https://github.com/lebebr01/highlightHTML/issues">https://github.com/lebebr01/highlightHTML/issues</a>.</p>
<p>Enjoy!</p>
<p>
<div>
<div>To <strong>leave a comment</strong> for the author, please follow the link and comment on their blog: <strong><a href="http://educate-r.org//2017/01/03/highlighthtml.html"> Educate-R - R</a></strong>.</div>
<hr>
<a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers.com</a> offers <strong><a rel="nofollow" href="https://feedburner.google.com/fb/a/mailverify?uri=RBloggers">daily e-mail updates</a></strong> about <a title="The R Project for Statistical Computing" rel="nofollow" href="https://www.r-project.org/">R</a> news and <a title="R tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/tutorial">tutorials</a> on topics such as: <a title="Data science" rel="nofollow" href="https://www.r-bloggers.com/search/data%20science">Data science</a>, <a title="Big Data" rel="nofollow" href="https://www.r-bloggers.com/search/Big%20Data">Big Data, <a title="R jobs" rel="nofollow" href="https://www.r-users.com/">R jobs</a>, visualization (<a title="ggplot and ggplot2 tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/ggplot2">ggplot2</a>, <a title="Boxplots using lattice and ggplot2 tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/boxplot">Boxplots</a>, <a title="Maps and gis" rel="nofollow" href="https://www.r-bloggers.com/search/map">maps</a>, <a title="Animation in R" rel="nofollow" href="https://www.r-bloggers.com/search/animation">animation</a>), programming (<a title="RStudio IDE for R" rel="nofollow" href="https://www.r-bloggers.com/search/RStudio">RStudio</a>, <a title="Sweave and literate programming" rel="nofollow" href="https://www.r-bloggers.com/search/sweave">Sweave</a>, <a title="LaTeX in R" rel="nofollow" href="https://www.r-bloggers.com/search/LaTeX">LaTeX</a>, <a title="SQL and databases" rel="nofollow" href="https://www.r-bloggers.com/search/SQL">SQL</a>, <a title="Eclipse IDE for R" rel="nofollow" href="https://www.r-bloggers.com/search/eclipse">Eclipse</a>, <a title="git and github, Version Control System" rel="nofollow" href="https://www.r-bloggers.com/search/git">git</a>, <a title="Large data in R using Hadoop" rel="nofollow" href="https://www.r-bloggers.com/search/hadoop">hadoop</a>, <a title="Web Scraping of google, facebook, yahoo, twitter and more using R" rel="nofollow" href="https://www.r-bloggers.com/search/Web+Scraping">Web Scraping</a>) statistics (<a title="Regressions and ANOVA analysis tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/regression">regression</a>, <a title="principal component analysis tutorial" rel="nofollow" href="https://www.r-bloggers.com/search/PCA">PCA</a>, <a title="Time series" rel="nofollow" href="https://www.r-bloggers.com/search/time+series">time series</a>, <a title="finance trading" rel="nofollow" href="https://www.r-bloggers.com/search/trading">trading</a>) and more...
<img height="1" alt="" width="1" src="http://feeds.feedburner.com/~r/RBloggers/~4/ZvoGhZWFuKs"></a></div>