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 Codeblock Customizer の使い方(コードブロックラベルの装飾)

0
Last updated at Posted at 2026-03-19

ダウンロード

これはどんなプラグイン?

  • Obsidianのコードブロック表示を拡張し、見た目や機能をカスタマイズできるプラグイン
  • 行番号・ハイライト・折りたたみ・タブ化・テーマ変更などを細かく制御可能です
  • 技術ノートやコードの可読性・整理・表現力を向上させることが出来ます

簡単な説明

主な使い方

リッチなシンタックスハイライトを有効化する(試験中の機能)

Select settings page > Appearance & Styling を選択した後、

Use PrismJS syntax highlighting in editor mode を ONにすると、
編集モードでもリッチなシンタックスハイライトが利用できるようになります。

image.png

※開発者によると、この機能は試験中らしいので、
バグがあったらGitHubなどで開発者に報告すると良いです。

一部だけ強調表示する hl:{row} or hl:{text}

```js hl:2,4-5
const a = 1;
const b = 2;
console.log(a + b);
console.log("x");
console.log("y");

hl:2,4-5 のように書くと、2 行目と 4〜5 行目を強調できます。
文字列一致での指定もでき、hl:test なら test を含む行がハイライトされます。

image.png

文字列そのものをハイライトする hlt:{text}

```js hlt:console
console.log("a");
alert("b");
console.log("c");

hlt:consoleconsole という文字列を含む部分だけをハイライトします。
行番号付きの指定や、開始文字列〜終了文字列の範囲指定も可能です

image.png

行番号を指定する ln:{bool} or ln:{offsetNumber}

プラグイン設定で Enable line numbers を有効にすると、
コードブロックに行番号を表示できます。(デフォルトでON)
個別ブロックでは ln:true / ln:false をすることで行番号表示のオンオフを制御できます。

```python ln:false
print("a")
print("b")
print("c")

image.png

また、行番号のオフセットも可能です。ln:5

```python ln:5
print("line 5")
print("line 6")

image.png

image.png

行の折りたたみ fold

デフォルトでは、コードが展開されていますが、
fold を付けると、文書を開いたときに折りたたみ状態で表示できます。
ヘッダーをクリックして折りたたみでき、既定状態や保持動作も設定可能です。

```ts fold
function main() {
  return 42;
}

image.png

複数のコードブロックをタブ化する group

連続するコードブロックに同じ group 名を付けると、
1 つのタブ UI にまとめられます。
tab で表示名も指定できます。
グループ名は文書ごとに一意である必要があります。

```js group:sample tab:JavaScript
console.log("hello");

image.png

ターミナル風プロンプトを出す prompt:<name>

prompt:<name> を使うと、bash や zsh などのターミナル風表示にできます。

```bash prompt:bash user:mugiwara host:pc1 path:/var/www/html
ls
cd src
pwd

image.png

また、CLI の生出力に対して parse:bash のように書くと、
既定 prompt の正規表現に基づいて自動で色付けできます。

行を隠す hide

hide パラメータで特定行や範囲を折りたたみ風に隠せます。

```js hide:2-4
const a = 1;
const hidden1 = 2;
const hidden2 = 3;
const hidden3 = 4;
console.log(a);

image.png

インラインコードを装飾する

Select settings page > Appearance & Styling を選択した後、

一番下にある Inline Code Settings の、
Enable inline code styling を ONにすると、
インラインコードの背景色・文字色を変更できます。

image.png

image.png

さらに syntax highlight を有効化した場合、
{cpp} printf("\nHello World!") のような書式が使えます。

image.png

ラベルをあえて表示しない exclude

何らかの理由でラベル表示をしたくない場合は、exclude オプションを付ければ、ラベル表示をやめることができます。

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?