無聊～調整Blog主題設定

Posted on Edited on

前言

回顧系列(薪水小偷)系列又來了…因為不知道要弄什麼，所以乾脆Dig-in現在的NexT主題來看看有沒有什麼好玩的…

修改內容

Codeblock - Code fence效果調整

設定變更處

1
2
3
4
5
6
7
8
9
10
11
12
13
14
codeblock:
  # Code Highlight theme
  # All available themes: https://theme-next.js.org/highlight/
  theme:
    light: default
    dark: tomorrow-night
  prism:
    light: prism
    dark: prism-dark
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Available values: default | flat | mac
    style: mac

效果圖

使用Default/Flat效果如下

Default & Flat效果

使用Mac效果如下

Mac效果

看起來還是用Mac比較騷一點…..

Tag效果調整

設定變更處

1
2
3
4
5
6
7
8
9
10
11
12
# ---------------------------------------------------------------
# Tags Settings
# See: https://theme-next.js.org/docs/tag-plugins/
# ---------------------------------------------------------------

# Mermaid tag
mermaid:
  enable: ture
  # Available themes: default | dark | forest | neutral
  theme:
    light: default
    dark: dark

效果圖

啟用Mermaid繪圖

Markdown Code
1
2
3
4
5
6
7
#```mermaid                                 #這個要用code fence語法表示
sequenceDiagram
    Alice->John: Hello John, how are you?
    loop every minute
        John-->Alice: Great!
    end
#```
實際效果
sequenceDiagram
    Alice->John: Hello John, how are you?
    loop every minute
        John-->Alice: Great!
    end

不同風格 - default

Light theme

Dark theme

不同風格 - dark

Light theme

Dark theme

不同風格 - forest

Light theme

Dark theme

不同風格 - neutral

Light theme

Dark theme

我後來發現可能是我的Dark theme.js有問題，當Mermaid theme light & Dark設定不一樣的時候會只render light theme的樣式..所以我最終採用都一樣的dark theme

結論…

就是閒的蛋疼…實際上我也不怎麼用Mermaid畫圖就是了…