Я хочу использовать класс CSS
в файле Markdown
,
Например, <i class="icon-renren"></i>
(от fontawesome
), должен отображаться как значок, если я импортирую его CSS
файл в HTML
.
Любое решение в Markdown
?
Я хочу использовать класс CSS
в файле Markdown
,
Например, <i class="icon-renren"></i>
(от fontawesome
), должен отображаться как значок, если я импортирую его CSS
файл в HTML
.
Любое решение в Markdown
?
Изменить: если вы хотите включать значки 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 описано здесь):
.Rmd
..css
следует использовать, добавив font-awesome-4.4.0/css/font-awesome.css
в заголовок вашего файла .Rmd
. Примечание: вам может потребоваться изменить номер версии на другой, чем 4.4.0. Обязательно укажите self_contained: no
. jmcphers объяснил здесь, что этот параметр позволяет pandoc
объединять несколько файлов в один файл, что каким-то образом смешивает пути, указанные в файле font-awesome.css
.
В документе .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):
Прежде всего, большинство реализаций уценки позволяют использовать простой html
Где, как некоторые реализации уценки, вы предлагаете дополнительный синтаксис для атрибутов, таких как идентификаторы и классы (например, php-markdown {#id.class}
для элементов блока)
Насколько мне известно, fontawesome всегда нуждается в ведущем <i>
-tag. Другие значки (например, weloveiconfonts) добавляют значок к существующему тегу html <h2 class="zocial-dribbble">text</h2>
, в markdown-extra: ## text {.zocial-dribbble}
.
Самый простой способ добавить пользовательские стили 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}