Bisakah saya menentukan nama kelas pada paragraf menggunakan penurunan harga?

Bisakah saya menentukan nama kelas pada paragraf menggunakan penurunan harga? Jika ya, bagaimana caranya?

Dupe: Bagaimana cara menyetel atribut kelas HTML di Penurunan Harga?

Asli? Tidak tapi...

Tidak, sintaks Markdown tidak bisa. Anda dapat mengatur nilai ID dengan Markdown Extra through.

Anda dapat menggunakan HTML biasa jika Anda mau, dan menambahkan atribut markdown="1"untuk melanjutkan konversi penurunan harga dalam elemen HTML. Ini membutuhkan Markdown Extra .

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

Solusi yang Mungkin: (Belum teruji dan ditujukan untuk <blockquote>)

Saya menemukan yang berikut ini secara online:

Fungsi

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";
}

Penurunan harga

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

Hasil

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

HTML mentah sebenarnya benar-benar valid dalam penurunan harga. Contohnya:

Normal *markdown* paragraph.

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

Pastikan saja HTML tidak berada di dalam blok kode.

Jika lingkungan Anda adalah JavaScript, gunakan markdown-it bersama dengan plugin 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);

Keluaran

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

jsfiddle.dll

Catatan: Waspadai aspek keamanan saat mengizinkan atribut dalam penurunan harga Anda!

Penafian, saya adalah penulis markdown-it-attrs.

Penurunan harga seharusnya memiliki kemampuan ini, tetapi sebenarnya tidak. Sebaliknya, Anda terjebak dengan superset Markdown khusus bahasa:

PHP: Penurunan Harga
Ruby Ekstra : Kramdown , Maruku

Tetapi jika Anda perlu mematuhi sintaks Markdown yang sebenarnya, Anda terjebak dengan memasukkan HTML mentah, yang kurang ideal.

Jika rasa penurunan harga Anda adalah kramdown, maka Anda dapat menyetel kelas css seperti ini:

{:.nameofclass}
paragraph is here

Kemudian di file css Anda, Anda mengatur css seperti ini:

.nameofclass{
   color: #000;
  }

Berikut adalah contoh kerja untuk kramdown mengikuti jawaban @ Yarin.

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

Referensi: https://kramdown.gettalong.org/syntax.html#inline-attribute-lists

Seperti disebutkan di atas penurunan harga itu sendiri membuat Anda bergantung pada ini. Namun, bergantung pada implementasinya, ada beberapa solusi:

Setidaknya satu versi MD dianggap <div>sebagai tag level blok tetapi <DIV>hanya teks. Namun semua bros tidak peka huruf besar / kecil. Hal ini memungkinkan Anda untuk menjaga kesederhanaan sintaks MD, dengan biaya menambahkan tag penampung div.

Jadi berikut ini adalah solusinya:

<DIV class=foo>

  Paragraphs here inherit class foo from above.

</div>

Kelemahan dari ini adalah bahwa kode keluaran memiliki <p>tag yang membungkus <div>garis (keduanya, yang pertama karena tidak cocok dan yang kedua karena tidak cocok. Tidak ada peramban browser tentang hal ini yang saya temukan, tetapi kode menang ' t memvalidasi. MD cenderung meletakkan <p>tag cadangan .

Beberapa versi penurunan harga menerapkan konvensi <tag markdown="1">di mana MD akan melakukan pemrosesan normal di dalam tag. Contoh di atas menjadi:

<div markdown="1" class=foo>

  Paragraphs here inherit class foo from above.

</div>

Versi MultiMarkdown Fletcher saat ini memungkinkan atribut mengikuti tautan jika menggunakan tautan referensi.

Dalam penurunan harga ramping gunakan ini:

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

Diterjemahkan menjadi:

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

Juga harus disebutkan bahwa <span>tag memungkinkan di dalamnya - item tingkat blok meniadakan MD secara asli di dalamnya kecuali Anda mengkonfigurasinya untuk tidak melakukannya, tetapi gaya sebaris secara asli mengizinkan MD di dalamnya. Karena itu, saya sering melakukan sesuatu yang mirip dengan ...

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.

Saya tidak 100% yakin apakah ini universal tetapi tampaknya menjadi kasus di semua editor MD yang saya gunakan.

Jika Anda hanya membutuhkan pemilih untuk tujuan Javascript (seperti yang saya lakukan), Anda mungkin hanya ingin menggunakan hrefatribut alih-alih classatau id:

Lakukan saja ini:

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

Penurunan harga tidak akan mengabaikan atau menghapus hrefatribut seperti yang dilakukannya dengan kelas dan id.

Jadi di Javascript atau jQuery Anda kemudian dapat melakukan:

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

    ... do your thing ...

    event.preventDefault();
});

Setidaknya ini berfungsi di versi penurunan harga saya ...