сделать необработанный HTML-код в R Markdown

Question

Я пытаюсь включить короткую часть рабочего кода из этого JSfiddle: https://fiddle.jshell.net/atypq97m/3/ в документ R Markdown.

Существует расширение 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> 

Если удалить CSS или классы в HTML содержание делает (без функциональности), но если я сохраняю CSS и классы я считаю, что ни один из появится текст. Это означает, что Rmarkdown/Pandoc интерпретирует CSS иначе, чем JSfiddle, но я не знаю, почему.

Answer 1

Различное поведение является результатом того, что класс .tooltip уже определен в теме по умолчанию, используемой для документов RMarkdown.

Если вы используете тему по умолчанию для 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; 
}