Obs169｜タブ表示を強化するプラグイン：Tabs と Tab-panels

以前のObs143｜タブ式インターフェースの応用：HTML Tabsプラグイン；Obsidianの表示をより便利にで、HTML Tabsプラグインを使ってノート内にタブ形式のセグメントを表示する方法を紹介しました。今回は、より多機能なobsidian-tabsプラグインと、比較的シンプルなTab-Panelsを紹介します。

1. Tabs

コードブロックを使用し、言語にtabsを指定します（例: ```tabs）
最初の行で表示スタイルを指定できます
- タブ位置：top, bottom, left, right
- タブ行数：one, multi
タブの内容をダブルクリックすると、編集ウィンドウが開き、内容を編集できます
「Convert selected text to tabs」コマンドがあります

top, multi
tab: 🔢LaTeX 数式
数式の例
$$
 \begin{cases}
 a_1x+b_1y+c_1z=d_1\\
 a_2x+b_2y+c_2z=d_2\\
 a_3x+b_3y+c_3z=d_3\\
 \end{cases}
 $$
tab: 🖼️画像<br>2行目の説明
画像を埋め込み

![gh|700](https://raw.githubusercontent.com/emisjerry/upgit/master/2024/1729215597000xfh5k3.png)
tab: HTML
```HTML
<html>
<head>
  <script src="test.js"></script>
  <link rel="stylesheet" href="mystyle.css">
</head>
<body>
  <div class="note">
  My Note
  </div>
</body>
<script>
  test();
</script>
</html>
```

tab: CSS
```css
body {
  color: red;
  background-color: lightYellow;
}
```

tab: タブ5
タブ5の内容
tab: タブ6
タブ6の内容
tab: タブ7
タブ7の内容
tab: タブ8
タブ8の内容
tab: タブ9
タブ9の内容
tab: タブ10
タブ10の内容
tab: タブ11
タブ11の内容
tab: タブ12
タブ12の内容

An image to describe post

1.1. HTML Tabsとの違い

---tab JavaScript は tab: JavaScript に変更されます
Tabs: 最初の ~~~tabs は引き続き使用可能、または ````tabs` に変更できます

tab: 🛜HTML
```html file:test.html ln:true
<html>
<head>
  <script src="test.js"></script>
  <link rel="stylesheet" href="mystyle.css">
</head>
<body>
  <div class="note">
  My Note
  </div>
</body>
<script>
  test();
</script>
</html>
```
tab: 🖼️CSS
```css file:mystyle.css ln:true
body {
  color: red;
  background-color: lightYellow;
}
```
tab: 🧑‍💻JavaScript
```js file:test.js ln:true
<script>
  function test() {
    alert("Hello!");
  }
</script>
```

Codeblock Customizerとの連携

tabs を【Basic】→【Exclude languages】リストに追加するのを忘れないでください

2. Tab Panels

コードブロックを使用し、言語にtab-panelsを指定します（例: ```tab-panels）
各タブの形式： --- タブ名
タブのタイトルにHTMLタグは使用できません

--- 最初のタブ
数式の例
$$
 \begin{cases}
 a_1x+b_1y+c_1z=d_1\\
 a_2x+b_2y+c_2z=d_2\\
 a_3x+b_3y+c_3z=d_3\\
 \end{cases}
 $$
 
--- 🖼️画像<br>2行目の説明
画像を埋め込み

![gh|700](https://raw.githubusercontent.com/emisjerry/upgit/master/2024/1729215597000xfh5k3.png)

--- HTML
```html
<html>
<head>
  <script src="test.js"></script>
  <link rel="stylesheet" href="mystyle.css">
</head>
<body>
  <div class="note">
  My Note
  </div>
</body>
<script>
  test();
</script>
</html>
```

--- CSS
```css
body {
  color: red;
  background-color: lightYellow;
}
```

--- タブ5
タブ5の内容

--- タブ5
タブ5の内容

--- タブ6
タブ6の内容

--- タブ7
タブ7の内容

--- タブ8
タブ8の内容

An image to describe post

Codeblock Customizerとの連携

tab-panels を【Basic】→【Exclude languages】リストに追加するのを忘れないでください

3. Tab Panels

コードブロックを使用し、言語にtab-panelsを指定します（例: ```tab-panels）
各タブの形式： --- タブ名
タブのタイトルにHTMLタグは使用できません

--- 最初のタブ
数式の例
$$
 \begin{cases}
 a_1x+b_1y+c_1z=d_1\\
 a_2x+b_2y+c_2z=d_2\\
 a_3x+b_3y+c_3z=d_3\\
 \end{cases}
 $$
 
--- 🖼️画像<br>2行目の説明
画像を埋め込み

![gh|700](https://raw.githubusercontent.com/emisjerry/upgit/master/2024/1729215597000xfh5k3.png)

--- HTML
```html
<html>
<head>
  <script src="test.js"></script>
  <link rel="stylesheet" href="mystyle.css">
</head>
<body>
  <div class="note">
  My Note
  </div>
</body>
<script>
  test();
</script>
</html>
```

--- CSS
```css
body {
  color: red;
  background-color: lightYellow;
}
```

--- タブ5
タブ5の内容

--- タブ5
タブ5の内容

--- タブ6
タブ6の内容

--- タブ7
タブ7の内容

--- タブ8
タブ8の内容

Codeblock Customizerとの連携

tab-panels を【Basic】→【Exclude languages】リストに追加するのを忘れないでください