概要
この記事では、様々なサービスのMarkdownの独自の拡張仕様についてまとめています。例えば、コードブロックへのファイル名表示やコンテンツの埋め込みのようなものです。自分のサービスでMarkdownの拡張を実装するときに、できるだけスタンダードな記述方法を採用したいと思って調べたものです。
コードブロックのファイル名表示
: で区切る
```ruby:qiita.rb
puts 'The best way to log and share programmers knowledge.'
```このように言語の指定部分を : で区切ってファイル名を記述することで表示します。
- Qiita
- Zenn
- esa
基本未対応ですが、プラグインなどで : 区切りに対応できる場合もあります:
- VS Code
Markdown Named CodeBlocks - Obsidian
参考: Codeblock formatting with filename - Help - Obsidian Forum
meta field
```js filename="index.js"
console.log(1)
```このように言語の後をスペースで区切って filename="index.js" などのように指定する記述方法もあります。
- MDX
Next.jsのドキュメントではこのような記述方法です。 - Docusaurus
title="/src/components/HelloCodeTitle.js"のように記述できます。
対応していないサービス
コードブロックのファイル名表示に対応していないサービスもあります。
- GitHub
コンテンツの埋め込み
リンクカードやYouTubeの動画などのコンテンツを埋め込むための記述方法です。
@[card](URL)
画像表示の  に似た記述を使用します。
- Zenn
URLのみの行を変換する
前後に空白のあるURLだけの行を自動的に変換する方法です。
- Qiita
- Zenn
HTMLで埋め込む
<iframe>、<embed> を使用して埋め込みます。
- Qiita
コールアウト
注記や警告などを表示する方法です。Directiveを使う場合が多いです。GitHubでは引用の記述を拡張した方法を使っています。
Qiita
:::note info
インフォメーション
infoは省略可能です。
:::Docusaurus
:::note[Your Title **with** some _Markdown_ `syntax`!]
Some **content** with some _Markdown_ `syntax`.
:::Zenn
:::message
メッセージをここに
:::GitHub
> [!NOTE]
> Highlights information that users should take into account, even when skimming.esa
esaではHTMLを使って表現できるようです。
参考: esaで:::infoを使う方法 #Markdown - Qiita
コンテンツの折りたたみ
<details>
<details><summary>サンプルコード</summary>
```rb
puts 'Hello, World'
```
</details>HTMLの <details> で表示します。VS Codeのプレビューも対応しています。
- Qiita
- esa
- GitHub
- Docusaurus
- Obsidian
Directiveを使う
:::details タイトル
表示したい内容
:::Zennでは上記のような専用の記述方法があります。HTMLを許可したくないような場合はこの方法が良いですね。
