Posso definire un nome di classe sul paragrafo usando Markdown?

Posso definire un nome di classe sul paragrafo usando Markdown? Se é cosi, come?

Dupe: come posso impostare un attributo di classe HTML in Markdown?

Nativamente? No ma...

No, la sintassi di Markdown non può. È possibile impostare i valori ID con Markdown Extra tramite.

Se lo desideri, puoi utilizzare il normale HTML e aggiungere l'attributo markdown="1"per continuare la conversione markdown all'interno dell'elemento HTML. Ciò richiede Markdown Extra però.

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

Possibile soluzione: (Non testato e destinato a <blockquote>)

Ho trovato il seguente online:

Funzione

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

riduione di prezzo

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

Risultato

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

L'HTML non elaborato è in realtà perfettamente valido nel markdown. Per esempio:

Normal *markdown* paragraph.

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

Assicurati solo che l'HTML non sia all'interno di un blocco di codice.

Se il tuo ambiente è JavaScript, usa markdown-it insieme al 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);

Produzione

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

jsfiddle

Nota: fai attenzione all'aspetto della sicurezza quando permetti gli attributi nel tuo markdown!

Disclaimer, sono l'autore di markdown-it-attrs.

Markdown dovrebbe avere questa capacità, ma non lo è. Invece, sei bloccato con superset Markdown specifici della lingua:

PHP: Markdown Extra
Ruby: Kramdown , Maruku

Ma se devi rispettare la vera sintassi di Markdown, sei bloccato con l'inserimento di HTML non elaborato, che è meno ideale.

Se il tuo sapore di markdown è kramdown, puoi impostare la classe css in questo modo:

{:.nameofclass}
paragraph is here

Quindi nel tuo file css, imposti il ​​css in questo modo:

.nameofclass{
   color: #000;
  }

Ecco un esempio funzionante per kramdown che segue la risposta di @ Yarin.

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

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

Come accennato in precedenza, il markdown stesso ti lascia sospeso su questo. Tuttavia, a seconda dell'implementazione ci sono alcune soluzioni alternative:

Almeno una versione di MD considera <div>un tag a livello di blocco ma <DIV>è solo testo. Tutti i broswer tuttavia non sono sensibili al maiuscolo / minuscolo. Ciò consente di mantenere la semplicità della sintassi di MD, a costo di aggiungere tag contenitore div.

Quindi la seguente è una soluzione alternativa:

<DIV class=foo>

  Paragraphs here inherit class foo from above.

</div>

Il rovescio della medaglia di questo è che il codice di output ha <p>tag che avvolgono le <div>linee (entrambi, il primo perché non lo è e il secondo perché non corrisponde. Nessun problema con il browser che ho trovato, ma il codice ha vinto " Convalida t. MD tende comunque a inserire <p>tag di riserva .

Diverse versioni di markdown implementano la convenzione, <tag markdown="1">nel qual caso MD eseguirà la normale elaborazione all'interno del tag. L'esempio sopra diventa:

<div markdown="1" class=foo>

  Paragraphs here inherit class foo from above.

</div>

La versione corrente del MultiMarkdown di Fletcher consente agli attributi di seguire il collegamento se si utilizzano collegamenti referenziati.

In slim markdown usa questo:

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

Si traduce in:

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

Va anche detto che i <span>tag consentono al loro interno - gli elementi a livello di blocco negano MD nativamente al loro interno a meno che non li configuri per non farlo, ma gli stili in linea consentono nativamente a MD al loro interno. Come tale, faccio spesso qualcosa di simile a ...

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.

Non sono sicuro al 100% se questo è universale, ma sembra essere il caso di tutti gli editor MD che ho usato.

Se hai solo bisogno di un selettore per scopi Javascript (come ho fatto io), potresti semplicemente voler utilizzare un hrefattributo anziché un classo id:

Basta fare questo:

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

Markdown non ignorerà o rimuoverà l' hrefattributo come fa con le classi e gli ID.

Quindi nel tuo Javascript o jQuery puoi quindi fare:

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

    ... do your thing ...

    event.preventDefault();
});

Almeno questo funziona nella mia versione di Markdown ...