Wie verwende ich CSS in Markdown?

Question

Ich mag CSS Klasse in Markdown-Datei verwenden,

Zum Beispiel <i class="icon-renren"></i> (von fontawesome) sollte als Symbol angezeigt werden, wenn ich seine CSS Datei in HTML importieren.

Irgendeine Lösung in Markdown?

Answer 1

Vor allem die meisten der Abschlags-Implementierungen können Sie plain html

Wo verwenden, da einige Abschlags Implementierungen bieten Ihnen eine zusätzliche Syntax für Attribute, wie IDs und Klassen (zB php-markdown{#id .class} für Blockelemente)

Soweit ich weiß, benötigt fontawesome immer das führende <i> -Tag. Andere Iconfonts (wie weloveiconfonts) fügen das Symbol zu einem vorhandenen HTML-Tag hinzu <h2 class="zocial-dribbble">text</h2>, in markdown-extra: ## text {.zocial-dribbble}.

Answer 2

Nicht in Gitbook getestet, aber ich hoffe, das funktioniert genauso gut wie auf github.

Hier ist eine Möglichkeit für die Verwendung von Font Super Icons in einem html Dokument in markdown geschrieben (mit knitr). Um das resultierende html Dokument korrekt auf github anzuzeigen, habe ich eine Abhilfe durch die Verknüpfung zu htmlpreview.github.io/? (wie niutech beschrieben here):

1. Herunterladen Font Ehrfürchtighere und entpacken Sie in Ihrem lokalen Repository, in dem speicherte auch die Datei .Rmd.
2. Sagen Abschlag die .css Datei von font-awesome-4.4.0/css/font-awesome.css in den Header Ihrer .Rmd Datei hinzufügen zu verwenden. Hinweis: Sie müssen möglicherweise die Versionsnummer auf etwas anderes als 4.4.0 ändern.

3. Achten Sie darauf, self_contained: no anzugeben. jmcphers erklärt here, dass diese Option hält pandoc von der Kombination mehrerer Dateien in einer einzigen Datei, die irgendwie die Pfade in der font-awesome.css Datei angegebenen versagt.

4. In Ihrem .Rmd Dokument einen Link zu http://htmlpreview.github.io/?/url_to_html_on_github wo Sie url_to_html_on_github mit der URL zu Ihrer html Datei auf Github ersetzen.Hier

ist ein minimales Arbeitsbeispiel (fa-5x macht nur das Symbol größer, wie in these examples beschrieben):

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

Und die resultierenden Vorschau (siehe auch this github repository):