web-dev-qa-db-fra.com

Puis-je définir un nom de classe sur un paragraphe à l'aide de Markdown?

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

cssmarkdown
117
Ryan Florence

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

Nativement? Non mais...

Non, la syntaxe de Markdown ne peut pas. Vous pouvez définir les valeurs d’ID avec Markdown Extra through.

Vous pouvez tiliser du HTML normal si vous le souhaitez et ajouter l'attribut markdown="1" pour continuer la conversion par réduction dans l’élément HTML. Cela nécessite Markdown Extra bien.

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

Solution possible: (non testé et destiné au <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";
}

Markdown 

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

Résultat 

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

Le HTML brut est en fait parfaitement valide dans le démarquage. Par exemple:

Normal *markdown* paragraph.

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

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

66
Matt Bridges

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

PHP: Markdown Extra
Ruby: Kramdown , Maruk

Mais si vous devez respecter la syntaxe True Markdown, vous ne pouvez insérer que du code HTML brut, ce qui est moins idéal.

7
Yarin

Si votre environnement est en 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);

Sortie 

<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!

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

6
arve0

Voici un exemple de travail pour kramdown suivant 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

5
midzer

Si votre style de démarquage est kramdown, vous pouvez définir la classe css comme suit:

{:.nameofclass}
paragraph is here

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

.nameofclass{
   color: #000;
  }
4
franc

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

Au moins une version de MD considère que <div> Est une balise de niveau bloc mais <DIV> N'est qu'un texte. Tous les auteurs sont toutefois insensibles à la casse. Cela vous permet de conserver la simplicité de syntaxe de MD, au prix de l'ajout de balises div container.

Voici donc une solution de contournement:

<DIV class=foo>

  Paragraphs here inherit class foo from above.

</div>

L'inconvénient, c'est que le code de sortie contient des balises <p> Qui enveloppent les lignes <div> (Les deux, le premier parce que ce n'est pas le cas et le second parce qu'il ne correspond pas. C'est ce que j'ai trouvé, mais le code ne valide pas. MD a de toute façon tendance à insérer des balises <p> de rechange.

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 des liens référencés sont utilisés.

3
Sherwood Botsford

En fin de compte ceci:

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

Se traduit par:

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

Si vous avez simplement besoin d'un sélecteur pour les besoins de Javascript (comme je l'ai fait), vous pouvez simplement utiliser un attribut href au lieu d'un class ou id:

Faites juste ceci:

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

Markdown n'ignorera ni ne supprimera l'attribut href 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 ...

0
Tintin81