wake-up-neo.com

Wie kann ich meinen Markdown in ein HTML-Div einbetten?

Ich verwende MarkEd , das GitHub implementiert - markout .

Ich habe einen gewissen Markdown:

## 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 Abschriftenabschnitt in ein div einschließen, zB:

<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 erscheint kein Abschlag, wörtlich "## Test heading" (Überschrift des Tests) im HTML-Code.

Wie kann ich meinen Abschlag richtig in ein Div einwickeln?

Ich habe die folgende Problemumgehung gefunden, es ist jedoch hässlich und kein tatsächlicher Fix:

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

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

</div>
41
mikemaccana

Markdown

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

Beachten Sie, dass die Markdown-Formatierungssyntax nicht in HTML-Tags auf Blockebene verarbeitet wird. Zum Beispiel können Sie den Markdown-Stil emphasis nicht innerhalb eines HTML-Blocks verwenden.

Es ist jedoch ausdrücklich für Tags auf Span-Ebene zulässig:

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

Abhängig von Ihrem Anwendungsfall können Sie also eine span anstelle einer div verwenden.

CommonMark

Wenn die von Ihnen verwendete Bibliothek CommonMark verwendet, haben Sie Glück. Das Beispiel 108 und 109 der Spezifikation zeigt, 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 Folgendes sollte nicht:

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

Einige Implementierungen erkennen ein weiteres markdown=1-Attribut im HTML-Tag, um das Parsen von Markdown darin zu ermöglichen.

Obwohl es in StackOverflow noch nicht zu funktionieren scheint:

46
LucasB

Markdown Extra ist erforderlich, damit Markdown-Formatierungen in HTML-Blöcken funktionieren können. Bitte überprüfen Sie die hier angegebene Dokumentation -> https://michelf.ca/projects/php-markdown/extra/

Mit Markdown Extra können Sie Markdown-formatierten Text in .__ einfügen. ein beliebiges Tag auf Blockebene. Dazu fügen Sie dem .__ ein Markdown-Attribut hinzu. Tag mit dem Wert 1 - das gibt Abschlag = "1"

9

GitHub Pages unterstützt das markdown="1"-Attribut, um das Markdown in HTML-Elementen zu analysieren, z. 

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

Hinweis: Anführungszeichen wie in markdown="1" werden von HTML5 nicht benötigt. Wenn Sie jedoch keine Anführungszeichen (markdown=1) verwenden, erkennt GitHub es nicht als HTML. Außerdem ist der Support momentan 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" nicht funktioniert, span jedoch funktioniert, können Sie <span style="display:block"> verwenden, 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 CSS steuern, empfiehlt es sich, <span> zu verwenden und display: block; zu Ihrem CSS hinzuzufügen.

5
Qwertie

Wenn Sie die Dokumente für Extending Marked betrachten und die html-Renderer-Methode ändern, können Sie so etwas tun, um die Teile zwischen Tags durch geparste Markierungen zu ersetzen. Ich habe noch nicht ausgiebig getestet, aber bei den ersten Versuchen hat es 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

diese neue Regex sorgt dafür, dass nur Markdown mit Zeilen zwischen den HTML-Tags analysiert wird.

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

Letzte Resort-Option:

Bei einigen Bibliotheken kann die Groß- und Kleinschreibung beachtet werden.

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

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

0
Simon_Weaver