先前介紹過多個多欄位式樣式的外掛:

Horizontal Block是新的外掛,其特點如下:

  1. 自訂外觀:可勾選啟用每個區域的設定按鈕,可設定區塊背景顏色、文字顏色與縮小、加大欄寬
  2. 欄寬可視窗化拖拉調整
  3. 欄位的分隔符號是---,不使用 3 個倒引號,對程式碼區塊更加友善
  4. Simple Columns必須在開頭指定ID,Horizontal Block不須ID
  5. Simple Columns有新增區塊的命令,

1. 範例

  • 程式碼語言:horizontalhblock
  • 欄位分隔:---
````hblock
### Callouts
> [!INFO] Callouts
>  column 3-1
>  column 3-2
>> [!ERROR] Error description
>>  Nested callout
---
### Codeblock
JavaScript
```js
let msg = "Hello, world!";
let url = window.location.href;
```
---
### 3.1. Image
![](https://raw.githubusercontent.com/emisjerry/upgit/master/2024/1711524303000xhzo15.png)
````

gh|700

2. 使用

  1. 插入程式碼區塊,語言以horizontalhblock指定。
  2. 子區塊以---分隔。
  3. 選項設定裡可啟用子區塊的功能按鈕。

3. 💡 相關鏈接

💡 解說文章(繁體中文): https://jdev.tw/blog/8991/

💡 Explanation article(English)

💡 解説記事(日本語)

✅ Simple-Columns Plugin: https://github.com/Josie1902/Simple-Columns
✅ Horizontal Block Plugin: https://github.com/iCodeAlchemy/horizontal-blocks

##