web-dev-qa-db-ja.com

HTML divでマークダウンをラップするにはどうすればよいですか？

MarkEd を使用しており、これは GitHubフレーバーマークダウン を実装しています。

私はいくつかの作業マークダウンを持っています：

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

作成するもの：

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

そのマークダウンセクションをdivでラップしたい、例えば：

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

ただし、次のHTMLが返されます。

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

たとえば、マークダウンなし、文字通り「## Test heading」がHTMLに表示されます。

マークダウンをdivに適切にラップするにはどうすればよいですか？

次の回避策を見つけましたが、実際の修正ではなくいものです。

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

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

</div>
htmlmarkdowngithub-flavored-markdown
54
mikemaccana

マークダウン

Markdownの場合、これは仕様です。 Markdownリファレンスの Inline HTML セクションから：

Markdownフォーマット構文はブロックレベルのHTMLタグ内では処理されないことに注意してください。たとえば、HTMLブロック内ではMarkdownスタイルemphasisを使用できません。

ただし、スパンレベルのタグには明示的に許可されています。

ブロックレベルのHTMLタグとは異なり、Markdown構文はスパンレベルのタグ内で処理されます。

そのため、ユースケースによっては、spanの代わりにdivを使用することで逃げることができます。

CommonMark

使用するライブラリが CommonMark を実装している場合、幸運です。例の 108 および 109 は、HTMLブロックとマークダウンコードの間に空の行を保持すると、コンテンツがMarkdownとして解析されることを示しています。

<div>

*Emphasized* text.

</div>

動作するはずですが、以下は動作しません：

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

また、リファレンスの同じセクションによると、一部の実装では追加のmarkdown=1属性は、HTMLタグ内のMarkdownの解析を有効にします。

StackOverflowではまだ動作していないようですが：

52
LucasB

Markdown Extraは、HTMLブロック内でMarkdownフォーマットを機能させるために必要です。ここに記載されているドキュメントを確認してください-> https://michelf.ca/projects/php-markdown/extra/

Markdown Extraを使用すると、Markdown形式のテキストをブロックレベルのタグ内に配置できます。これを行うには、値1のタグにmarkdown属性を追加します。これにより、markdown = "1"が得られます

10
Adolfo Gomez Nasol

GitHub Pagesは、HTML要素内のマークダウンを解析するためにmarkdown="1"属性をサポートしています。

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

注： 2019/03の時点では、これはgithub.comでは機能せず、GitHubページのみが機能します。

注：markdown="1"のように引用符はHTML5では必要ありませんが、引用符（markdown=1）を使用しない場合、GitHubはそれをHTMLとして認識しません。また、現在サポートはバグがあります。 HTML要素が1つの段落よりも大きい場合は、誤った出力を受け取る可能性があります。たとえば、バグのため、div内にマークダウンリストを埋め込むことができませんでした。

markdown="1"は機能しないがspanは機能する環境にいる場合、別のオプションは<span style="display:block">を使用してブロックレベルのクラスと互換性を持たせることです。

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

ヒント：<span class="note"></span>は<div class="note" markdown="1"></div>よりも短いため、CSSを制御する場合は、<span>を使用してdisplay: block;をCSSに追加することをお勧めします。

9
Qwertie

Extending Marked のドキュメントを見て、htmlレンダラーメソッドを変更することで、タグ間の部分を解析済みマークダウンに置き換えることができます。広範なテストは行っていませんが、最初の数回の試行で機能しました。

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

編集

この新しい正規表現は、HTMLタグとその間にある行を含むマークダウンのみが解析されるようにします。

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

ラストリゾートオプション：

一部のライブラリでは、大文字と小文字が区別される場合があります。

<DIV> の代わりに <div>そして何が起こるかを見てください。

Markdownsharpにはこの特性があります-StackOverflowでは、とにかくすべてのDIVを取り除きますので、ここで動作するとは思わないでください。

0
Simon_Weaver