Obs155｜プログラマーのコーディングの相棒：CodeBlock Customizer／Code Styler、Codeblock Tabs、Keyshots

コードブロックに関連するいくつかのプラグインを紹介します：Code Customizer、Code Styler、Codeblock Tabs、Keyshotsです。

特に注目すべきはKeyshotsです。

Keyshotsが単によく使うキーを追加する、Code Editor Shortcutsに似た機能だと思ったら、それは間違いです。Keyshotsは、キー設定を使い慣れたIDEのキーに設定できるだけでなく、多くの機能を追加します。例えば：

1. 表を挿入するための選択ダイアログ
2. Calloutを挿入するための選択ダイアログ
3. コードブロックを挿入するための選択ダイアログ
4. 正規表現の検索と置換ダイアログ
5. 複数のマルチカーソル操作

1. 機能デモ

• CodeBlock Tabsは閲覧モードでのみ有効です
• 2024/03/28: 別途 HTML Tabs pluginも利用可能です

<div class="flex">
  <div class="item">1</div>
  <div class="item flex-2">2</div>
  <div class="item">3</div>
</div>

.flex {
  display: flex;
  height: 300px;
  padding: 15px;
  background-color: #61a0f8;
  /* 以下の値を変更してみてください: row|row-reverse|column|column-reverse; */
  flex-direction: row;
}

.item {
  flex: 1;
  background-color: #f08bc3;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 2rem;
}

.flex-2 {
  flex-grow: 2;
  flex-shrink: 1;
  flex-basis: 0%;
  background-color: #f08bc3;
}

// ECMAScript/JavaScript 従来の関数定義構文
function(parameter_list) {
    return result;
}

// ES6 新構文。中央の矢印 => に注目。口語的には「左辺の引数を右辺のコードブロックに渡して処理する」と読めます。
(parameter_list) => {
    return result;
}

// 省略ルール1: 引数が1つの場合、引数リストを示す () を省略できます。
(x) => {}
  // or
x => {}

// 省略ルール1補足: ただし引数がない場合、() は省略できません。
() => {}

// 省略ルール2: 関数本体が1行のステートメントの場合、関数ブロックを示す {} を省略できます。
// さらに、その行の実行結果が自動的に関数の戻り値となり、return は使用できません。
(x, y) => {
    return x+y;
}
// or
(x, y) => x+y

2. Codeblock Customizer

Codeblock CustomizerとCode Stylerは機能が似ているため、どちらか一方を使用します。以下ではCodeBlock Customizerを例に説明します。

設定前の操作：

1. 使用するデフォルトテーマを選択：ObsidianまたはSolarized
2. 「Create your theme」に新しいテーマ名を入力し、＋ボタンを押す
3. 設定を変更したら、テーマ右側の保存アイコンを押す

```js file:arrow.js error:7-9 ln:12 hl:15-17

2.1. Select settings page

• ヘッダーをクリックするとブロックが折りたたまれます
• ファイル名が指定されておらず、ヘッダーを常に表示する設定の場合、折りたたみ機能はありません

3. CodeBlock Tabs Plugin

コードブロックの先頭に以下の形式でファイル名を指定します：

4. Keyshots Plugin

ショートカットキーを使い慣れたIDEのキーに設定します。デフォルトのIDEは以下の通りです：

• JetBrains IDEs: IntelliJ IDEA、WebStorm、PyCharm、...
• VS Code
• Visual Studio
• Keyshots デフォルト

選択後、ショートカットキーのウィンドウを開いて keyshots を検索し、キーを確認できます。

• デフォルトキー: List of Keyshots commands with IDE Mappings (新バージョンで追加されたキーは未記載)

4.1. JetBrains 常用キー

4.2. Keyshots キー

テスト: keyshots

5. 関連リンク

✅ Obsidian-CodeBlock-Tabs: https://github.com/JeminMau/Obsidian-CodeBlock-Tabs
✅ Obsidian-Code-Styler: https://github.com/mayurankv/Obsidian-Code-Styler
✅ CodeblockCustomizer: https://github.com/mugiwara85/CodeblockCustomizer
✅ obsidian-keyshots: https://github.com/KrazyManJ/obsidian-keyshots

6. 解説動画