Question

我试图在这个JS Markdown文档中包含一小段工作代码：https://fiddle.jshell.net/atypq97m/3/。

Pandoc扩展包含HTML，根据：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或HTML中的内容呈现内容（没有功能），但如果我保留CSS和类，我发现没有任何文本出现。这表明Rmarkdown / Pandoc以不同于JSfiddle的方式解释CSS，但我不知道为什么。

Answer 1

不同的行为是因为已经在用于RMarkdown文档的默认主题中定义了类.tooltip这一事实。

如果您使用RMarkdown的默认主题，那么您将在bootstrap.css文件中找到该类（对于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

1 个答案: