快速上手

#

行內高亮

#

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

區塊高亮

#

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

• 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 語法

  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 屬性啟用行號功能：

1import React from 'react'
2import Typography from '@material-ui/core/Typography'
3import Layout from '../components/layout'
4import SEO from '../components/seo'
5
6const AboutPage = () => (
7  <Layout>
8    <SEO title="筆者" />
9    <Typography variant="h4">
10      筆者
11    </Typography>
12  </Layout>
13)
14
15export default AboutPage

強調特定範圍

#

無論顯示行號與否，皆可以使用 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

顯示行號搭配強調範圍：

1class Solution:
2    def longestCommonPrefix(self, strs):
3        if len(strs) == 0:
4            return ''
5        elif len(strs) == 1:
6            return strs[0]
7        min_len = min(*[len(s) for s in strs])
8
9        i = 0
10        while i < min_len:
11            for j in range(1, len(strs)):
12                if strs[j][i] != strs[0][i]:
13                    return strs[0][:i]
14            i += 1
15        if i == min_len:
16            return strs[0][:min_len]
17        return ''
18
19s = Solution()
20print(s.longestCommonPrefix(['a', 'ab']))

標題

#

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

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

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

1User-agent: *
2Disallow:
3  
4Sitemap: https://gocreating.lation.app/sitemap.xml

REPL 模式

#

快速使用

#

您可以透過 replEnabled 屬性使區塊高亮看起來像是 Repl 操作介面：

[user@localhost] $ls
[user@localhost] $cat a.txt

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

ls
a.txt
b.txt
cat a.txt
hello world

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

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

  node
  Welcome to Node.js v16.14.2.
  Type ".help" for more information.
  0.2 + (
    3 / 5
  )
  0.8

• MySQL

  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

  1Write-Host `
  2'Hello' `
  3'from' `
  4'PowerShell!'
  5Hello from PowerShell!
  6Write-Host 'Goodbye from PowerShell!'
  7Goodbye from PowerShell!

跳脫字元

#

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

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