Trouble Making Text italic when rendering an HTML document from Rmd via RStudio

Question

I am trying to create an ioslides presentation from Rmd in RStudio but the italic and bold formatting does not appear to be working (the asterisk and double asterisk). If I render to HTML, they work.

I can change text colors using CSS, but I cannot bold or italicize text. In the code below, in both cases (ioslides_presentation and html_document), the word "Markdown" comes out orange, but only in the html_document case is the text italicized.

I am running on a Mac with the latest version of RStudio.

CSS file:

.mystuff {
    color: orange;
}

Rmd file:

---
title: "Untitled"
output:
  ioslides_presentation:
    css: styles.css
date: "12/16/2016"
---


## R Markdown 

This is an R *<span class="mystuff">Markdown</span>* 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>

Answer 1

The problem here, I believe, is that the default ioslides styling for <em> text does not actually italicize it. The default ioslides styling has:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
}

And, in particular, the font: inherit; bit overrides the default font-style: italic; CSS styling usually applied to <em> elements.

You should be able to resolve this with an explicit font-style: italic; on your class.

Answer 2

the same idea, just force italic in your custom styles.css

em {
    font-style: italic !important;
}