質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
Gatsby

Gatsbyとは、Reactベースの静的サイトジェネレータ。最新のフロントエンド技術を活かし、機能豊富なWebサイトやアプリケーションを作ることが可能です。GraphQLを用いてあらゆるソースからサイトのデータを取得。指定した設定に基づいて静的サイトを構築することができます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Markdown

Markdownは、文書の構造、修飾情報を記述するための軽量マークアップ言語です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

3688閲覧

Markdownの中のHTMLの中でMarkdownを書くには?

teraha

総合スコア59

Gatsby

Gatsbyとは、Reactベースの静的サイトジェネレータ。最新のフロントエンド技術を活かし、機能豊富なWebサイトやアプリケーションを作ることが可能です。GraphQLを用いてあらゆるソースからサイトのデータを取得。指定した設定に基づいて静的サイトを構築することができます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Markdown

Markdownは、文書の構造、修飾情報を記述するための軽量マークアップ言語です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/07/03 23:20

Gatsby.jsでサイトを作成しています。

Markdownの文書の中で画像を横並びにしようと以下のようなコードを書きました。

markdown

1<div style='display: flex;'> 2 <div style='width: 50%;'> 3 ![画像](/images/aaa.png) 4 </div> 5 <div style='width: 50%;'> 6 ![画像](/images/bbb.png) 7 </div> 8</div>

ブラウザでページを見ると、![画像](/images/aaa.png)がテキストとして表示されており、imgタグに変換されていませんでした。

Markdown > html > Markdown
のように入れ子にすることはできないのでしょうか?

Google等で検索したのですが
「Markdownの中ではHTMLタグが使えます」
みたいな情報ばかり出てきて、目的の情報を見つけられませんでした。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

K_3578

2021/07/05 01:17 編集

そういうオリジナルのもの作るしかないと思いますけど。 少なくとも私もそんな機能があるライブラリは見たことないですし需要がないんじゃないですかね。
guest

回答3

0

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

大抵のマークダウン(のコード機能)ではそれができるようになっていません。
ご自身が確認された結果が全てです(teratailで採用されてるライブラリも同じ)。
主に「その中で書かれた文字列をインデント含めてそのまま表示する」機能ですしね。
そういう仕様です。やりたいことは「imgタグを書く」ことなのでしょうし、そのまま書いてください。
本体を改修すればできなくはないでしょうけど、茨の道となりそうです。

投稿2021/07/03 23:38

編集2021/07/05 00:52
m.ts10806

総合スコア80861

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

teraha

2021/07/04 22:00

できないんですね。 htmlの中で、{}で囲むとMarkdownとして認識される、みたいな機能があるんじゃないかと予想してたんですが……
m.ts10806

2021/07/04 22:24 編集

そこはドキュメント確認してください。 https://www.gatsbyjs.com/docs 言ってしまえば「仕様」ですし、マークダウンのcodeは先に書いたようにあくまで「その中のテキストをインデントや改行含めてそのまま表示する」機能なので、中に別のマークダウンの機能があっても変換しないのが「仕様」と言えます。 なので、変換したいのでしたら自身で改修するしかありません。 htmlタグが使える=imgタグ使える のですから普通にimgタグ使えば良いと思うのですけど。
teraha

2021/07/04 23:48

その仕様が発見できなかったのでteratailで質問しています。 <img>タグを使えば画像が表示されることはもとより承知しております。
m.ts10806

2021/07/05 00:10

ドキュメントに書いてない なら「できない」で良いのではと。 質問内容からはドキュメント確認した旨も仕様を確認しようとしたことも分かりませんでした。 自身がやりたいことはきっと出来るはずだ、という前提と思い込みが先行して「仕様を確認する」が抜け落ちているように見受けられます。
teraha

2021/07/05 00:30

ドキュメントに書いていないのか、 書いてあるが自分が見つけられないだけなのか、 切り分けができないので。
m.ts10806

2021/07/05 00:35

ドキュメントを読んだかすらわかりませんでした。 質問本文には「Google等で検索した」としか書かれていません。 キーワードも、その結果かくにんした記事も提示されていませんので、他者には本当に調べたかどうかすら分かりませんよ。 それに本件「できない」で終わると思ってたのですが、終われない理由は何ですか?
teraha

2021/07/05 00:45

m.ts10806様が、「たぶんできない」のような個人の予想を書いているだけで、仕様を把握した上で解答しているようには見えないので。 識者の方からの回答を待っている状態です。
m.ts10806

2021/07/05 00:50

では、回答修正しておきますね。マークダウンの仕様です。 ご自身で既に実際にやって結果出てるのでこれ以上求めても出ませんし、ドキュメント確認したくないための言い訳にされないほうが良いかと(コメントからそういうニュアンスに見えます)。 結局質問に何も追記されないなら、状況も変わりません。
m.ts10806

2021/07/05 00:57

矛盾が起きることにも気づいてほしいです。 マークダウンでコードを提示するということは、ブラウザに「htmlとして解析してほしい」ではなく、「コードをそのまま表示してほしい」ということ。 ![画像](/images/aaa.png) をマークダウンの機能に当ててしまうと画像の表示をしてしまいます。ユーザーにコードを見せたいのにimgタグとして解釈させるのは要件に反します。 なので、要件を満たすには内部は無変換とするしかありません。
teraha

2021/07/05 01:03

「コードをそのまま表示する」という話のソースは?
m.ts10806

2021/07/05 01:14

あぁ、失礼。 マークダウンのcodeのみの話をしていました。 まあいずれにしてもどのように探したのか分かりませんが、自身の書いたコードと「Markdownの中ではHTMLタグが使えます」という結果が全てですね。htmlで書いてください。 もし、 自身がやりたいことはきっと出来るはずだ、という前提と思い込みが先行してなければ質問することなく済んでました。 今でもその思い込みは取れてないようですし… なので回答に先に「本体を改修すればできなくもない」とも書いておいたのですが… ライブラリやプラグインは利用者の理想すべてを満たしてくれる夢のツールではないですよ。 決まった機能を決まった分だけ提供してくれる道具です。 プラスαで望むなら自分でなんとかするしかないです。
teraha

2021/07/05 01:37

できないならできないで別にいいんです。 普通にimgタグ書けばすむ話ですから。 ただ、ソースの提示もなく「~だと思います」という回答だったのが、 断定に書き換えられた挙句、結局ソースの提示はなしなのが気になっております。
Zuishin

2021/07/05 01:38

「できない」ソースはどうやって提示すればいいんですか?
m.ts10806

2021/07/05 01:42

ご自身が書かれたコードがそもそものソースになっているのですけど。 それとも「ドキュメントとコード読むの面倒だから代わりに読んで確認してきて」という作業依頼でしょうか。
Zuishin

2021/07/05 01:43

できることなら大抵ドキュメントに書いてあるだろうけど、できないことが全て書かれているわけではないので、できないことを証明するにはソースコードを読むくらいしかないと思いますが、そこまでしろということでしょうか? ドキュメントに書いてないなら、恐らくできないだろうと推定できますが、それでは気に入らないんですよね?
teraha

2021/07/05 01:52

「コードをそのまま表示しているだけである」というような回答を頂いたので、 その解答の根拠となっているドキュメントを教えて頂きたいです。
m.ts10806

2021/07/05 01:56

この場合の「識者」は作者以上に適任な人はいないので、これで納得できないのでしたら、無関係の赤の他人より作者にフィードバックすることを強くすすめます。うまく聞けば「そのような仕様になった理由」も教えてくれるかもしれません。 (私はそのまま使ってなんの不便もないし理由は「自分が作るなら」の目線で理解しているのでわざわざ聞きませんが) 結局はドキュメントとから推察されることしか我々には分かりません。 断定としたのは質問者が説明で納得しなかったため(あと元々誤解させてしまっていた様子なので)で 根拠は「質問者がすでに試して結果が出ていること」が半分 「そもそもマークダウンとは」の仕様を理解した上でがもう半分です。 ドキュメントのマークダウンの項を読んでみて分かることもあるはずですが、読んだ気配がないことをずっと疑問に感じています。 まずは「できること」として認識されている「htmlは使用できる」部分を探して提示してくださいね
Zuishin

2021/07/05 02:01

> マークダウンのcodeのみの話をしていました。 これが通じていないということですか? コードをそのまま表示せよという意味なので、それにソースを求める意味がわかりません。
teraha

2021/07/05 02:26

もしかして <code> <div> ![画像](/images/aaa.png) </div> </code> みたいな書き方をした場合の話をしてます? <code>タグは使っていないです。
Zuishin

2021/07/05 02:30

つまり、その時点では、話が食い違っていただけでしょう。 食い違いとわかっていつまでも引っ張ることではないと思います。
m.ts10806

2021/07/05 02:37

コードが一部しか提示されてないので致し方ないことですね。 そこに気づいて 2021/07/05 10:14 のコメントの冒頭で書いたのですけどまだ読まれてなかったんですね。残念。 最後まで自身の書いた質問に追記も修正されることもなく自己解決されてしまった。残念。
guest

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> ![画像](/images/aaa.png) <code> </div> <div style='width: 50%;'> </code> ![画像](/images/aaa.png) <code> </div> </div> </code>

投稿2021/07/05 02:23

編集2021/07/05 02:36
teraha

総合スコア59

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Zuishin

2021/07/05 02:32

> 初めからこのリンクをご紹介いただけていれば…… 初めからそれをみつけていれば良かっただけですね。 「読め」「調べろ」は繰り返し言われています。 最初からその通りにすれば早かったでしょう。 なぜか回答者に解決の責任を押し付ける質問者が増えていますが、解決の責任は質問者にしかありません。 回答者はその手伝いをするだけです。
Zuishin

2021/07/05 02:39

> htmlとMarkdownの入れ子も実現できました。 それは入れ子ではないですね。 終了タグで終了しているので。 入れ子というのは、箱を並べるのではなく、箱の中に箱を入れるようなものを言います。
BeatStar

2021/07/05 02:46

>> 初めからこのリンクをご紹介いただけていれば そもそも前提が違う。 プログラマやSEは『調べること』と『考えること』が仕事です。 言われたことだけしかしない人は大成しません。 それに、仮に質問者さんの仰るように調べてあげて提示しても、 『わかんねーなら答えんな』とか逆ギレする人が多いです。 質問者さんがそういうタイプではないにしても、なんで『回答者だけが悪い』のでしょうか。
teraha

2021/07/05 03:02

ドキュメントを隅々まで読めば情報が手に入ることは承知しております。 結局、ドキュメントを隅々まで読みました。 「ドキュメントには書いていない」というのはミスリードであり、 実際にはドキュメントに書いてあったので小言を言わせてもらいました。
退会済みユーザー

退会済みユーザー

2021/07/05 03:07

独自拡張がなされている可能性のある仕様の調査において、原典にある記述を「できない根拠」として断ずることはできないですよ。 まぁ普通なら、原典と現象が一致した時点で「原典通りの挙動を確認した」で良いと思いますが、現象から判断することを良しとしないと言っているので、コードの該当箇所を整理して回答とするのが適切かと。
gentaro

2021/07/05 04:11

自分の調査不足を棚に上げて回答された内容に不満を垂れるのがシンプルに気に食わないので低評価しました。
m.ts10806

2021/07/05 06:47 編集

いつの間にか誰かが「ドキュメントに書いてない」と断定したことになっているのが意味不明なのと、結局自身が利用しているライブラリではなくマークダウンの現祖(基本理念を策定した人)を根拠としてしまうというミスリードを引き起こしているので低評価しています。(自分の都合の良いように曲解している。一切コメントを読んでない) 質問冒頭に書いてあるGatsby.jsの話は何処へ行ったのでしょうか。 思想は引き継いでいるかもしれませんが、100%それに準拠しているかどうかは別の話。 マークダウンそのものの話をしたいのかGatsby.jsというライブラリの話をしたいのか、軸を確定させてから投稿してください。 code使ってないと言いつつ「codeで入れ子ができた」というのも謎です。 既に指摘されてる通り、入れ子にはなってません。
Zuishin

2021/07/05 06:54

ああ、他の仕様を持ってきてたんですか。 マークダウンはどこかで標準化されているわけではなく、かなり方言があり、実装もそれぞれなので、できる処理系もできない処理系もあり得ます。 実際「自分で作ったら」と勧められているように、自分で作れば好きなようにできます。 何の根拠にもなってないので低評価しときます。
BeatStar

2021/07/05 08:26

> htmlとMarkdownの入れ子も実現できました とありますが、これは『入れ子ではない』です。 単に『共存』とかそういうのでしょ。 (もっと別の言い方だった気がするが) 少なくとも入れ子というのは、 for文の『中に』更にfor文がある…のような構造です。
K_3578

2021/07/05 08:32

入れ子になってないですし、回答に関係ない文句垂れてますんで、低評価してます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問