web-dev-qa-db-fra.com

Comment puis-je envelopper mon démarque dans une div HTML?

J'utilise MarkEd qui implémente GitHub aromatisé markdown .

J'ai quelques démarques de travail:

## Test heading
a paragraph.
## second heading
another paragraph

Ce qui crée:

<h2 id="test-heading">Test heading</h2>
<p>a paragraph.</p>
<h2 id="second-heading">second heading</h2>
<p>another paragraph</p>

Je voudrais envelopper cette section de démarque dans une div, par exemple:

<div class="blog-post">
## Test heading
a paragraph.
## second heading
another paragraph
</div>

Cependant, cela retourne le code HTML suivant:

<div class="blog-post">
## Test heading
a paragraph.
## second heading
another paragraph
</div>

Par exemple, aucune démarque, littéralement «## Test en-tête» apparaît dans le code HTML.

Comment puis-je emballer correctement mon démarque dans une div?

J'ai trouvé la solution de contournement suivante, mais il est moche et non un correctif réel:

<div class="blog-post">
<div></div>

## Test heading
a paragraph.
## second heading
another paragraph

</div>
htmlmarkdowngithub-flavored-markdown
41
mikemaccana

Réduction

Pour Markdown, cela est voulu par la conception. À partir de la section Inline HTML de la référence Markdown:

Notez que la syntaxe de formatage Markdown n'est pas traitée dans les balises HTML au niveau du bloc. Par exemple, vous ne pouvez pas utiliser le style Markdown emphasis dans un bloc HTML.

Mais il est explicitement autorisé pour les balises de niveau d'envergure:

Contrairement aux balises HTML de niveau bloc, la syntaxe de Markdown est traitée dans les balises de niveau étendue.

Ainsi, en fonction de votre cas d'utilisation, vous pourriez vous en tirer en utilisant un span au lieu d'un div.

CommonMark

Si la bibliothèque que vous utilisez implémente CommonMark , vous avez de la chance. Exemple 108 et 109 de la spécification montrent que si vous conservez une ligne vide entre le bloc HTML et le code de démarque, le contenu sera analysé comme étant Markdown:

<div>

*Emphasized* text.

</div>

devrait fonctionner, alors que ce qui suit ne devrait pas:

<div>
*Emphasized* text.
</div>

Et, toujours selon la même section de la référence, certaines implémentations reconnaissent un attribut markdown=1 supplémentaire sur la balise HTML pour permettre l’analyse de Markdown à l’intérieur.

Bien que cela ne semble pas encore fonctionner dans StackOverflow:

46
LucasB

Markdown Extra est nécessaire pour pouvoir utiliser le formatage Markdown dans des blocs HTML. Veuillez consulter la documentation indiquée ici -> https://michelf.ca/projects/php-markdown/extra/

Markdown Extra vous permet d'insérer du texte au format Markdown dans toute balise de niveau bloc. Vous faites cela en ajoutant un attribut de démarque au balise avec la valeur 1 - qui donne markdown = "1"

9
Adolfo Gomez Nasol

GitHub Pages prend en charge l'attribut markdown="1" pour analyser le démarquage dans les éléments HTML, par exemple. 

<div class="tip" markdown="1">Have **fun!**</div>

Remarque: Les guillemets, comme dans markdown="1", ne sont pas requis par HTML5, mais si vous n'utilisez pas de guillemets (markdown=1), GitHub ne le reconnaît pas au format HTML. En outre, le support est buggy en ce moment. Vous obtiendrez probablement une sortie incorrecte si votre élément HTML est plus grand qu'un seul paragraphe. Par exemple, en raison de bugs, je n’étais pas en mesure d’incorporer une liste Markdown dans un div.

Si vous vous trouvez dans un environnement dans lequel markdown="1" ne fonctionne pas mais span, une autre option consiste à utiliser <span style="display:block"> pour que les classes de niveau bloc lui soient compatibles, par exemple.

<span style="display:block" class="note">It **works!**</span>

Astuce: <span class="note"></span> est plus court que <div class="note" markdown="1"></div>. Si vous contrôlez le CSS, vous préférerez peut-être utiliser <span> et ajouter display: block; à votre CSS.

5
Qwertie

En examinant les docs pour Extending Marked et en modifiant la méthode de rendu html, vous pouvez procéder de la sorte pour remplacer les parties entre balises par des balises analysées. Je n'ai pas fait de tests approfondis, mais cela a fonctionné avec mes premières tentatives.

const marked = require('marked');
const renderer = new marked.Renderer();
renderer.html = (mixedContent) => mixedContent.replace(/[^<>]+?(?=<)/g, (match) => {
    const tokens = marked.lexer(match);
    return marked.parser(tokens);
});

Modifier

cette nouvelle expression régulière assurera que seule la démarque avec des lignes entre elle et les balises html sera analysée.

const marked = require('marked');
const renderer = new marked.Renderer();
renderer.html = (mixedContent) => mixedContent.replace(/\n\n[^<>]+?\n\n(?=<)/g, (match) => {
    const tokens = marked.lexer(match);
    return marked.parser(tokens);
});
0
RyanDay

Option de dernier recours:

Certaines bibliothèques peuvent être sensibles à la casse.

Essayez <DIV> au lieu de <div> et voyez ce qui se passe.

Markdownsharp a cette caractéristique - bien que sur StackOverflow, il supprime tous les DIV de toute façon, alors ne vous attendez pas à ce que cela fonctionne ici.

0
Simon_Weaver