如何在Markdown中使用CSS? [英] How to use CSS in Markdown?

问题描述

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

I want to use a CSS class in a Markdown file.

例如，如果我将其CSS文件导入HTML，则<i class="icon-renren"></i>(来自fontawesome)应显示为图标.

For instance, <i class="icon-renren"></i> (from fontawesome) should be displayed as an icon if I import its CSS file in HTML.

Markdown是否有解决方案?

Is there any solution in Markdown?

推荐答案

编辑:如果您想在R Markdown(或Shiny Apps)中包含FontAwesome图标，现在有一个程序包可以精确执行: https://github.com/rstudio/fontawesome .下面的答案较为笼统(不限于R Markdown或FontAwesome)，但有些解决方法.

If you want to include FontAwesome icons in R Markdown (or Shiny Apps), there is now a package to do exactly that: https://github.com/rstudio/fontawesome. The answer below is more general (not limited to R Markdown or FontAwesome) but somewhat of a workaround.

未在Gitbook中进行测试，但是我希望它在github上也能正常工作.

Not tested in Gitbook but i hope this works just as well as on github.

这是在markdown(带有knitr)编写的html文档中使用 Font Awesome 图标的一种方法.为了能够在github上正确显示生成的html文档，我使用了一种解决方法，即链接到htmlpreview.github.io/?(如 niutech 中所述

Here is one way for using Font Awesome icons in an html document written in markdown (with knitr). To be able to display the resulting html document correctly on github, I used a workaround by linking to htmlpreview.github.io/? (as niutech described here):

1. 下载令人敬畏的字体

1. Download Font Awesome here and unzip into your local repository where you also saved the .Rmd file.
2. Tell markdown which .css file to use by adding font-awesome-4.4.0/css/font-awesome.css into the header of your .Rmd file. Note: you might need to change the version number to something other than 4.4.0.

3. Make sure to specify self_contained: no. jmcphers explained here that this option keeps pandoc from combining multiple files into a single file, which somehow messes up the paths specified in the font-awesome.css file.

在您的.Rmd文档中，包含指向http://htmlpreview.github.io/?/url_to_html_on_github的链接，在该链接中，您将url_to_html_on_github替换为github中html文件的URL.

In your .Rmd document, include a link to http://htmlpreview.github.io/?/url_to_html_on_github where you replace url_to_html_on_github with the url to your html file on github.

这是一个最小工作示例((fa-5x只是使图标变大，如

Here is a minimal working example (fa-5x just makes the icon larger, as described in 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>. 

及其结果预览(另请参见此github存储库) :

And the resulting preview (see also this github repository):

这篇关于如何在Markdown中使用CSS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！