如何在Markdown中使用CSS？

Question

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

例如,如果我导入其文件,<i class="icon-renren"></i>(from fontawesome)应显示为图标.CSSHTML

任何解决方案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。

这是在（带有）编写的文档中使用“ 真棒字体”图标的一种方法。为了能够在上正确显示生成的文档，我通过链接到（如niutech 此处所述）使用了一种解决方法：htmlmarkdownknitrhtmlgithubhtmlpreview.github.io/?

1. 在此处下载“ 真棒字体” ，并将其解压缩到您还保存.Rmd文件的本地存储库中。
2. .css通过添加font-awesome-4.4.0/css/font-awesome.css到.Rmd文件的标头中，告诉markdown 使用哪个文件。注意：您可能需要将版本号更改为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为htmlgithub上文件的URL的链接。

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

Answer 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}

Answer 4

首先，大多数 Markdown 实现都允许您使用纯 html

一些 Markdown 实现为您提供了额外的属性语法，例如 ids 和类（例如用于块元素的php-markdown ） {#id .class}

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