Obsidian：以 Callout 形式展示時間軸&聊天氣泡

CSS 來自 @稻米鼠
時間軸：https://zji.me/8b93e651-e165-401c-aa97-3a15d841679f.html
聊氣泡：https://zji.me/cc6bc4d5-2255-40a2-9172-2e197c429d3c.html

利用 CSS 將特定的 Callout 語法渲染成時間軸 & 聊天氣泡。原文已經講得很清楚了，這裡做個備份。感興趣可以玩玩。

效果展示#

時間軸#

聊氣泡#

配置及使用示例#

時間軸 - 配置#

將以下代碼保存到 .obsidian/snippets/TimeLine.css 文件中（自行創建文件），然後在 Obsidian 設置 —— 外觀 —— 代碼片段中開啟。即可使用 timeline 類型 callouts 創建這種時間軸。

時間軸 - 使用示例#

> [!timeline] 就是展示這樣的時間線
> - **2024-05-01** *00:00* 就是開始放假吧
> - *05:45* 我是想晚點起的，奈何睡不著了
> - *06:30* 啊，咖啡啊，真的是續命的呢~
> - **2024-05-02** *08:00* 其實這就是個無序列表
> - **日期啦** 列表項最開始的加粗內容作為日期
> - *時間啦* 列表項最開始的斜體內容作為時間顯示
> - 反正日期和時間都省略也不是不行

聊氣泡 - 配置#

將以下代碼保存到 .obsidian/snippets/ChatBubble.css 文件中（自行創建文件），然後在 Obsidian 設置 —— 外觀 —— 代碼片段中開啟。即可使用 chat-bubble 類型 callouts 創建這種對話氣泡了。

聊氣泡 - 使用示例#

> [!chat-bubble]+ 聊氣泡的效果
> 
> - 依然是 callout 配合無序列表的形式，文字多也完全沒問題的。
> + 依次切換列表的顯示方向，是不同的列表，而不是列表項，同一個列表的列表項所在方向相同
> - 靈活使用 `-`、`+`、`*` 作為列表項的前綴符號就可以便捷地書寫了
> - 連續使用相同符號，氣泡就在同一邊
> 
> 2024-05-06 07:05:51
> 
> - 時間怎麼寫呢？
> + 普通文字（段落）就可以了
> + 也可以使用 callout 的折疊功能

CSS 代碼#

時間軸 TimeLine.css#

/**
 * TimeLine
 * @author: 稻米鼠
 * @description: 顯示時間軸的 callout 視圖
 * @created: 2023-09-16 09:23:10
 * @updated: 2024-05-05
 * @version: 0.0.1
 */
.callout[data-callout="timeline"] {
  --callout-color: 0, 191, 188;
  --callout-icon: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-gantt-chart"><path d="M8 6h10"/><path d="M6 12h9"/><path d="M11 18h7"/></svg>;
}
.callout[data-callout="timeline"] > .callout-content > ul {
  position: relative;
  margin-left: 7rem;
  padding-left: 6rem;
  padding-bottom: 1rem;
  border-left: 3px solid rgba(0, 191, 188);
  font-size: 1rem;
}
.callout[data-callout="timeline"] > .callout-content > ul::before {
  content: " ";
  position: absolute;
  width: 13px;
  height: 13px;
  box-sizing: border-box;
  left: -7.5px;
  top: -12px;
  border: 2px solid rgba(0, 191, 188);
  border-radius: 50%;
}
.callout[data-callout="timeline"] > .callout-content > ul > li {
  position: relative;
  margin-bottom: .3rem;
  line-height: 1.6rem;
  list-style: none;
}
.callout[data-callout="timeline"] > .callout-content > ul > li > strong:first-child {
  position: absolute;
  left: -13rem;
  display: block;
  width: 6rem;
  font-size: .8rem;
  font-weight: normal;
  text-align: center;
  line-height: 1.2rem;
  margin-top: .2rem;
  border: 2px solid rgba(0, 191, 188);
  border-radius: 12px;
}
.callout[data-callout="timeline"] > .callout-content > ul > li > em:first-child,
.callout[data-callout="timeline"] > .callout-content > ul > li > strong:first-child+em {
  position: absolute;
  left: -5rem;
  display: block;
  width: 4rem;
  color: white;
  font-size: .8rem;
  font-weight: normal;
  text-align: center;
  line-height: 1.2rem;
  margin-top: .2rem;
  background-color: rgba(0, 191, 188);
  border-radius: 12px;
}
.callout[data-callout="timeline"] > .callout-content > ul > li > em:first-child::before,
.callout[data-callout="timeline"] > .callout-content > ul > li > strong:first-child+em::before {
  content: " ";
  position: absolute;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  left: calc(-1rem - 6px);
  top: calc(.8rem - 4px);
  background-color: rgba(0, 191, 188);
  border-radius: 50%;
}

聊氣泡 ChatBubble.css#

/**
 * 聊氣泡
 * @author: 稻米鼠
 * @description: 顯示聊天氣泡的 callout 視圖
 * @created: 2024-05-06
 * @updated: 2024-05-06
 * @version: 0.0.1
 */

 .callout[data-callout="chat-bubble"] {
  --callout-color: 238, 237, 239;
  --callout-text-color:  24, 23, 25;
  --callout-tip-color:  145,144,145;
  --bubble-left: 255,254,255;
  --bubble-right: 150,236,106;
  --callout-icon: chevron-left;
  background: rgb(var(--callout-color));
  max-width: 480px;
  border-radius: .8rem;
  margin-left: auto !important;
  margin-right: auto !important;
}
.callout[data-callout="chat-bubble"] > .callout-title,
.callout[data-callout="chat-bubble"] > .callout-title > .callout-icon
.callout[data-callout="chat-bubble"] > .callout-title > .callout-icon > .svg-icon {
  color: var(--callout-text-color);
}
.callout[data-callout="chat-bubble"] > .callout-title > .callout-title-inner {
  text-align: center;
  flex-grow: 1;
}
.callout[data-callout="chat-bubble"] > .callout-content {
  padding: 1rem 0;
}
.callout[data-callout="chat-bubble"] > .callout-content > p {
  text-align: center;
  color: rgb(var(--callout-tip-color));
  font-size: .8rem;
  padding: 0 2rem;
}
.callout[data-callout="chat-bubble"] > .callout-content ul {
  display: flex;
  flex-direction: column;
  margin: 0 1rem;
  padding: 0;
}
.callout[data-callout="chat-bubble"] > .callout-content ul > li {
  position: relative;
  max-width: 80%;
  flex-shrink: 1;
  padding: .5rem 1rem;
  border-radius: 1rem;
  margin: .5rem 0;
  list-style: none;
}
.callout[data-callout="chat-bubble"] > .callout-content ul > li::before {
  position: absolute;
  box-sizing: content-box;
  content: " ";
  width: 0;
  height: 0;
  border: 1rem solid transparent;
  top: 0;
}
.callout[data-callout="chat-bubble"] > .callout-content ul:nth-child(2n+1) {
  align-items: start;
}
.callout[data-callout="chat-bubble"] > .callout-content ul:nth-child(2n+1) > li {
  background: rgb(var(--bubble-left));
}
.callout[data-callout="chat-bubble"] > .callout-content ul:nth-child(2n+1) > li::before {
  left: -1rem;
  border-top: 1rem solid rgb(var(--bubble-left));
}
.callout[data-callout="chat-bubble"] > .callout-content ul:nth-child(2n) {
  align-items: end;
}
.callout[data-callout="chat-bubble"] > .callout-content ul:nth-child(2n) > li {
  background: rgb(var(--bubble-right));
}
.callout[data-callout="chat-bubble"] > .callout-content ul:nth-child(2n) > li::before {
  right: -1rem;
  border-top: 1rem solid rgb(var(--bubble-right));
}