Как использовать CSS в Markdown?

Ответ 1

Изменить: если вы хотите включать значки FontAwesome в R Markdown (или Shiny Apps), теперь есть пакет для этого: https://github.com/rstudio/fontawesome. Ответ ниже более общий (не ограничиваясь R Markdown или FontAwesome), но в некоторой степени обходным путем.

Не тестировался в Gitbook но я надеюсь, что это работает так же хорошо, как и на github.

Вот один из способов использования значков шрифта Awesome в html документе, написанном в markdown (с knitr). Чтобы иметь возможность корректно отображать полученный html документ на github, я использовал обходной путь, связав его с htmlpreview.github.io/? (как niutech описано здесь):

1. Скачайте Font Awesome здесь и распакуйте в свой локальный репозиторий, где вы также сохранили файл .Rmd.
2. Скажите уценку, какой файл .css следует использовать, добавив font-awesome-4.4.0/css/font-awesome.css в заголовок вашего файла .Rmd. Примечание: вам может потребоваться изменить номер версии на другой, чем 4.4.0.

3. Обязательно укажите self_contained: no. jmcphers объяснил здесь, что этот параметр позволяет pandoc объединять несколько файлов в один файл, что каким-то образом смешивает пути, указанные в файле font-awesome.css.

4. В документе .Rmd ссылку на http://htmlpreview.github.io/?/url_to_html_on_github где вы заменяете url_to_html_on_github URL-адресом вашего html файла в github.

Вот минимальный рабочий пример (fa-5x просто делает значок больше, как описано в этих примерах):

---
title: "Title"
author: "Author"
date: "DATE"
output: 
  html_document:
     css: font-awesome-4.4.0/css/font-awesome.css
     self_contained: no

---
<i class="fa fa-renren fa-5x"></i>

To preview the correctly rendered html file, click 
<a href="http://htmlpreview.github.io/?https://github.com/FlorianWanders/FAonGitHub/blob/master/MWE.html" title="preview on htmlpreview.github.io" target="_blank">here</a>. 

И полученный предварительный просмотр (см. Также этот репозиторий github):

Ответ 2

Прежде всего, большинство реализаций уценки позволяют использовать простой html

Где, как некоторые реализации уценки, вы предлагаете дополнительный синтаксис для атрибутов, таких как идентификаторы и классы (например, php-markdown {#id.class} для элементов блока)

Насколько мне известно, fontawesome всегда нуждается в ведущем <i> -tag. Другие значки (например, weloveiconfonts) добавляют значок к существующему тегу html <h2 class="zocial-dribbble">text</h2>, в markdown-extra: ## text {.zocial-dribbble}.

Ответ 3

Самый простой способ добавить пользовательские стили CSS - это использовать синтаксис атрибутов Pandoc (который может конвертировать Markdown в html, pdf, pppt и другие)

Heading Identifiers:
### Red text title {#identifier .red}

Fenced Code Attributes:
{.red .numberLines startFrom="1"}

Inline Code Attributes:
'red text'{.red}

Bracketed Spans:
[This is *some red text*]{.red}

Link Attributes:
![alt text](the.jpg){.center}