Ich verwende MarkEd, das Markdown mit GitHub-Geschmack implementiert .

Ich habe einen funktionierenden Abschlag:

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

Was schafft:

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

Ich möchte diesen Markdown-Abschnitt in ein Div einschließen, z.

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

Dies gibt jedoch den folgenden HTML-Code zurück:

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

ZB kein Markdown, wörtlich '## Test Heading' erscheint im HTML.

Wie kann ich meinen Abschlag richtig in ein Div einwickeln?

Ich habe die folgende Problemumgehung gefunden, sie ist jedoch hässlich und keine tatsächliche Lösung:

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

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

</div>

Abschlag

Für Markdown ist dies beabsichtigt. Aus dem Inline-HTML- Abschnitt der Markdown-Referenz:

Beachten Sie, dass die Markdown-Formatierungssyntax nicht in HTML-Tags auf Blockebene verarbeitet wird. Beispielsweise können Sie in einem HTML-Block keine Markdown- Betonung verwenden .

Für Tags auf Span-Ebene ist dies jedoch ausdrücklich zulässig:

Im Gegensatz zu HTML-Tags auf Blockebene wird die Markdown-Syntax in Tags auf Span-Ebene verarbeitet.

Abhängig von Ihrem Anwendungsfall könnten Sie also mit der Verwendung von a spananstelle von a davonkommen div.

CommonMark

Wenn die von Ihnen verwendete Bibliothek CommonMark implementiert , haben Sie Glück. Beispiel 108 und 109 der Spezifikation zeigen, dass der Inhalt als Markdown analysiert wird, wenn Sie eine leere Zeile zwischen dem HTML-Block und dem Markdown-Code beibehalten:

<div>

*Emphasized* text.

</div>

sollte funktionieren, während das Folgende nicht funktionieren sollte:

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

Wiederum erkennen einige Implementierungen gemäß demselben Abschnitt in der Referenz ein zusätzliches markdown=1Attribut im HTML-Tag, um das Parsen von Markdown darin zu ermöglichen.

Obwohl es in StackOverflow noch nicht zu funktionieren scheint:

GitHub Pages unterstützt das markdown="1"Attribut zum Parsen von Markdowns in HTML-Elementen, z

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

Hinweis: Ab 2019/03 funktioniert dies nicht mehr auf github.com, sondern nur auf GitHub-Seiten.

Hinweis:markdown="1" Anführungszeichen wie in werden von HTML5 nicht benötigt. Wenn Sie jedoch keine Anführungszeichen ( markdown=1) verwenden, erkennt GitHub diese nicht als HTML. Außerdem ist der Support derzeit fehlerhaft. Sie erhalten wahrscheinlich eine falsche Ausgabe, wenn Ihr HTML-Element größer als ein einzelner Absatz ist. Zum Beispiel konnte ich aufgrund von Fehlern keine Markdown-Liste in ein div einbetten.

Wenn Sie sich in einer Umgebung befinden, in der markdown="1"dies nicht funktioniert, aber spanfunktioniert, können Sie es auch verwenden, <span style="display:block">damit Klassen auf Blockebene damit kompatibel sind, z

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

Tipp: <span class="note"></span> ist kürzer als <div class="note" markdown="1"></div>. Wenn Sie also das CSS steuern, möchten Sie es möglicherweise lieber verwenden <span>und display: block;zu Ihrem CSS hinzufügen .

Markdown Extra wird benötigt, um Markdown-Formatierungen in HTML-Blöcken durchführen zu können. Lesen Sie die hier angegebene Dokumentation -> https://michelf.ca/projects/php-markdown/extra/

Mit Markdown Extra können Sie Text im Markdown-Format in jedes Tag auf Blockebene einfügen. Sie tun dies, indem Sie dem Tag ein Markdown-Attribut mit dem Wert 1 hinzufügen - was markdown = "1" ergibt.

Letzter Ausweg:

Bei einigen Bibliotheken kann zwischen Groß- und Kleinschreibung unterschieden werden.

Versuchen Sie <DIV>stattdessen <div>und sehen Sie, was passiert.

Markdownsharp hat diese Eigenschaft - obwohl bei StackOverflow ohnehin alle DIVs entfernt werden, erwarten Sie also nicht, dass es hier funktioniert.

Wenn Sie sich die Dokumente zum Erweiternhtml von Markierungen ansehen und die Renderer-Methode ändern, können Sie die Teile zwischen Tags durch analysierte Markdowns ersetzen. Ich habe keine umfangreichen Tests durchgeführt, aber es hat bei meinen ersten Versuchen funktioniert.

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

Bearbeiten

Dieser neue reguläre Ausdruck stellt sicher, dass nur Markdowns mit Zeilen zwischen ihm und den HTML-Tags analysiert werden.

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