
在每一篇文章的開頭，我們都應該撰寫 Frontmatter，如此才能標記這篇文章的屬性。

```plaintext
---
index:
  skip: true
  partialSlug: awesome-post
hero:
  src: /posts/awesome-post/hero.jpg
  backdrop: false
  fadedEdge: true
title: 主文章
excerpt: 內文摘要
toc:
  isDisabled: false
publishDate: '1970-01-01'
tags:
  - WIP
  - Early Release
  - variant: negative
    children: 18+
keywords:
  - keyword1
  - keyword2
collections:
  - ./my-awesome-post-1.mdx
  - ./my-awesome-post-2.mdx
remark: 不想被看見的文章相關資料
---
此處開始即為 MDX 內文
```

## 屬性繼承

如果您的文章使用了 `collections`，那麼子文章將會受父文章影響而產生以下副作用：

1. 子文章的 `slug` 將會隱性地前綴父文章的 `slug`
2. 子文章的 `keywords` 將會隱性地後綴父文章的 `keywords`

使用 Frontmatter


# 一級標題

## 二級標題

### 三級標題

#### 四級標題

##### 五級標題

###### 六級標題

# 文章

修光接物認味老幾化教全為展現不也不基車部……去出我社性有陽。的了國人吸母……只動此和邊才提最呢的問布跟，是持思必點背演要事時地現保服可於感，也生少早。有不的素體神可話北智元羅我！子康相來用治世是人多重情們定區麼北歌車政對民美決一起過發經輕前解久神、趣她冷利我我，作以其習人兒片到居也樣夜為修的而一人人天在景關大有靈能慢念件，考石大不、取話整麼車；鄉己北的家公家的麗是白元評公化麼的。目好絕河理……實出變生且馬媽流，福備流中間，求夠是，最打有王很一無進步將打低果果獲了多；只不情具想定下開我落人本少最。所理親進電：看思才後！經對以經意當。

一美位市銀使立人似他對考們方傳工友變？個花連老程。式部部氣意、動有所在：出不新出教大中時臉是我會實和較，裡必住水房本光分主，人要要無者手王化小他法學女晚小就幾們片些開各期來自了時而，買當沒工的低他幾為在：生發息觀花港他意家。

望廠念我雜藝市岸；助別司國上房兩要媽臺空完起示整面國面所當。

破十他麼的快。對急一資、名來前對？為這個著天傳。引想務樹面行是得很：就分易……小有中當後社的我顯外方樂前中？資有師不黑把部險一紅。體的問場去的所情點度，從片它科值明應；製是手色。名居望，不放音目生！是成法保面何了生要得教雖獲。卻走思星通天是是、公球氣小是。

行論會風些聲的上行謝？

**粗體**，_斜體_，~~刪除線~~

# 超連結

文章內插入的[超連結](/blog/sample-mdx-collection/)長這樣。（此連結會回到主文章）

# 水平線

在文章原始碼內輸入`---`、`___`或`***`即可產生水平線：

---

# 引用

> 我思故我在

> Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program.

> 我思故我在
> <cite>- 法國哲學家笛卡爾</cite>

> Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program.
> <cite>- Linus Torvalds</cite>

# 清單

## 有序清單

1. 甲
   1. 甲上
   2. 甲下
1. 乙
1. 丙

## 無序清單

- 甲
- 乙
  - 乙上
  - 乙下
- 丙

# 上下標

- 19<sup>th</sup> (使用 html 產生)
- H<sub>2</sub>O (使用 html 產生)

# 註腳

您可以在文字中插入註腳[^footnote]，使文章的排版[^typography]更加整齊且有秩序，適時增添學術導向的風采。

[^footnote]: **腳註**

    又名註腳、筆記、札記（德語：Fußnote；英語：Footnote），是讀書所做的筆錄、見解、體會、看法、觀點、心得、感想的總稱。

[^typography]: 排版，在固定版面內擺置各種不同型態的資料。

# 縮寫

<abbr title="請求意見稿（英語：Request for Comments，縮寫：RFC），又翻譯作意見徵求，意見請求，請求評論是由網際網路工程任務組（IETF）發布的一系列備忘錄。">RFC</abbr> 和 <abbr title="網際網路工程任務組（英語：Internet Engineering Task Force，縮寫：IETF）是一個開放的標準組織，負責開發和推廣自願網際網路標準（Internet Standard，英文縮寫為 STD），特別是構成 TCP/IP 協定族（TCP/IP）的標準。">IETF</abbr> 都是軟體界很常聽見的詞彙。

# 定義

CAP

: 在理論計算機科學中，CAP 定理（CAP theorem），又被稱作布魯爾定理（Brewer's theorem），它指出對於一個分布式計算系統來說，不可能同時滿足以下三點： 1. 一致性（Consistency） （等同於所有節點訪問同一份最新的數據副本） 2. 可用性（Availability）（每次請求都能獲取到非錯的響應——但是不保證獲取的數據為最新數據） 3. 分區容錯性（Partition tolerance）（以實際效果而言，分區相當於對通信的時限要求。系統如果不能在時限內達成數據一致性，就意味著發生了分區的情況，必須就當前操作在 C 和 A 之間做出選擇。）

ACID

: 是指資料庫管理系統（DBMS）在寫入或更新資料的過程中，為保證事務（transaction）是正確可靠的，所必須具備的四個特性：原子性（`atomicity`，或稱不可分割性）、一致性（`consistency`）、隔離性（`isolation`，又稱獨立性）、持久性（`durability`）。


文字排版

使用表情符號


原始碼內圖片：

![minion](/posts/betterlog-manual/minion.png "這是minion")

網路圖片：

![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")

![狗狗](https://picsum.photos/id/237/200/300)

使用圖片


# 一般表格

| 欄位一 | 欄位二 |
| ----- | ------ |
| 內容  | 內容    |

# 置右

| 欄位一 | 欄位二 |
| -----:| -----:|
| 內容  | 內容   |

# 大表格

| 欄位1 | 欄位2 | 欄位3 | 欄位4 | 欄位5 | 欄位6 | 欄位7 | 欄位8 | 欄位9 | 欄位10 | 欄位11 | 欄位12 | 欄位13 | 欄位14 | 欄位15 | 欄位16 | 欄位17 | 欄位18 | 欄位19 | 欄位20 |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 | 內容 |


使用表格


# 快速上手

## 行內高亮

這是一個`行內`的`高亮`範例。The `inline code` could be an English term.

## 區塊高亮

只要使用標準的 Markdown Fenced Code Block 語法，搭配語言名稱，即可產生高亮過的視覺呈現。

- JSX語法

  ```jsx
  import React from 'react'
  import Typography from '@material-ui/core/Typography'
  import Layout from '../components/layout'
  import SEO from '../components/seo'

  const AboutPage = () => (
    <Layout>
      <SEO title="筆者" />
      <Typography variant="h4">
        筆者
      </Typography>
    </Layout>
  )

  export default AboutPage
  ```

- Diff 語法

  ```diff
  obj = {
    k1: 'v1',
  - k2: 'v2',
  - k2_1: 'v2_1',
  + k3: 'v3',
  + k3_1: 'v3_1',
    k4: 'v4',
  };
  ```

當內容過長時，高亮區塊會自動套用卷軸：

```
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
```

# 進階使用區塊高亮

## 行號

如果程式碼行數很多，可以搭配 `showLineNumbers` 屬性啟用行號功能：

```jsx showLineNumbers
import React from 'react'
import Typography from '@material-ui/core/Typography'
import Layout from '../components/layout'
import SEO from '../components/seo'

const AboutPage = () => (
  <Layout>
    <SEO title="筆者" />
    <Typography variant="h4">
      筆者
    </Typography>
  </Layout>
)

export default AboutPage
```

## 強調特定範圍

無論顯示行號與否，皆可以使用 `highlightLines="2,9-11"` 等語法來強調特定的程式碼範圍：

```jsx highlightLines="2,9-11"
import React from 'react'
import Typography from '@material-ui/core/Typography'
import Layout from '../components/layout'
import SEO from '../components/seo'

const AboutPage = () => (
  <Layout>
    <SEO title="筆者" />
    <Typography variant="h4">
      筆者
    </Typography>
  </Layout>
)

export default AboutPage
```

顯示行號搭配強調範圍：

```python showLineNumbers highlightLines="1,20"
class Solution:
    def longestCommonPrefix(self, strs):
        if len(strs) == 0:
            return ''
        elif len(strs) == 1:
            return strs[0]
        min_len = min(*[len(s) for s in strs])

        i = 0
        while i < min_len:
            for j in range(1, len(strs)):
                if strs[j][i] != strs[0][i]:
                    return strs[0][:i]
            i += 1
        if i == min_len:
            return strs[0][:min_len]
        return ''

s = Solution()
print(s.longestCommonPrefix(['a', 'ab']))
```

## 標題

`title` 屬性可用於輔助說明程式碼：

```python title="LeetCode 783. Minimum Distance Between BST Nodes"
class Solution:
    def minDiffInBST(self, root: Optional[TreeNode]) -> int:
        self.ans = float('inf')
        self.prev_val = -float('inf')
        def dfs(node):
            if node is None:
                return
            dfs(node.left)
            self.ans = min(self.ans, node.val - self.prev_val)
            self.prev_val = node.val
            dfs(node.right)
        dfs(root)
        return self.ans
```

或是提示檔案路徑及名稱：

```text title="public/robots.txt" showLineNumbers
User-agent: *
Disallow:
  
Sitemap: https://gocreating.lation.app/sitemap.xml
```

## REPL 模式

### 快速使用

您可以透過 `replEnabled` 屬性使區塊高亮看起來像是 Repl 操作介面：
  
```shell replEnabled
ls
cat a.txt
```

如果高亮區域包含了範例輸出，可以搭配 `replOptions.commandGroupLines` 屬性來指定指令範圍：

```shell replEnabled replOptions={{commandGroupLines: "1,4"}}
ls
a.txt
b.txt
cat a.txt
hello world
```

含有斷行的指令會根據 `replOptions.commandGroupLines` 的填寫結構自動辨識：

```shell replEnabled replOptions={{commandGroupLines: "1-3"}}
ls \
-a \
-l
total 2
-rw-r--r--     1 root  staff      43 Jan 12 14:16 a.txt
-rw-r--r--     1 root  staff    1743 Feb 16 12:09 b.txt
```

### 客製化 Prompt

`replOptions` 保留了許多客製化的彈性，請見範例：

- Node.js
  
  ```shell replEnabled replOptions={{prompt: ">", continuationPrompt: "...", commandGroupLines: "1,4-6"}}
  node
  Welcome to Node.js v16.14.2.
  Type ".help" for more information.
  0.2 + (
    3 / 5
  )
  0.8
  ```

- MySQL
  
  ```shell replEnabled replOptions={{prompt: "mysql>", continuationPrompt: "->", commandGroupLines: "1,2,4-7"}}
  set @my_var = 'foo';
  set @my_other_var = 'bar';

  CREATE TABLE people (
    first_name VARCHAR(30) NOT NULL,
    last_name VARCHAR(30) NOT NULL
  );
  Query OK, 0 rows affected (0.09 sec)
  ```

- PowerShell
  
  ```shell showLineNumbers highlightLines="1-4,6" replEnabled replOptions={{prompt: "ps c:\u005Cusers\u005Cgocreating>", continuationPrompt: ">>", commandGroupLines: "1-4,6"}}
  Write-Host `
  'Hello' `
  'from' `
  'PowerShell!'
  Hello from PowerShell!
  Write-Host 'Goodbye from PowerShell!'
  Goodbye from PowerShell!
  ```

### 跳脫字元

如果你的 `replOptions` 必須使用到 mdx 的保留字元，為了避免頁面渲染失敗，可以使用 Javascript Expression 來替換該字元。

```jsx
replOptions={{ prompt: "backslash " + String.fromCharCode(92) }}
replOptions={{ prompt: "backslash \u005C" }}
```

嵌入程式碼


畢氏定理可以用一個簡單的公式來表示：

$$
a^2 + b^2 = c^2
$$

其中 $a,b$ 代表直角三角形的短邊邊長，$c$ 代表最長邊邊長。


嵌入數學表示


BetterLog 支援撰寫 `PlantUML` 格式的 `CodeBlock`，該原始碼將會被編碼後置換成圖片。

```plantuml
class SimplePlantUMLPlugin {
    + transform(syntaxTree: AST): AST
}
```

```plantuml
@startuml
participant Participant as Foo
actor       Actor       as Foo1
boundary    Boundary    as Foo2
control     Control     as Foo3
entity      Entity      as Foo4
database    Database    as Foo5
collections Collections as Foo6
queue       Queue       as Foo7
Foo -> Foo1 : To actor 
Foo -> Foo2 : To boundary
Foo -> Foo3 : To control
Foo -> Foo4 : To entity
Foo -> Foo5 : To database
Foo -> Foo6 : To collections
Foo -> Foo7: To queue
@enduml
```


使用 PlantUML


在 MDX 引擎的輔助下，我們可以在文章內撰寫 Javascript expression，例如：

1 + 2 = {1 + 2}
0.1 + 0.2 = {0.1 + 0.2}（如實呈現浮點數誤差）

也可以在文章內使用全域元件：

<Button variant="positive" onClick={() => { alert("Nice") }}>Click Me</Button>

撰寫 Expression 或是嵌入 React 元件


__Advertisement :)__

- __[pica](https://nodeca.github.io/pica/demo/)__ - high quality and fast image
  resize in browser.
- __[babelfish](https://github.com/nodeca/babelfish/)__ - developer friendly
  i18n with plurals support and easy syntax.

You will like those projects!

---

# h1 Heading 8-)
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading


## Horizontal Rules

___

---

***


## Typographic replacements

Enable typographer option to see result.

(c) (C) (r) (R) (tm) (TM) (p) (P) +-

test.. test... test..... test?..... test!....

!!!!!! ???? ,,  -- ---

"Smartypants, double quotes" and 'single quotes'


## Emphasis

**This is bold text**

__This is bold text__

*This is italic text*

_This is italic text_

~~Strikethrough~~


## Blockquotes


> Blockquotes can also be nested...
>> ...by using additional greater-than signs right next to each other...
> > > ...or with spaces between arrows.


## Lists

Unordered

+ Create a list by starting a line with `+`, `-`, or `*`
+ Sub-lists are made by indenting 2 spaces:
  - Marker character change forces new list start:
    * Ac tristique libero volutpat at
    + Facilisis in pretium nisl aliquet
    - Nulla volutpat aliquam velit
+ Very easy!

Ordered

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa


1. You can use sequential numbers...
1. ...or keep all the numbers as `1.`

Start numbering with offset:

57. foo
1. bar


## Code

Inline `code`

Indented code

    // Some comments
    line 1 of code
    line 2 of code
    line 3 of code


Block code "fences"

```plaintext
Sample text here...
```

Syntax highlighting

``` js
var foo = function (bar) {
  return bar++;
};

console.log(foo(5));
```

## Tables

| Option | Description |
| ------ | ----------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

Right aligned columns

| Option | Description |
| ------:| -----------:|
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |


## Links

[link text](http://dev.nodeca.com)

[link with title](http://nodeca.github.io/pica/demo/ "title text!")

Autoconverted link https://github.com/nodeca/pica (enable linkify to see)


## Images

![Minion](https://octodex.github.com/images/minion.png)
![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")

Like links, Images also have a footnote style syntax

![Alt text][id]

With a reference later in the document defining the URL location:

[id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"


## Plugins

The killer feature of `markdown-it` is very effective support of
[syntax plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin).


### [Emojies](https://github.com/markdown-it/markdown-it-emoji)

> Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:
>
> Shortcuts (emoticons): :-) :-( 8-) ;)

see [how to change output](https://github.com/markdown-it/markdown-it-emoji#change-output) with twemoji.


### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup)

- 19^th^
- H~2~O


### [Footnotes](https://github.com/markdown-it/markdown-it-footnote)

Footnote 1 link[^first].

Footnote 2 link[^second].

Inline footnote^[Text of inline footnote] definition.

Duplicated footnote reference[^second].

[^first]: Footnote **can have markup**

    and multiple paragraphs.

[^second]: Footnote text.


### [Definition lists](https://github.com/markdown-it/markdown-it-deflist)

Term 1

:   Definition 1
with lazy continuation.

Term 2 with *inline markup*

:   Definition 2

    \{ some code, part of Definition 2 \}

    Third paragraph of definition 2.

_Compact style:_

Term 1
  ~ Definition 1

Term 2
  ~ Definition 2a
  ~ Definition 2b


### [Abbreviations](https://github.com/markdown-it/markdown-it-abbr)

This is HTML abbreviation example.

It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.

*[HTML]: Hyper Text Markup Language

### [Custom containers](https://github.com/markdown-it/markdown-it-container)

::: warning
*here be dragons*
:::


English Post Demo


此系列文章列舉了所有 BetterLog 目前版本所支援的語法，可供撰寫文章時作為參考。