Gatsby.jsでサイトを作成しています。
Markdownの文書の中で画像を横並びにしようと以下のようなコードを書きました。
markdown
1<div style='display: flex;'> 2 <div style='width: 50%;'> 3  4 </div> 5 <div style='width: 50%;'> 6  7 </div> 8</div>
ブラウザでページを見ると、
がテキストとして表示されており、img
タグに変換されていませんでした。
Markdown
> html
> Markdown
のように入れ子にすることはできないのでしょうか?
Google等で検索したのですが
「Markdownの中ではHTMLタグが使えます」
みたいな情報ばかり出てきて、目的の情報を見つけられませんでした。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
下記のような質問は推奨されていません。
- 質問になっていない投稿
- スパムや攻撃的な表現を用いた投稿
適切な質問に修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

回答3件
3
html
1<pre> 2 test 3 <img src="/images/aaa.png"> 4</pre>
という記述が成立するので、code
ブロック内の[](/images/aaa.png)
も変換してあげれば、「入れ子」で表現することは可能です。
Markdown のライブラリに手を入れるか、出力直前で変換してあげることで実装するのが良いでしょう。
参考まで。
投稿2021/07/05 03:27
編集2021/07/05 03:30
退会済みユーザー
総合スコア0
下記のような回答は推奨されていません。
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
3
大抵のマークダウン(のコード機能)ではそれができるようになっていません。
ご自身が確認された結果が全てです(teratailで採用されてるライブラリも同じ)。
主に「その中で書かれた文字列をインデント含めてそのまま表示する」機能ですしね。
そういう仕様です。やりたいことは「imgタグを書く」ことなのでしょうし、そのまま書いてください。
本体を改修すればできなくはないでしょうけど、茨の道となりそうです。
投稿2021/07/03 23:38
編集2021/07/05 00:52総合スコア80699
下記のような回答は推奨されていません。
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
回答へのコメント
2021/07/05 01:38
2021/07/05 01:43
2021/07/05 02:01
2021/07/05 02:30

0
自己解決
Note that Markdown formatting syntax is not processed within block-level HTML tags. E.g., you can’t use Markdown-style emphasis inside an HTML block.
Markdownの開発者(JOHN GRUBER)のサイトの中で、
HTMLタグの中ではマークダウン記法は使えない旨が明記されていました。
https://daringfireball.net/projects/markdown/
できないことは証明できないみたいな話ではなく、初めからこのリンクをご紹介いただけていれば……
htmlとMarkdownの入れ子も実現できました。
<code> <div style='display: flex;'> <div style='width: 50%;'> </code>  <code> </div> <div style='width: 50%;'> </code>  <code> </div> </div> </code>
投稿2021/07/05 02:23
編集2021/07/05 02:36総合スコア59
下記のような回答は推奨されていません。
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
こちらの回答が複数のユーザーから「過去の低評価」という指摘を受けました。
回答へのコメント
2021/07/05 02:32
2021/07/05 02:39
2021/07/05 02:46

退会済みユーザー
2021/07/05 03:07
2021/07/05 04:11
2021/07/05 06:47 編集
2021/07/05 06:54
2021/07/05 08:26
2021/07/05 08:28
2021/07/05 08:32

あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
同じタグがついた質問を見る
Gatsbyとは、Reactベースの静的サイトジェネレータ。最新のフロントエンド技術を活かし、機能豊富なWebサイトやアプリケーションを作ることが可能です。GraphQLを用いてあらゆるソースからサイトのデータを取得。指定した設定に基づいて静的サイトを構築することができます。
HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。
JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
Markdownは、文書の構造、修飾情報を記述するための軽量マークアップ言語です。
CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。