在 R Markdown 中渲染原始 HTML

Question

我正在尝试在 R Markdown 文档中包含来自此 JSfiddle 的一小段工作代码：https://fiddle.jshell.net/atypq97m/3/。

有一个用于包含 HTML 的 Pandoc 扩展：http://rmarkdown.rstudio.com/authoring_pandoc_markdown.html#raw_html

我可以渲染 HTML，但我发现这种行为很奇怪。当我从我的 JSfiddle 复制并粘贴代码并将其放入 R Markdown 时，它的功能有所不同。

这是我的代码：

---
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>

如果我删除 HTML 中的 CSS 或类内容呈现（没有功能），但如果我保留 CSS 和类我发现 none 的文字出现了。这表明 Rmarkdown/Pandoc 对 CSS 的解释与 JSfiddle 不同，但我不知道为什么。

Answer 1

不同的行为是因为 class .tooltip 已经在用于 RMarkdown 文档的默认主题中定义。

如果您使用 RMarkdown 的默认主题，那么您会在 bootstrap.css 文件中找到 class 位于（对于 OSX 用户）：

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

这是你会发现的：

.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;
}

在 R Markdown 中渲染原始 HTML

render raw HTML in R Markdown

html

css

pandoc

knitr

r-markdown