如何在 Markdown 中使用 CSS？

Question

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

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

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 文档中使用Font Awesome 图标的一种方法，该文档以markdown（带有knitr）编写。为了能够在github 上正确显示生成的html 文档，我使用了一种解决方法，即链接到htmlpreview.github.io/?（如niutech 所述here）：

1. 下载 Font Awesome here 并解压缩到您还保存了 .Rmd 文件的本地存储库中。
2. 通过将font-awesome-4.4.0/css/font-awesome.css 添加到.Rmd 文件的标题中，告诉markdown 使用哪个.css 文件。 注意：您可能需要将版本号更改为 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 文件的URL。

这是一个最小的工作示例（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

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}

Answer 4

首先，大部分markdown实现都允许你使用plain html

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

据我所知，fontawesome 总是需要前导<i>-tag。其他图标字体（如weloveiconfonts）将图标添加到现有的html标签<h2 class="zocial-dribbble">text</h2>，在markdown-extra中：## text {.zocial-dribbble}。