Comment puis-je me démarque dans une div?

Je suis en utilisant Marqué qui implémente GitHub aromatisé markdown.

J'ai quelques travail de démarque:

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

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>

J'aimerais conclure que des réductions de section dans un div, par exemple:

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

Toutefois cela renvoie le code HTML suivant:

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

Par exemple, pas de démarques, littéralement "# # Test de la rubrique " apparaît dans le code HTML.

Comment apprendre à bien envelopper mon markdown dans un div?

J'ai trouvé la solution de contournement suivante, cependant, il est laid et pas un correctif:

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

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

</div>
  • Vous pourriez veux découvrez en-tête des sections qui encapsule le contenu en sections, basée sur le titre.
InformationsquelleAutor mikemaccana | 2015-03-31
  1. 49

    Markdown

    Pour Markdown, C'est par la conception. À partir de la Inline HTML section de la Démarque référence:

    Noter que des Réductions de mise en forme de la syntaxe n'est pas traitée à l'intérieur du bloc au niveau des balises HTML. E. g., vous ne pouvez pas utiliser Markdown-style accent à l'intérieur d'un bloc HTML.

    Mais il est explicitement autorisé pour une durée de niveau tags:

    À la différence de niveau bloc balises HTML, la syntaxe Markdown est traitée dans la durée les balises de niveau.

    Ainsi, en fonction de votre cas d'utilisation, que vous pourriez sortir avec l'aide d'un span au lieu d'un div.

    CommonMark

    Si la bibliothèque vous utilisez implémente CommonMark, vous avez de la chance. Exemple Cents huit et Cents neuf de la spec montrent que si vous conservez une ligne vide entre le bloc HTML et le code markdown, le contenu sera analysé comme Markdown:

    <div>

*Emphasized* text.

</div>

    devrait fonctionner, tandis que le suivant ne devrait pas:

    <div>

*Emphasized* text.

</div>

    Et, toujours selon le même article dans la référence, certaines implémentations de reconnaître supplémentaires markdown=1 l'attribut de la balise HTML d'activer l'analyse de la Démarque à l'intérieur.

    Si elle ne semble pas fonctionner dans StackOverflow encore:

    De test **Markdown** à l'intérieur d'un rouge-fond div.

    • J'ai essayé de faire la même chose avec markdown bibliothèque en python (utilisé dans pelican), et le <div markdown=1> astuce a fonctionné. Merci beaucoup.
    • Markdown Extra prend en charge le format markdown=1
    InformationsquelleAutor LucasB
  2. 10

    De démarques Supplémentaires est nécessaire pour être en mesure de Markdown pour le formatage fonctionne à l'intérieur d'une balise HTML blocs, veuillez consulter la documentation indiquée ici -> https://michelf.ca/projects/php-markdown/extra/

    De démarques Supplémentaires vous donne un moyen de les mettre Markdown-texte mis en forme à l'intérieur de
    n'importe quel bloc au niveau de la balise. Vous faites cela en ajoutant un abattement de l'attribut de l'
    balise avec la valeur 1 qui donne markdown="1"

    InformationsquelleAutor Adolfo Gomez Nasol
  3. 9

    GitHub Pages prend en charge la markdown="1" attribut pour analyser démarque à l'intérieur des éléments HTML, par exemple 

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

    Remarque: de 2019/03, cela ne fonctionne pas github.com, seulement GitHub Pages.

    Remarque: Guillemets, comme dans markdown="1", ne sont pas requis par l'HTML5, mais si vous n'utilisez pas de guillemets (markdown=1), GitHub ne la reconnaît pas comme HTML. Aussi, le soutien est buggé dès maintenant. Vous obtiendrez probablement incorrecte de sortie si votre élément HTML est plus gros qu'un seul paragraphe. Par exemple, en raison de bugs, j'ai été incapable d'intégrer une Démarque de la liste à l'intérieur d'un div.

    Si vous vous trouvez dans un environnement dans lequel markdown="1" ne fonctionne pas, mais span n', une autre option est d'utiliser <span style="display:block"> de sorte que les blocs de classes de niveau sont compatibles avec celui-ci, par exemple

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

    Astuce: <span class="note"></span> est plus courte que <div class="note" markdown="1"></div>, donc si vous contrôlez le CSS, vous pouvez préférer utiliser <span> et ajouter display: block; à votre CSS.

    • J'ai testé la markdown="1" sur github. il ne fonctionne pas. lien
    • le span solution fonctionne parfaitement trouver sur GitHub. lien Merci beaucoup.
    • après enquête, Github et Typora ne peut pas afficher correctement, mais le code de visual studio ne!
    • il fonctionne sur GitHub Pages, mais pas sur GitHub lui-même, par exemple, témoin le texte **Tip:** figurant sur cette page, qui apparaît comme Astuce: sur la BPE rendu du même fichier. Je vais clarifier le texte.
    InformationsquelleAutor Qwertie
  4. 0

    En regardant la doc de L'Extension De Marqué et la modification de la html convertisseur méthode, vous pouvez faire quelque chose de ce genre pour remplacer les pièces entre les balises avec analysée markdown. Je n'ai pas fait beaucoup de tests, mais il a travaillé 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 pour vous assurer que markdown avec des lignes entre les balises html seront analysés.

    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);
});
    InformationsquelleAutor RyanDay
  5. 0

    Option de dernier recours:

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

    Essayer <DIV> au lieu de <div> et voir ce qui se passe.

    Markdownsharp a cette caractéristique - bien que sur StackOverflow ils éliminent tous les DIVs de toute façon, donc ne vous attendez pas à travailler ici.

    • Je voudrais supprimer ce si ce n'était pas vrai, mais pour moi, cela a été une partie de ma solution - aussi étrange que cela puisse paraître
    • Des sons comme vous êtes en train de tromper un buggy markdown analyseur de mise en œuvre (sensible à la casse), qu'ils peuvent le patch dans le futur.
    • C'est exactement ce que j'ai fait
    InformationsquelleAutor Simon_Weaver