Czy mogę zdefiniować nazwę klasy w akapicie za pomocą Markdown?

Czy mogę zdefiniować nazwę klasy w akapicie za pomocą Markdown? Jeśli tak to jak?

Dupe: Jak ustawić atrybut klasy HTML w Markdown?

Natywnie? Nie ale...

Nie, składnia Markdowna nie może. Możesz ustawić wartości identyfikatorów za pomocą Markdown Extra do.

Jeśli chcesz, możesz użyć zwykłego kodu HTML i dodać atrybut, markdown="1"aby kontynuować konwersję przecen w ramach elementu HTML. Wymaga to jednak Markdown Extra .

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

Możliwe rozwiązanie: (nieprzetestowane i przeznaczone <blockquote>)

Znalazłem w Internecie:

Funkcjonować

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

Obniżka cen

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

Wynik

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

Surowy kod HTML jest właściwie całkowicie poprawny w przecenach. Na przykład:

Normal *markdown* paragraph.

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

Tylko upewnij się, że kod HTML nie znajduje się wewnątrz bloku kodu.

Jeśli Twoje środowisko to JavaScript, użyj markdown-it wraz z wtyczką 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);

Wynik

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

jsfiddle

Uwaga: pamiętaj o aspekcie bezpieczeństwa, zezwalając na atrybuty w promocji!

Zastrzeżenie, jestem autorem przecenionych-it-atr.

Markdown powinien mieć taką możliwość, ale tak nie jest. Zamiast tego utkniesz w superzbiorach Markdown specyficznych dla języka:

PHP: Markdown Extra
Ruby: Kramdown , Maruku

Ale jeśli musisz przestrzegać prawdziwej składni Markdown, utkniesz z wstawianiem surowego kodu HTML, co jest mniej idealne.

Jeśli twój smak przeceny to kramdown, możesz ustawić klasę css w ten sposób:

{:.nameofclass}
paragraph is here

Następnie w swoim pliku css ustawiasz css w ten sposób:

.nameofclass{
   color: #000;
  }

Oto działający przykład dla kramdown po odpowiedzi @ Yarina.

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

Źródła: https://kramdown.gettalong.org/syntax.html#inline-attribute-lists

Jak wspomniano powyżej, sama przecena pozostawia Cię w spokoju. Jednak w zależności od implementacji istnieją pewne obejścia:

Co najmniej jedna wersja MD uważa <div>się za znacznik na poziomie bloku, ale <DIV>jest to tylko tekst. Jednak we wszystkich przeglądarkach wielkość liter nie jest rozróżniana. Pozwala to zachować prostotę składni MD kosztem dodawania znaczników kontenera div.

Oto więc obejście:

<DIV class=foo>

  Paragraphs here inherit class foo from above.

</div>

Wadą tego jest to, że kod wyjściowy ma <p>tagi zawijające <div>wiersze (oba, pierwszy, ponieważ nie jest, a drugi, ponieważ nie pasuje. Żadna przeglądarka nie przejmuje się tym, co znalazłem, ale kod wygrał ”) t validate. MD i tak ma tendencję do umieszczania zapasowych <p>tagów.

Kilka wersji markdown implementuje konwencję, <tag markdown="1">w którym to przypadku MD wykonuje normalne przetwarzanie wewnątrz tagu. Powyższy przykład to:

<div markdown="1" class=foo>

  Paragraphs here inherit class foo from above.

</div>

Obecna wersja MultiMarkdown firmy Fletcher umożliwia atrybutom podążanie za odsyłaczem, jeśli używane są odnośniki.

W slim przecenie użyj tego:

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

Przetłumaczyć na:

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

Należy również wspomnieć, że <span>tagi dopuszczają wewnątrz nich - elementy na poziomie bloku natywnie negują MD w nich, chyba że skonfigurujesz je tak, aby tego nie robiły, ale style wbudowane natywnie zezwalają na MD w nich. W związku z tym często robię coś podobnego do ...

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.

Nie jestem w 100% pewien, czy jest to uniwersalne, ale wydaje się, że tak jest we wszystkich edytorach MD, z których korzystałem.

Jeśli potrzebujesz tylko selektora do celów JavaScript (tak jak ja), możesz po prostu użyć hrefatrybutu zamiast classlub id:

Po prostu zrób to:

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

Markdown nie zignoruje ani nie usunie hrefatrybutu, tak jak robi to w przypadku klas i identyfikatorów.

Więc w swoim Javascript lub jQuery możesz zrobić:

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

    ... do your thing ...

    event.preventDefault();
});

Przynajmniej działa to w mojej wersji Markdown ...