Markdown kullanarak paragrafta bir sınıf adı tanımlayabilir miyim?

Markdown kullanarak paragrafta bir sınıf adı tanımlayabilir miyim? Öyleyse nasıl?

Dupe: Markdown'da bir HTML sınıfı niteliğini nasıl ayarlarım?

Doğal olarak? Hayır ama...

Hayır, Markdown'un sözdizimi yapamaz. Sen edebilirsiniz kimlik değerlerini ayarlamak Markdown Ekstra through ile.

İsterseniz normal HTML'yi kullanabilirmarkdown="1" ve HTML öğesinde işaretleme dönüşümüne devam etmek için özelliği ekleyebilirsiniz . Bu Markdown Extra gerektirir .

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

Olası Çözüm: (Test edilmemiş ve amaçlanmıştır <blockquote>)

Aşağıdaki çevrimiçi buldum:

fonksiyon

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

Sonuç

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

Ham HTML aslında işaretlemede mükemmel bir şekilde geçerlidir. Örneğin:

Normal *markdown* paragraph.

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

HTML'nin bir kod bloğunun içinde olmadığından emin olun.

Ortamınızın JavaScript ise, kullanım markdown-it eklentisi ile birlikte 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);

Çıktı

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

jsfiddle

Not: İşaretlemenizdeki özelliklere izin verirken güvenlik yönünden haberdar olun!

Feragatname, markdown-it-attrs yazarıyım.

Markdown bu yeteneğe sahip olmalı , ancak yok. Bunun yerine, dile özgü Markdown süper kümeleriyle sıkışıp kaldınız:

PHP: Markdown Ekstra
Yakut: Kramdown , Maruku

Ancak, gerçek Markdown sözdizimine uymanız gerekiyorsa, daha az ideal olan ham HTML eklemekle sıkışıp kalırsınız.

Markdown lezzetiniz kramdown ise, css sınıfını şu şekilde ayarlayabilirsiniz:

{:.nameofclass}
paragraph is here

Sonra css dosyasında, css şöyle ayarlanır:

.nameofclass{
   color: #000;
  }

@ Yarin'in cevabını takip eden kramdown için çalışan bir örnek.

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

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

Yukarıda belirtildiği gibi markdown kendisi bu konuda asılı bırakır. Ancak, uygulamaya bağlı olarak bazı geçici çözümler vardır:

MD'nin en az bir sürümü <div>blok düzeyinde bir etiket olarak kabul edilir , ancak <DIV>yalnızca metindir. Bununla birlikte, tüm kardeşler büyük / küçük harfe duyarlı değildir. Bu, MD'nin sözdizimi basitliğini, div kapsayıcı etiketleri ekleme pahasına korumanıza olanak tanır.

Yani aşağıdaki bir çözümdür:

<DIV class=foo>

  Paragraphs here inherit class foo from above.

</div>

Bunun dezavantajı, çıkış kodunun satırları <p>saran etiketler <div>içermesidir (her ikisi de, birincisi olmadığı için ikincisi ve eşleşmediği için. MD, <p>yine de yedek etiketler koyma eğilimindedir .

Çeşitli markdown sürümleri kuralı uygular, <tag markdown="1">bu durumda MD etiketin içinde normal işlemi gerçekleştirir. Yukarıdaki örnek şu şekildedir:

<div markdown="1" class=foo>

  Paragraphs here inherit class foo from above.

</div>

Fletcher'in MultiMarkdown'nın mevcut sürümü, referansların kullanılan bağlantılar kullanılıyorsa özniteliklerin bağlantıyı izlemesine izin verir.

Gelen ince markdown kullanımı bu:

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

Çevirir:

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

Ayrıca <span>etiketlerin içlerine izin verdiği de belirtilmelidir - blok düzeyindeki öğeler, bunları yapmamaları için yapılandırmadıkça MD'yi doğal olarak içlerinde yok ederler, ancak satır içi stiller, içlerinde MD'ye doğal olarak izin verir. Bu nedenle, genellikle benzer bir şey yaparım ...

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.

Bunun evrensel olup olmadığından% 100 emin değilim, ancak kullandığım tüm MD editörlerinde olduğu gibi görünüyor.

Javascript amaçları için (benim yaptığım gibi) bir seçiciye ihtiyacınız varsa href, bir classveya yerine bir özellik kullanmak isteyebilirsiniz id:

Sadece bunu yap:

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

Markdown, hreföznitelikleri sınıflar ve kimliklerle olduğu gibi yok saymaz veya kaldırmaz .

Yani Javascript veya jQuery sonra şunları yapabilirsiniz:

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

    ... do your thing ...

    event.preventDefault();
});

En azından bu Markdown sürümümde çalışıyor ...