Hugo 其他

Markdown 語法

#

Code Fences

#

Code Fences是用來顯示程式碼, 支援的有: java、python、c++、html、json、yaml、toml、bash、sh、xml....你也可以選擇text
語法如下

```[語言] {options}

Options有

• lineons - 是否顯示行號: true or table
• lineonsstart - 從第幾行開始顯示行號
• hi_lines=[…], 哪幾行要highlight

Example:
python codes，顯示行數，將第2行和4~5行highlight

1
2
3
4
5

def hello_world():
    print("這行會被高亮") # 第 2 行
    a = 10
    b = 20 # 第 4 行
    return a + b # 第 5 行

Details

#

可擴展內容，語法如下:

{{<details summary="It is a summary" >}}
Write something~
{{</details >}}

加上open=“true"會default打開，若否則需要點擊才能開啟。
Example:

Admonition

#

應該稱為Github Flavored Markdown Admonition，有[!TIP]、[!NOTE]、[!IMPORTANT]、[!WARNING]、[!CAUTION]，會有對應的icon，你也可以自己替換成其他的，內容也可以折疊(+/-):

> [!TIP]
> A Tip type admonition.

> [!NOTE]+ Custom Title
> A collapsible admonition with custom title.

> [!NOTE]+ Custom Title + Custom Icon
> A collapsible admonition with custom title and icon.
{icon="fire"}

引文

#

語法如下:

>縮排語法
>第一層
>>第二層
>>>第三層

縮排語法 第一層

第二層

第三層

Shortcodes

#

Alert

#

可用在Alert、inform、warn…等文字區塊裡面，差別在於你給的icon是哪一種。語法如下:

{{< alert icon="pencil" >}} 這是筆記內容 {{< /alert >}}

Figure

#

使用Figure可以讓你的圖片有說明文字，且排版會比你用![]()來的整齊。語法如下:

{{< figure 
    src="my_img.png" 
    alt="主介面" 
    caption="底下的說明文字" 
    link="點擊圖片跳轉的網頁連結" 
>}}

YoutubeLite

#

輕量版的Youtube，你可以給定一些參數限制他從哪裡開始撥放。下面例子的播放是從130s開始並且在10s後停止:

{{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" params="start=130&end=10&controls=0" >}}

相關文章

#

🔗 Markdown 常用語法
🔗 Hugo shortcodes
🔗 blowfish shortcodes