如何在Markdown中使用CSS？

Question

我想在CSS文件中使用Markdown类，

例如，如果我在<i class="icon-renren"></i>中导入fontawesome文件，则CSS（来自HTML）应显示为图标。

Markdown中的任何解决方案？

Answer 1

您可以像往常一样在标记中使用 html。

<style>
mark{
    color:red;
}
</style>

<mark>what is DataBase</mark>

Answer 2

编辑：如果您想在R Markdown（或Shiny Apps）中加入FontAwesome图标，现在有一个包可以做到这一点：https://github.com/rstudio/fontawesome。下面的答案更为通用（不限于R Markdown或FontAwesome），但有些解决方法。

未在Gitbook中进行过测试，但我希望这与github一样有效。

以下是在html（markdown编写的knitr文档中使用 Font Awesome 图标的一种方法。为了能够在html上正确显示生成的github文档，我使用了一种解决方法，链接到htmlpreview.github.io/?（如 niutech 所述here） ：

1. 下载 Font Awesome here并解压缩到您保存.Rmd文件的本地存储库。
2. 通过在.css文件的标头中添加font-awesome-4.4.0/css/font-awesome.css，告诉标记要使用哪个.Rmd文件。 注意：您可能需要将版本号更改为4.4.0以外的版本号。

3. 请务必指定self_contained: no。 jmcphers 解释here此选项使pandoc不会将多个文件合并为一个文件，这会以某种方式混淆font-awesome.css文件中指定的路径。

4. 在您的.Rmd文档中，添加http://htmlpreview.github.io/?/url_to_html_on_github的链接，将url_to_html_on_github替换为github上html文件的网址。

以下是最小工作示例（fa-5x只是将图标放大，如these examples中所述）：

---
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>. 

结果预览（另见this github repository）：

Answer 3

首先，大多数降价实施允许您使用plain html

某些降价实现为您提供了属性的附加语法，例如ID和类（例如，对于块元素php-markdown {#id .class}）

据我所知，fontawesome总是需要领先的<i> - 标签。其他图标字体（例如weloveiconfonts）会将图标添加到现有的html标记<h2 class="zocial-dribbble">text</h2>中，标记为额外：## text {.zocial-dribbble}。

Answer 4

最简单的add custom css styles is to use Pandoc attributes syntax (which can convert Markdown to html, pdf, pppt and more)

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}