\n
這是一個的範例。The 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.
如果程式碼行數很多,可以搭配 屬性啟用行號功能:
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
無論顯示行號與否,皆可以使用 等語法來強調特定的程式碼範圍:
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 = 010 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 += 115 if i == min_len:16 return strs[0][:min_len]17 return ''18
19s = Solution()20print(s.longestCommonPrefix(['a', 'ab']))
屬性可用於輔助說明程式碼:
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 操作介面:
[user@localhost] $ls[user@localhost] $cat a.txt
如果高亮區域包含了範例輸出,可以搭配 屬性來指定指令範圍:
[user@localhost] $lsa.txtb.txt[user@localhost] $cat a.txthello world
含有斷行的指令會根據 的填寫結構自動辨識:
[user@localhost] $ls \>-a \>-ltotal 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
保留了許多客製化的彈性,請見範例:
Node.js
>nodeWelcome to Node.js v16.14.2.Type ".help" for more information.>0.2 + (... 3 / 5...)0.8
MySQL
mysql>set @my_var = 'foo';mysql>set @my_other_var = 'bar';
mysql>CREATE TABLE people (-> first_name VARCHAR(30) NOT NULL,-> last_name VARCHAR(30) NOT NULL->);Query OK, 0 rows affected (0.09 sec)
PowerShell
1ps c:\users\gocreating>Write-Host `2>>'Hello' `3>>'from' `4>>'PowerShell!'5Hello from PowerShell!6ps c:\users\gocreating>Write-Host 'Goodbye from PowerShell!'7Goodbye from PowerShell!
如果你的 必須使用到 mdx 的保留字元,為了避免頁面渲染失敗,可以使用 Javascript Expression 來替換該字元。
replOptions={{ prompt: "backslash " + String.fromCharCode(92) }}replOptions={{ prompt: "backslash \u005C" }}
嵌入程式碼
嵌入程式碼