2014-11-27 10 views
5

मैं Markdown फ़ाइल में CSS वर्ग का उपयोग करने,मार्कडाउन में सीएसएस का उपयोग कैसे करें?

उदाहरण के लिए, <i class="icon-renren"></i> (fontawesome से), एक आइकन के रूप में प्रदर्शित किया जाना चाहिए अगर मैं HTML में अपनी CSS फ़ाइल आयात करना चाहते हैं।

Markdown में कोई समाधान?

उत्तर

1

सबसे पहले, markdown कार्यान्वयन के सबसे आप का उपयोग करने की अनुमति plain html

कहाँ कुछ markdown कार्यान्वयन, आप विशेषताओं के लिए एक अतिरिक्त वाक्य रचना की पेशकश के रूप में आईडी और वर्गों (ब्लॉक तत्वों के लिए जैसे php-markdown{#id .class})

की तरह

जहां तक ​​मुझे पता है, Fontawesome हमेशा अग्रणी <i> -tag की आवश्यकता है। अन्य आइकनफॉन्ट (जैसे weloveiconfonts) आइकन को मौजूदा HTML टैग <h2 class="zocial-dribbble">text</h2> पर मार्कडाउन-अतिरिक्त में जोड़ें: ## text {.zocial-dribbble}

+0

मैं 'गिटबुक' में 'fontawesome' का उपयोग करना चाहता हूं, कोई समाधान? – chenzhongpu

+0

आप स्टाइलशीट का संदर्भ कैसे देते हैं? –

1

Gitbook में परीक्षण नहीं किया गया है, लेकिन मुझे उम्मीद है कि यह github पर भी काम करेगा।

यहाँ एक html दस्तावेज़ markdown में लिखा (knitr के साथ) में फ़ॉन्ट बहुत बढ़िया माउस का उपयोग कर के लिए एक तरीका है। github पर सही ढंग से जिसके परिणामस्वरूप html दस्तावेज़ प्रदर्शित करने के लिए सक्षम होने के लिए, मैं htmlpreview.github.io/? से लिंक करके एक समाधान के लिए प्रयोग किया जाता (रूप niutech वर्णित here): अपने स्थानीय भंडार में

  1. डाउनलोड फ़ॉन्ट बहुत बढ़ियाhere और अनज़िप जहां .Rmd फ़ाइल को भी सहेजा गया।
  2. अपने .Rmd फ़ाइल के शीर्षलेख में font-awesome-4.4.0/css/font-awesome.css जोड़कर उपयोग करने के लिए .css फ़ाइल को चिह्नित करें। नोट: आपको संस्करण संख्या को 4.4.0 के अलावा किसी अन्य चीज़ में बदलने की आवश्यकता हो सकती है।
  3. self_contained: no निर्दिष्ट करना सुनिश्चित करें। jmcphers ने here समझाया कि यह विकल्प एकाधिक फ़ाइलों को एक फ़ाइल में जोड़ने से pandoc रखता है, जो किसी भी तरह font-awesome.css फ़ाइल में निर्दिष्ट पथ को गड़बड़ कर देता है।

  4. अपने .Rmd दस्तावेज़ में, जहां GitHub पर अपने html फाइल करने के लिए यूआरएल के साथ url_to_html_on_github की जगह http://htmlpreview.github.io/?/url_to_html_on_github के लिए एक लिंक शामिल हैं।

यहाँ एक न्यूनतम काम कर उदाहरण है (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 देखें):

enter image description here

संबंधित मुद्दे