क्या मैं मार्कडाउन का उपयोग करके पैराग्राफ पर एक वर्ग का नाम परिभाषित कर सकता हूं?


139

क्या मैं मार्कडाउन का उपयोग करके पैराग्राफ पर एक वर्ग का नाम परिभाषित कर सकता हूं? यदि हां, तो कैसे?


54
मुझे यह पूछने के लिए अधिक सटीक तरीके के बारे में पता नहीं है कि "क्या मैं मार्कडाउन का उपयोग करके पैराग्राफ पर एक वर्ग के नाम को परिभाषित कर सकता हूं?" क्या आप शीर्षक पढ़ना भूल गए?
रयान फ्लोरेंस

[बायस्ड] यदि आप एक नोड उपयोगकर्ता हैं, तो कृपया Rho को देखें । हालांकि यह मार्कडाउन के साथ 100% संगत नहीं है, फिर भी आप इसे बहुत आकर्षक पा सकते हैं, क्योंकि इसमें वह विशेषता है जो आपको इसके मूल में चाहिए।
अवतार

जवाबों:


76

Dupe: मैं मार्कडाउन में HTML क्लास की विशेषता कैसे सेट करूँ?


मूल रूप से? नहीं लेकिन...

नहीं, मार्कडाउन का सिंटैक्स नहीं हो सकता। आप मार्क अतिरिक्त के माध्यम से आईडी मान सेट कर सकते हैं ।

यदि आप चाहें, तो आप नियमित रूप से HTML का उपयोग कर सकते हैं , और markdown="1"HTML तत्व में मार्कडाउन-रूपांतरण जारी रखने के लिए विशेषता जोड़ सकते हैं । हालांकि इसके लिए मार्कडाउन एक्स्ट्रा की जरूरत होती है ।

<p class='specialParagraph' markdown='1'>
**Another paragraph** which allows *Markdown* within it.
</p>

संभावित समाधान: (अनछुए और इच्छित <blockquote>)

मुझे निम्नलिखित ऑनलाइन मिला:

समारोह

function _DoBlockQuotes_callback($matches) {

    ...cut...

    //add id and class details...
    $id = $class = '';
    if(preg_match_all('/\{(?:([#.][-_:a-zA-Z0-9 ]+)+)\}/',$bq,$matches)) {
        foreach ($matches[1] as $match) {
            if($match[0]=='#') $type = 'id';
            else $type = 'class';
            ${$type} = ' '.$type.'="'.trim($match,'.# ').'"';
        }
        foreach ($matches[0] as $match) {
            $bq = str_replace($match,'',$bq);
        }
    }

    return _HashBlock(
        "<blockquote{$id}{$class}>\n$bq\n</blockquote>"
    ) . "\n\n";
}

Markdown

>{.className}{#id}This is the blockquote

परिणाम

<blockquote id="id" class="className">
    <p>This is the blockquote</p>
</blockquote>

2
(MaRuKu parser के साथ परीक्षण किया गया) आप P टैग को प्रभावित करने के लिए पाठ की एक पंक्ति की शुरुआत में सिर्फ "{.class-name}" का उपयोग कर सकते हैं। हालांकि आईडी भाग को नजरअंदाज कर दिया गया है।
डेविड हचिसन

75

रॉ HTML वास्तव में मार्कडाउन में पूरी तरह से मान्य है। उदाहरण के लिए:

Normal *markdown* paragraph.

<p class="myclass">This paragraph has a class "myclass"</p>

बस सुनिश्चित करें कि HTML एक कोड ब्लॉक के अंदर नहीं है।


31
इस दृष्टिकोण के साथ समस्या यह है कि आंतरिक पाठ अब मार्कडाउन नहीं है।
एकुप्पी

@akauppi हाँ; यह एक स्पैन टैग का उपयोग करके प्राप्त किया जा सकता है, यद्यपि।
Seraphendipity

13

यदि आपके वातावरण जावास्क्रिप्ट है, उपयोग markdown-यह प्लगइन के साथ markdown यह attrs :

const md = require('markdown-it')();
const attrs = require('markdown-it-attrs');
md.use(attrs);

const src = 'paragraph {.className #id and=attributes}';

// render
let res = md.render(src);
console.log(res);

उत्पादन

<p class="className" id="id" and="attributes">paragraph</p>

jsfiddle

नोट: अपने मार्कडाउन में विशेषताओं की अनुमति देते समय सुरक्षा पहलू से अवगत रहें!

डिस्क्लेमर, मैं मार्कडाउन-इट-अर्टर्स का लेखक हूं।


मार्कडाउन इट रॉक्स !!
ओले

8

मार्कडाउन में यह क्षमता होनी चाहिए , लेकिन यह नहीं है। इसके बजाय, आप भाषा-विशिष्ट मार्कडाउन सुपरसेट के साथ फंस गए हैं:

PHP: मार्कडाउन एक्स्ट्रा
रूबी: क्रामडाउन , मारुकु

लेकिन अगर आपको सही मार्कडाउन सिंटैक्स का पालन करने की आवश्यकता है, तो आप कच्चे एचटीएमएल डालने के साथ फंस गए हैं, जो कम आदर्श है।


7

यदि आपके मार्कडाउन का स्वाद क्रामडाउन है, तो आप सीएसएस क्लास को इस तरह सेट कर सकते हैं:

{:.nameofclass}
paragraph is here

फिर आप सीएसएस फ़ाइल में, आप सीएसएस को इस तरह सेट करते हैं:

.nameofclass{
   color: #000;
  }

5

यहाँ @ यारिन के उत्तर के बाद क्रामडाउन के लिए एक कार्य उदाहरण है।

A simple paragraph with a class attribute.
{:.yourClass}

संदर्भ: https://kramdown.gettalong.org/syntax.html#inline-attribute-lists


1
मुझे इस बारे में कोई अंदाजा नहीं था। मार्कडाउन प्रीव्यू (उदात्त 3) के साथ बहुत अच्छा काम करता है जो बिलिन Python Markdownपार्सर का उपयोग करता है।
Mihai

3

जैसा कि ऊपर बताया गया है कि मार्कडाउन आपको इस पर लटका हुआ है। हालांकि, कार्यान्वयन के आधार पर कुछ वर्कअराउंड हैं:

एमडी के कम से कम एक संस्करण को <div>ब्लॉक स्तर का टैग माना जाता है लेकिन <DIV>यह केवल पाठ है। हालांकि सभी ब्रदर्स मामले असंवेदनशील हैं। यह आपको डिव कंटेनर टैग जोड़ने की कीमत पर एमडी की वाक्य रचना सादगी रखने की अनुमति देता है।

तो निम्नलिखित एक समाधान है:

<DIV class=foo>

  Paragraphs here inherit class foo from above.

</div>

इसका नकारात्मक पक्ष यह है कि आउटपुट कोड में <p>टैग्स हैं जो <div>दोनों पंक्तियों को लपेटते हैं (दोनों में से पहला, क्योंकि यह नहीं है और दूसरा है क्योंकि यह मेल नहीं खाता है। कोई भी ब्राउज़र इस बारे में उपद्रव नहीं करता है कि मैंने पाया है, लेकिन कोड जीता। ' टी मान्य। एमडी <p>वैसे भी अतिरिक्त टैग लगाने के लिए जाता है।

मार्कडाउन के कई संस्करण कन्वेंशन <tag markdown="1">को लागू करते हैं , जिस स्थिति में एमडी टैग के अंदर सामान्य प्रसंस्करण करेगा। उपरोक्त उदाहरण बनता है:

<div markdown="1" class=foo>

  Paragraphs here inherit class foo from above.

</div>

फ्लेचर के मल्टीमर्कडाउन का वर्तमान संस्करण संदर्भित लिंक का उपयोग करते हुए विशेषताओं को लिंक का पालन करने की अनुमति देता है।


नोट: कृपया सुनिश्चित करें कि आप कोड मार्कर का उपयोग करते हैं; यह पोस्ट HTML टैग के रूप में व्याख्या किए जाने के बाद से अधिकांश पोस्ट छिपी हुई थी।
लॉरेंस Dol

धन्यवाद - DIV हैक यहां एकमात्र उत्तर है जो पेगडाउन / सेगडाउन के साथ काम करता है। (पेगडाउन प्लगइन्स के साथ भी एक्स्टेंसिबल है, इसलिए मैं लंबे समय में ऐसा कर सकता हूं)
कोर्न

2

में स्लिम markdown उपयोग करें:

markdown:
  {:.cool-heading}
  #Some Title

इसके लिए अनुवाद:

<h1 class="cool-heading">Some Title</h1>

1

यह भी उल्लेख किया जाना चाहिए कि <span>टैग उनके अंदर की अनुमति देते हैं - ब्लॉक-स्तरीय आइटम उनके अंदर एमडी को नकारात्मक रूप से तब तक नकारते हैं जब तक आप उन्हें ऐसा करने के लिए कॉन्फ़िगर नहीं करते हैं, लेकिन इन-लाइन शैली मूल रूप से उनके भीतर एमडी की अनुमति देते हैं। जैसे, मैं अक्सर कुछ करने के लिए ...

This is a superfluous paragraph thing.

<span class="class-red">And thus I delve into my topic, Lorem ipsum lollipop bubblegum.</span>

And thus with that I conclude.

अगर यह सार्वभौमिक है, तो मुझे 100% यकीन नहीं है, लेकिन मेरे द्वारा उपयोग किए गए सभी एमडी संपादकों में ऐसा प्रतीत होता है।


0

तुम सिर्फ (जैसे मैंने किया था) जावास्क्रिप्ट प्रयोजनों के लिए एक चयनकर्ता की जरूरत है, तो आप सिर्फ एक का उपयोग करना चाहें hrefबजाय एक की विशेषता classया id:

बस यह करें:

<a href="#foo">Link</a>

मार्कडाउन उस hrefविशेषता को नजरअंदाज नहीं करेगा और न ही हटाएगा जैसा वह कक्षाओं और आईडी के साथ करता है।

अपनी जावास्क्रिप्ट या jQuery में तो आप कर सकते हैं:

$('a[href$="foo"]').click(function(event) {

    ... do your thing ...

    event.preventDefault();
});

कम से कम मार्कडाउन के मेरे संस्करण में यह काम करता है ...

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.