создание пользовательских блоков в книге RStudio bookdown

Я экспериментирую с новым новым пакетом bookdown, чтобы создать книгу в стиле gitbook, используя RMarkdown в RStudio. См. here.создание пользовательских блоков в книге RStudio bookdown

Мой вопрос о создании custom blocks. Существует пример в документации о том, как определить стиль блока в файле CSS:

div.FOO { 
    font-weight: bold; 
    color: red; 
}

И авторы дают некоторые примеры того, что блоки могут выглядеть.

AFAIK, не существует пример того, как определить этот конкретный блок с иконкой. Я мало что знаю о CSS, поэтому я ищу что-то, что я могу изменить.

Я бы хотел использовать font awesome icons, как Leanpub, чтобы создать специальные боковые панели. Любые идеи для создания чего-то вроде этого:

Я думаю, что мне нужно, чтобы скопировать каталог fontawesome, укажите путь к CSS файл включен fontawesome (где-то, не уверен, где), а также использовать <i> тег в моем определении div, например, <i class="fa fa-comment"></i>. Не совсем понятно, как реализовать это, хотя ... или если он даже будет работать.

источник

2016-03-29 Eric Green

Мне было интересно то же самое. Я думаю, что ответ кроется в https://bookdown.org/yihui/bookdown/style.css. Вы можете увидеть пользовательские divs вверху. – Frank

Это интересно, @Frank. Видя 'фон: # f5f5f5 url (" images/caution.png ") left center/3em no-repeat;' заставил меня искать, как использовать значки шрифтов в CSS. Изучение этого [SO ответ] (http://stackoverflow.com/questions/14736496/use-font-awesome-icons-in-css). –

Используя [эту страницу] (http://fontawesome.io/cheatsheet/), я вижу, что код для значка комментария - 'fa-comment [& # xf075;]'. [Этот пример] (http://codepen.io/astrotim/pen/IjJzL) показывает, как использовать ': after', одно из предложений в ответе SO, на который я ссылаюсь. '#wrap: after {content:" \ f075 "; font-family: FontAwesome;} 'Я не совсем понимаю, как его использовать, но похоже, что мы движемся в правильном направлении. –

@Frank's tip (см. his solution для использования локальных изображений), я смог придумать следующее.

Я добавил это в файл style.css в корневом каталоге моей книги на основе этой SO answer и this specific example:

.rmdcomment { 
    padding: 1em 1em 1em 4em; 
    margin-bottom: 10px; 
    background: #f5f5f5; 
    position:relative; 
} 

.rmdcomment:before { 
    content: "\f075"; 
    font-family: FontAwesome; 
    left:10px; 
    position:absolute; 
    top:0px; 
    font-size: 45px; 
}

я получил значение f075 для значка комментария от this FontAwesome cheatsheet.

Затем я загрузил CSS toolkit from FontAwesome и скопировал файл font-awesome.min.css в корень моей книжной директории. Я добавил следующее в мой output.yml файл (в шаблоне я начал с того, style.css, toc.css уже присутствует):

bookdown::html_book: 
    css: [style.css, toc.css, font-awesome.min.css]

Наконец, я вставил код кусок в мой файл RMD используя type вариант:

```{block, type='rmdcomment'} 
Some text for this block. Some text for this block. Some text for this block. Some text for this block. Some text for this block. Some text for this block. 
```

источник

2016-03-31 20:56:05

создание пользовательских блоков в книге RStudio bookdown

ответ

Смежные вопросы