[Obs＃97] Highlightr外掛豐富Obsidian筆記的外觀

先前錄過兩支影片介紹在Markdown裡添加文字顏色的方法，但最簡單的方法非Highlightr外掛莫屬。

Highlightr外掛具備可設定的快捷鍵與彈出式小視窗，提供了非常容易操作的介面。

警告❗️
1. <mark class="hltr-red">Markdown標準並無變更文字顏色的語法，此方法可能會造成別的Markdown編輯器無法正常閱讀</mark>。
2. 有些<mark class="hltr-green">佈景主題</mark>會造成產生PDF顏色錯誤，若發生顯示正常、PDF有誤時，換一個主題試看看

1. 外掛選項

1.1. Highlight方法

1. inline-styles：直接把指定的背景色添加在插入的<mark>...</mark>標籤裡
   • 不使用額外的CSS檔，可攜性高
2. css-classes：使用CSS類別
   • 需要外部CSS檔，但比較容易自訂樣式。

1.2. Highlight樣式

有4種樣式可選擇，無法同時存在：

1. None: 無特殊樣式
2. Lowlight: 下半部加背景色
3. Floating: 下划線
4. Rounded: 圓框
5. Realistic: "現實感"樣式

css-classes的類別格式是hltr-顏色，可能會受使用的佈景主題影響到。
例如Sanctum佈景主題在Dark主題時，Lowlight樣式的文字前景是黑色，必須自訂改成預設的文字前景：

.hltr-red, mark.hltr-red, .markdown-preview-view mark.hltr-red {
  color: var(--text-normal);
}

2. 相關鏈接

• chetachiezikeuzor/Highlightr-Plugin: A minimal and aesthetically pleasing highlighting menu that makes color-coded highlighting much easier 🎨.
• Obs＃52 變更Obsidian段落顏色與重點高亮度的CSS片段
• Obs＃39 利用CSS變更文字顏色，侵入性小。Obsidian專屬～

3. 教學影片

＃＃

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

• [Obs＃52] 變更段落顏色與重點高亮度的CSS片段 (0則留言, 2021/09/20)
• [Obs＃39] 利用CSS變更文字顏色，侵入性小 (0則留言, 2021/05/10)
• [Obs＃86] 分享與編輯器相關的21個Obsidian外掛 (0則留言, 2022/05/08)
• [Obs＃92] Obsidian彙編文章的簡單方法：2個外掛＋1個CSS片段 (0則留言, 2022/07/16)
• [Obs＃78] 輔助Markdown初學者的利器：Markdown Shortcuts與cMenu (0則留言, 2022/03/27)
• Obs145｜輔助Markdown初學者的Editing Toolbar外掛 (0則留言, 2023/12/02)
• [Obs＃45] 軟體工程師必備的6個Obsidian外掛 (0則留言, 2021/08/13)
• Obsidian 1.0新手教學—打造個人知識管理利器，專屬的第二大腦 (2022年) (4則留言, 2022/10/22)
• [Obs＃107] Obsidian全方位搜尋：OmniSearch外掛 (0則留言, 2022/11/20)
• [Obs＃96] Obsidian分頁調整： CSS樣式與外掛，讓分頁操作更簡便 (0則留言, 2022/09/10)
• [Obs＃25] 美化筆記的兩個外掛：Emoji Toolbar與Icons與自訂CSS樣式 (0則留言, 2021/01/30)
• Obs129｜Obsidian除了CSS片段以外的CSS進階用法與兩個CSS外掛 (0則留言, 2023/05/14)
• Obs152｜終於能產生書籤與頁碼了！與PDF相關的外掛：Better Export PDF＆PDF++ | 修訂 (0則留言, 2024/02/18)
• [Obs＃28] 與Table of Contents外掛相關的幾個HTML小技巧 (0則留言, 2021/03/13)
• [Obs＃43] 美化內部連結外觀：使用Supercharged Links外掛，並增加連結的功能選項 (0則留言, 2021/06/04)