ฉันสามารถกำหนดชื่อคลาสในย่อหน้าโดยใช้ Markdown ได้หรือไม่?

ฉันสามารถกำหนดชื่อคลาสในย่อหน้าโดยใช้ Markdown ได้หรือไม่? ถ้าเป็นเช่นนั้นอย่างไร?

Dupe: ฉันจะตั้งค่าแอตทริบิวต์คลาส HTML ใน Markdown ได้อย่างไร

เล็กน้อย? ไม่ แต่ ...

ไม่ไวยากรณ์ของ Markdown ไม่สามารถทำได้ คุณสามารถตั้งค่า IDด้วย Markdown Extra ถึง

คุณสามารถใช้ HTML ปกติได้หากต้องการและเพิ่มแอตทริบิวต์markdown="1"เพื่อดำเนินการแปลง markdown ภายในองค์ประกอบ HTML ต่อไป สิ่งนี้ต้องใช้Markdown Extraแม้ว่า

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

HTML ดิบนั้นใช้ได้อย่างสมบูรณ์แบบในการมาร์กดาวน์ ตัวอย่างเช่น:

Normal *markdown* paragraph.

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

ตรวจสอบให้แน่ใจว่า HTML ไม่ได้อยู่ในบล็อกโค้ด

หากสภาพแวดล้อมของคุณเป็น JavaScript ให้ใช้markdown-itร่วมกับปลั๊กอินmarkdown-it-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

หมายเหตุ:ระวังด้านความปลอดภัยเมื่ออนุญาตแอตทริบิวต์ใน markdown ของคุณ!

ข้อจำกัดความรับผิดชอบฉันเป็นผู้เขียน markdown-it-attrs

Markdown ควรมีความสามารถนี้ แต่ไม่มี แต่คุณติดอยู่กับ Markdown supersets เฉพาะภาษา:

PHP: Markdown Extra
Ruby: Kramdown , Maruku

แต่ถ้าคุณจำเป็นต้องปฏิบัติตามไวยากรณ์ Markdown จริงคุณจะติดอยู่กับการแทรก HTML แบบดิบซึ่งไม่เหมาะอย่างยิ่ง

หากรสชาติของ markdown ของคุณคือ kramdown คุณสามารถตั้งค่าคลาส css ดังนี้:

{:.nameofclass}
paragraph is here

จากนั้นในไฟล์ css ของคุณคุณตั้งค่า css ดังนี้:

.nameofclass{
   color: #000;
  }

นี่คือตัวอย่างการทำงานของ kramdown ตามคำตอบของ @ Yarin

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

อ้างอิง: https://kramdown.gettalong.org/syntax.html#inline-attribute-lists

ดังที่ได้กล่าวไว้ข้างต้น markdown ทำให้คุณแขวนอยู่กับสิ่งนี้ อย่างไรก็ตามขึ้นอยู่กับการใช้งานมีวิธีแก้ปัญหาบางประการ:

MD อย่างน้อยหนึ่งเวอร์ชันถือว่า<div>เป็นแท็กระดับบล็อก แต่<DIV>เป็นเพียงข้อความ อย่างไรก็ตาม broswers ทั้งหมดไม่คำนึงถึงตัวพิมพ์เล็กและใหญ่ สิ่งนี้ช่วยให้คุณรักษาความเรียบง่ายทางไวยากรณ์ของ MD ได้โดยมีค่าใช้จ่ายในการเพิ่มแท็กคอนเทนเนอร์ div

ดังนั้นต่อไปนี้เป็นวิธีแก้ปัญหา:

<DIV class=foo>

  Paragraphs here inherit class foo from above.

</div>

ข้อเสียของสิ่งนี้คือรหัสผลลัพธ์มี<p>แท็กตัด<div>บรรทัด (ทั้งสองอันอันแรกเพราะไม่ใช่และอันที่สองเพราะมันไม่ตรงกันไม่มีเบราว์เซอร์ใดเอะอะเกี่ยวกับสิ่งนี้ที่ฉันพบ แต่รหัสชนะ ' t ตรวจสอบความถูกต้อง MD มีแนวโน้มที่จะสำรองไว้<p>แท็กอยู่แล้ว

markdown หลายเวอร์ชันใช้หลักการ<tag markdown="1">ซึ่งในกรณีนี้ MD จะทำการประมวลผลตามปกติภายในแท็ก ตัวอย่างข้างต้นกลายเป็น:

<div markdown="1" class=foo>

  Paragraphs here inherit class foo from above.

</div>

MultiMarkdownของ Fletcher เวอร์ชันปัจจุบันอนุญาตให้แอตทริบิวต์ไปตามลิงก์หากใช้ลิงก์อ้างอิง

ในการทำเครื่องหมายบาง ๆ ให้ใช้สิ่งนี้:

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

แปลเป็น:

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

นอกจากนี้ควรระบุด้วยว่า<span>แท็กอนุญาตให้อยู่ภายใน - รายการระดับบล็อกจะลบล้าง MD ภายในพวกเขาเว้นแต่คุณจะกำหนดค่าไม่ให้ทำเช่นนั้น แต่สไตล์ในบรรทัดอนุญาตให้ MD อยู่ภายในได้ ดังนั้นฉันมักจะทำอะไรที่คล้ายกับ ...

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% ว่านี่เป็นสากลหรือไม่ แต่ดูเหมือนว่าจะเป็นเช่นนั้นในบรรณาธิการ MD ทั้งหมดที่ฉันเคยใช้

หากคุณต้องการเพียงแค่ตัวเลือกสำหรับวัตถุประสงค์ของ Javascript (เช่นเดียวกับที่ฉันทำ) คุณอาจต้องการใช้hrefแอตทริบิวต์แทนclassหรือid:

เพียงทำสิ่งนี้:

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

Markdown จะไม่ละเว้นหรือลบhrefแอตทริบิวต์เช่นเดียวกับคลาสและรหัส

ดังนั้นใน Javascript หรือ jQuery ของคุณคุณสามารถทำได้:

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

    ... do your thing ...

    event.preventDefault();
});

อย่างน้อยก็ใช้ได้ใน Markdown เวอร์ชันของฉัน ...