CODEWITHSUNDEEP
htmlcssknitrr-markdownpandoc
Carl
Carl

Reputation: 5779

render raw HTML in R Markdown

I am trying to include a short piece of working code from this JSfiddle: https://fiddle.jshell.net/atypq97m/3/ in a R Markdown document.

There is a Pandoc extension for including HTML according to this: http://rmarkdown.rstudio.com/authoring_pandoc_markdown.html#raw_html

I can render HTML, but I find the behavior is odd. When I copy and paste the code from my JSfiddle, and put it in R Markdown it functions differently.

Here is my code:

---
title: "Untitled"
author: "CG"
date: "6 September 2016"
output: 
  html_document:
    md_extensions: +raw_html
---

<style type="text/css"> 

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

</style>


<div class="tooltip">Hover over me
  <span class="tooltiptext">
    Hello World
  </span>
</div>
<br>
<br>
<br>
<div class="tooltip">Or hover over me
  <span class="tooltiptext">
    Hello World
  </span>
</div>

If I remove the CSS or the classes in the HTML the content renders (without the functionality), but if I keep the CSS and the classes I find that none of the text appears. This indicates that Rmarkdown/Pandoc is interpreting the CSS differently than JSfiddle, but I don't know why.

Upvotes: 2

Views: 2477

Answers (1)

Martin Schmelzer
Martin Schmelzer

Reputation: 23909

The different behavior is a result from the fact that the class .tooltip is already defined in the default theme used for RMarkdown documents.

If you are using the default theme for RMarkdown, then you will find the class inside the bootstrap.css file located at (for OSX users):

/Library/Frameworks/R.framework/Versions/3.3/Resources/library/rmarkdown/rmd/h/bootstrap-3.3.5/css

This is what you will find:

.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  white-space: normal;
  filter: alpha(opacity=0);
  opacity: 0;

  line-break: auto;
}

Upvotes: 2

Related Questions