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只在閱讀模式生效

<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: 只有一個參數時，可以省略表示參數清單的 () 。
(x) => {}
  // or
x => {}

// 簡寫原則1但書: 但沒有參數時，不可省略 () 。
() => {}

// 簡寫原則2: 函數本體只有一行敘述時，可以省略表示函數區塊的 {} 。
// 而且這時自動將該行執行結果作為函數回傳值，不能使用 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. 變更設定後按Theme右方的儲存圖示

2.1. Select settings page

• 點擊Header則折疊區塊
• 未指定檔名且設定總是顯示Header則無折疊功能

3. CodeBlock Tabs Plugin

在程式碼區塊開頭以下列格式指定檔名：

[!SUCCESS]+ 標題格式
‘‘‘語言 {title:檔名（須有副檔名）}
實測時不必使用...

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. 教學影片

＃＃

您可能也會有興趣的類似文章

• Obs143｜分頁式介面的應用：HTML Tabs外掛；增加Obsidian呈現的便利性 (0則留言, 2023/10/15)
• Obs124｜跳，跳，跳乎伊勇！Obsidian用書籤和標籤快速在檔案間跳轉 (1則留言, 2023/04/23)
• Obs141｜Opener與Open Gate外掛－開啟在新分頁與開啟網頁＋內嵌網頁 (0則留言, 2023/09/24)
• Obs126｜Obsidian 2023/04 7個新外掛介紹與評析 (0則留言, 2023/04/29)
• Obsidian 1.0新手教學—打造個人知識管理利器，專屬的第二大腦 (2022年) (4則留言, 2022/10/22)
• [Obs＃84] 另一個更簡便的筆記分欄作法：使用Columns外掛 (0則留言, 2022/04/30)
• Obsidian Tab Shortcuts彙總 (0則留言, 2022/08/31)
• [Obs＃86] 分享與編輯器相關的21個Obsidian外掛 (0則留言, 2022/05/08)
• Obs145｜輔助Markdown初學者的Editing Toolbar外掛 (0則留言, 2023/12/02)
• Obs＃120 | Chronology：筆記年表一覽無遺 (0則留言, 2023/03/26)
• Obs136｜3 個方法讓你用Obsidian QATT外掛讀取外部檔案 (0則留言, 2023/08/27)
• Obsidian(黑曜石) 高亮度顯示或變更文字顏色的3種方法 (4則留言, 2020/07/01)
• [Obs＃34] 用Tabs外掛形成分頁式佈局 (0則留言, 2021/04/21)
• [Obs＃95] Obsidian v0.16對於使用介面的強化 (0則留言, 2022/09/04)
• Obs135｜解鎖簡易Dataview查詢：驚人的SQL技巧，使用Query All The Things(QATT)外掛 (0則留言, 2023/08/19)