🐧

Markdownの拡張仕様まとめ

公開日
5か月前
2024-01-16
更新履歴

概要

この記事では、様々なサービスのMarkdownの独自の拡張仕様についてまとめています。例えば、コードブロックへのファイル名表示やコンテンツの埋め込みのようなものです。自分のサービスでMarkdownの拡張を実装するときに、できるだけスタンダードな記述方法を採用したいと思って調べたものです。

コードブロックのファイル名表示

: で区切る

```ruby:qiita.rb
puts 'The best way to log and share programmers knowledge.'
```

このように言語の指定部分を : で区切ってファイル名を記述することで表示します。

  • Qiita
  • Zenn
  • esa

基本未対応ですが、プラグインなどで : 区切りに対応できる場合もあります:

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)

画像表示の ![alt](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.

参考: [Markdown] An option to highlight a "Note" and "Warning" using blockquote (Beta) · community · Discussion #16925

esa

esaではHTMLを使って表現できるようです。

参考: esaで:::infoを使う方法 #Markdown - Qiita

コンテンツの折りたたみ

<details>

<details><summary>サンプルコード</summary>

```rb
puts 'Hello, World'
```
</details>

HTMLの <details> で表示します。VS Codeのプレビューも対応しています。

Directiveを使う

:::details タイトル
表示したい内容
:::

Zennでは上記のような専用の記述方法があります。HTMLを許可したくないような場合はこの方法が良いですね。

参考資料