Puis-je définir un nom de classe sur un paragraphe en utilisant Markdown?

Puis-je définir un nom de classe sur un paragraphe en utilisant Markdown? Si c'est le cas, comment?

Dupe: Comment définir un attribut de classe HTML dans Markdown?

Nativement? Non mais...

Non, la syntaxe de Markdown ne le peut pas. Vous pouvez définir des valeurs d'ID avec Markdown Extra via.

Vous pouvez utiliser du HTML standard si vous le souhaitez et ajouter l'attribut markdown="1"pour continuer la conversion de démarque dans l'élément HTML. Cela nécessite cependant Markdown Extra .

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

Solution possible: (non testé et destiné à <blockquote>)

J'ai trouvé ce qui suit en ligne:

Fonction

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

Réduction

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

Résultat

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

Le HTML brut est en fait parfaitement valide dans le markdown. Par exemple:

Normal *markdown* paragraph.

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

Assurez-vous simplement que le HTML ne se trouve pas dans un bloc de code.

Si votre environnement est JavaScript, utilisez markdown-it avec le 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);

Production

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

jsfiddle

Remarque: soyez conscient de l'aspect sécurité lorsque vous autorisez des attributs dans votre démarque!

Avertissement, je suis l'auteur de markdown-it-attrs.

Markdown devrait avoir cette capacité, mais ce n'est pas le cas. Au lieu de cela, vous êtes coincé avec des supersets Markdown spécifiques à la langue:

PHP: Markdown Extra
Ruby: Kramdown , Maruku

Mais si vous devez respecter la vraie syntaxe Markdown, vous êtes coincé avec l'insertion de HTML brut, ce qui est moins idéal.

Si votre saveur de démarque est kramdown, vous pouvez définir la classe css comme ceci:

{:.nameofclass}
paragraph is here

Ensuite, dans votre fichier css, vous définissez le css comme ceci:

.nameofclass{
   color: #000;
  }

Voici un exemple de travail pour kramdown suite à la réponse de @ Yarin.

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

Référence: https://kramdown.gettalong.org/syntax.html#inline-attribute-lists

Comme mentionné ci-dessus, le démarquage lui-même vous laisse accroché. Cependant, selon l'implémentation, il existe quelques solutions de contournement:

Au moins une version de MD considère <div>comme une balise de niveau bloc mais <DIV>n'est que du texte. Tous les broswers sont cependant insensibles à la casse. Cela vous permet de conserver la simplicité de syntaxe de MD, au prix de l'ajout de balises de conteneur div.

Voici donc une solution de contournement:

<DIV class=foo>

  Paragraphs here inherit class foo from above.

</div>

L'inconvénient est que le code de sortie a des <p>balises enveloppant les <div>lignes (les deux, la première parce que ce n'est pas le cas et la seconde parce qu'elle ne correspond pas. Aucun navigateur ne s'inquiète de ce que j'ai trouvé, mais le code a gagné » t valider. MD a tendance à mettre en réserve<p> étiquettes de .

Plusieurs versions de markdown implémentent la convention, <tag markdown="1">auquel cas MD effectuera le traitement normal à l'intérieur de la balise. L'exemple ci-dessus devient:

<div markdown="1" class=foo>

  Paragraphs here inherit class foo from above.

</div>

La version actuelle de MultiMarkdown de Fletcher permet aux attributs de suivre le lien si vous utilisez des liens référencés.

Dans Slim Markdown, utilisez ceci:

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

Se traduit par:

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

Il convient également de mentionner que les <span>balises permettent à l'intérieur d'eux - les éléments de niveau bloc annulent nativement MD à l'intérieur d'eux à moins que vous ne les configuriez pour ne pas le faire, mais les styles en ligne autorisent nativement MD à l'intérieur d'eux. En tant que tel, je fais souvent quelque chose qui ressemble à ...

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.

Je ne suis pas sûr à 100% si c'est universel, mais cela semble être le cas dans tous les éditeurs de MD que j'ai utilisés.

Si vous avez juste besoin d'un sélecteur à des fins Javascript (comme je l'ai fait), vous pouvez simplement utiliser un hrefattribut au lieu d'un classouid :

Faites juste ceci:

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

Markdown n'ignorera ni ne supprimera le href attribut comme il le fait avec les classes et les identifiants.

Donc, dans votre Javascript ou jQuery, vous pouvez alors faire:

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

    ... do your thing ...

    event.preventDefault();
});

Au moins cela fonctionne dans ma version de Markdown ...