0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Obsidianで「ファイル名付きコードブロック」を実現する方法

0
Last updated at Posted at 2026-03-19

はじめに

Qiitaでは以下のように、コードブロックの先頭にファイル名を書くと、コードブロック上部にファイル名のラベルが出てきますよね。

image.png

image.png

コレ、いいですよね。

しかし、Obsidianではこの書き方はそのまま使えません。
ファイル名の部分が出ないのです。

image.png

そこで代替手段を3つ、ご紹介します。

手っ取り早い方法1: 先頭行にコメントアウトで書く

// php:application/helpers/admin_helper.php

function format_date($date) {
    if (empty($date)) {
        return $date;
    }
    return str_replace('-', '/', $date);
}

誰もが真っ先に思いつく、場合によっては、今これを見ているあなたも、
やっているかもしれないやり方です。

これでもいいっちゃ、いいんですが、なんかこう、エレガントじゃないですよねぇ。

手っ取り早い方法2: Calloutsシンタックスを使う

まずは、プラグインなしで簡単にできる方法です。
別名: Annotation記法

書き方

> [!NOTE]+ php:application/helpers/admin_helper.php
> ```php
> function format_date($date) {
>     if (empty($date)) {
>         return $date;
>     }
>     return str_replace('-', '/', $date);
> }
> ```

image.png

書き方のルール

  • > [!NOTE]+ {label} … この部分は必須です。
    • > [!~~~]+ の部分は、>も含めて必須です。
      • >の後の半角スペースも必須です。OK: > [!~~~]+ NG: >[!~~~]+
    • {label} は任意の文字列を入れられます。主にファイル名を入力して頂ければと。
    • > [!CAUTION]+ {label} など、NOTE 以外も記述可能です。詳しくは公式サイトのCallouts シンタックスの説明をご確認ください。
  • > ```{syntax_name}  … 入力任意。入力した場合、シンタックスハイライトが利用可能です。(対応する言語の場合)
    • >とバッククォートの間の、半角スペース一つは必須です。
    • すべてのコードブロックの最初に> が必要です。
      • >の後の半角スペースも必須です。

表示イメージ

image.png

PDF出力イメージ

image.png

メリット

  • すぐ使えること
  • 見た目もそれなりに整理されること
  • プラグイン不要であること

デメリット

  • Qiitaのコードブロックとは見た目が異なる
  • 記法がやや冗長

本命:Codeblock Customizerを使う

Qiita風に近い体験をしたいなら、これがベストな選択肢です。

プラグイン導入

  • Settings → Community plugins
  • Codeblock Customizer」で検索
  • インストール → 有効化

書き方

```php title=application/helpers/admin_helper.php
function format_date($date) {
    if (empty($date)) {
        return $date;
    }
    return str_replace('-', '/', $date);
}

image.png

表示イメージ

image.png

PDF出力イメージ

image.png

This is 最高にちょうどいい Code Block Label...

応用編

もっと細かいカスタマイズ方法は以下の記事を参考にしてください

注意

どうやら Calloutsシンタックスとは相性が悪いようでして、
一緒に書くと、以下のようにファイル名が表示されないようです。

image.png

Calloutsシンタックス内にコードブロックを書かず、
普通にコードブロックを分ければ、共存可能です。

> [!NOTE]+ 普通のCalloutシンタックスの書き方

```php
<?php echo "hello";

image.png

image.png

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?