[Obs#90] Callouts擴充:CalloutTypesetting CSS Snippet

..

1. 安裝

  1. GitHub點擊【Copy raw content】圖示,將內容存入儲存庫資料夾/.obsidian/snippets/CalloutTypesetting.css檔案。
  2. 設定→外觀→重新載入CSS Snippets

2. 設定

使用Style Settings外掛設定。

3. 語法

[!TIP] 語法

 > [!Callout類型 | Typesetting]:在標準的Callout中括號裡用Pipe (|)符號增加擴充的CSS類別,可用空白分隔多個擴充類別 

4. 使用範例

4.1. ltr 橫排由左到右

[!REF | ltr]+ 《錯誤》 鄭愁予
我打江南走過
那等在季節裡的容顏如蓮花般開落

東風不來,三月的柳絮不飛
你的心如小小的寂寞的城
恰若青石的街道向晚
跫音不響,三月的春帷不揭
你底心是小小的窗扉緊掩

我達達的馬蹄是美麗的錯誤
我不是歸人,是個過客…

01|700

4.2. rtl 橫排右靠對齊

[!REF | rtl]+ 《錯誤》 鄭愁予
我打江南走過
那等在季節裡的容顏如蓮花般開落

東風不來,三月的柳絮不飛
你的心如小小的寂寞的城
恰若青石的街道向晚
跫音不響,三月的春帷不揭
你底心是小小的窗扉緊掩

我達達的馬蹄是美麗的錯誤
我不是歸人,是個過客…

01|700

4.3. vertical-lr 豎排由左到右

[!REF|vertical-lr]+ 《錯誤》 鄭愁予
我打江南走過
那等在季節裡的容顏如蓮花般開落

東風不來,三月的柳絮不飛
你的心如小小的寂寞的城
恰若青石的街道向晚
跫音不響,三月的春帷不揭
你底心是小小的窗扉緊掩

我達達的馬蹄是美麗的錯誤
我不是歸人,是個過客…

01|700

4.4. vertical-rl 豎排由右到左

[!REF|vertical-rl]+ 《錯誤》 鄭愁予
我打江南走過
那等在季節裡的容顏如蓮花般開落

東風不來,三月的柳絮不飛
你的心如小小的寂寞的城
恰若青石的街道向晚
跫音不響,三月的春帷不揭
你底心是小小的窗扉緊掩

我達達的馬蹄是美麗的錯誤
我不是歸人,是個過客…

01|700

4.5. vertical-rl + wide 豎排由右到左+寬版

[!REF|vertical-rl wide]+ 《錯誤》 鄭愁予
我打江南走過
那等在季節裡的容顏如蓮花般開落

東風不來,三月的柳絮不飛
你的心如小小的寂寞的城
恰若青石的街道向晚
跫音不響,三月的春帷不揭
你底心是小小的窗扉緊掩

我達達的馬蹄是美麗的錯誤
我不是歸人,是個過客…

01|700

4.6. vertic`al-rl+keep-height 豎排由右到左+區塊高度固定

[!REF | vertical-rl keep-height]- 《錯誤》 鄭愁予
我打江南走過
那等在季節裡的容顏如蓮花般開落

東風不來,三月的柳絮不飛
你的心如小小的寂寞的城
恰若青石的街道向晚
跫音不響,三月的春帷不揭
你底心是小小的窗扉緊掩

我達達的馬蹄是美麗的錯誤
我不是歸人,是個過客…

01|700

4.7. vertical-lr + upright

[!REF | vertical-lr upright] Poem
When I was one-and-twenty
I heard a wise man say,
「Give crowns and pounds and guineas
But not your heart away;
Give pearls away and rubies
But keep your fancy free.」
But I was one-and-twenty,
No use to talk to me.

When I was one-and-twenty
I heard him say again,
「The heart out of the bosom
Was never given in vain;
』Tis paid with sighs a plenty
And sold for endless rue.」
And I am two-and-twenty,
And oh, 』tis true, 』tis true.
我打江南走過
那等在季節裡的容顏如蓮花般開落

東風不來,三月的柳絮不飛
你的心如小小的寂寞的城
恰若青石的街道向晚
跫音不響,三月的春帷不揭
你底心是小小的窗扉緊掩

我達達的馬蹄是美麗的錯誤
我不是歸人,是個過客…

01|700

4.8. vertical-lr + sideways

  • sideways: 文字轉90度

[!REF | vertical-lr sideways] Poem
When I was one-and-twenty
I heard a wise man say,
「Give crowns and pounds and guineas
But not your heart away;
Give pearls away and rubies
But keep your fancy free.」
But I was one-and-twenty,
No use to talk to me.

When I was one-and-twenty
I heard him say again,
「The heart out of the bosom
Was never given in vain;
』Tis paid with sighs a plenty
And sold for endless rue.」
And I am two-and-twenty,
And oh, 』tis true, 』tis true.

我打江南走過
那等在季節裡的容顏如蓮花般開落

東風不來,三月的柳絮不飛
你的心如小小的寂寞的城
恰若青石的街道向晚
跫音不響,三月的春帷不揭
你底心是小小的窗扉緊掩

我達達的馬蹄是美麗的錯誤
我不是歸人,是個過客…

01|700

4.9. vertical-rl + l-align 豎排+左靠

  • l-align與r-align只對豎排有效

[!REF | vertical-rl l-align]- 《錯誤》 鄭愁予
我打江南走過
那等在季節裡的容顏如蓮花般開落

東風不來,三月的柳絮不飛
你的心如小小的寂寞的城
恰若青石的街道向晚
跫音不響,三月的春帷不揭
你底心是小小的窗扉緊掩

我達達的馬蹄是美麗的錯誤
我不是歸人,是個過客…

01|700

4.10. vertical-rl + r-align 豎排+右靠

  • 閱讀模式才能看到右靠效果

[!REF | vertical-rl r-align]- 《錯誤》 鄭愁予
我打江南走過
那等在季節裡的容顏如蓮花般開落

東風不來,三月的柳絮不飛
你的心如小小的寂寞的城
恰若青石的街道向晚
跫音不響,三月的春帷不揭
你底心是小小的窗扉緊掩

我達達的馬蹄是美麗的錯誤
我不是歸人,是個過客…

[!REF | vertical-rl r-align]- Poem: 《海燕》 高爾基

在蒼茫的大海上……在高傲地飛翔
在蒼茫的大海上……在高傲地飛翔
在蒼茫的大海上,狂風捲集着烏雲。在烏雲和大海之間,海燕像黑色的閃電,在高傲地飛翔。
一會兒翅膀碰着波浪,一會兒箭一般地直衝向烏雲,它叫喊着,──就在這鳥兒勇敢的叫喊聲裏,烏雲聽出了歡樂。
在這叫喊聲裏──充滿着對暴風雨的渴望!在這叫喊聲裏,烏雲聽出了憤怒的力量、熱情的火焰和勝利的信心。
海鷗在暴風雨來臨之前呻吟着,──呻吟着,它們在大海上飛竄,想把自己對暴風雨的恐懼,掩藏到大海深處。
海鴨也在呻吟着,──它們這些海鴨啊,享受不了生活的戰鬥的歡樂:轟隆隆的雷聲就把它們嚇壞了。
蠢笨的企鵝,膽怯地把肥胖的身體躲藏到懸崖底下……只有那高傲的海燕,勇敢地,自由自在地,在泛起白沫的大海上飛翔!
烏雲越來越暗,越來越低,向海面直壓下來,而波浪一邊歌唱,一邊衝向高空,去迎接那雷聲。
雷聲轟響。波浪在憤怒的飛沫中呼叫,跟狂風爭鳴。看吧,狂風緊緊抱起一層層巨浪,惡狠狠地把它們甩到懸崖上,把這些大塊的翡翠摔成塵霧和碎末。
海燕叫喊着,飛翔着,像黑色的閃電,箭一般地穿過烏雲,翅膀掠起波浪的飛沫。
看吧,它飛舞着,像個精靈,──高傲的、黑色的暴風雨的精靈,——它在大笑,它又在號叫……它笑那些烏雲,它因為歡樂而號叫!
這個敏感的精靈,——它從雷聲的震怒裏,早就聽出了睏乏,它深信,烏雲遮不住太陽,──是的,遮不住的!
狂風吼叫……雷聲轟響……
一堆堆烏雲,像青色的火焰,在無底的大海上燃燒。大海抓住閃電的箭光,把它們熄滅在自己的深淵裏。這些閃電的影子,活像一條條火蛇,在大海里蜿蜒遊動,一晃就消失了。
——暴風雨!暴風雨就要來啦!
這是勇敢的海燕,在怒吼的大海上,在閃電中間,高傲地飛翔;這是勝利的預言家在叫喊:

01|700

01|700

5. 相關鏈接

6. 教學影片

##


想在手機閱讀更多css資訊?下載【香港矽谷】Android應用
分享到Facebook
技術平台: Nasthon Systems