Trang nhằm mục đích dùng để tham khảo nhanh và giới thiệu về cách trang web này sẽ hiển thị Markdown và chỉ dành riêng cho tác giả, thường xuyên thay đổi và cập nhật các tính năng trên trang. Nếu có gì thắc mắc, xin vui lòng liên hệ tác giả.
Nội dung bài viết được soạn trên file markdown (.md). Nếu bạn chưa hiểu về nó hãy xem Markdown Guide - Markdown Shortcuts - chuẩn Markdown
- Keyboard: Sử dụng
<kbd>⌘</kbd> + <kbd>K</kbd>
<kbd>⌘</kbd> + <kbd>K</kbd>
để hiển thị ⌘ + K - Emoji: Sao chép và dán trực tiếp biểu tượng cảm xúc từ trang web này 🎉
Alert
<Alert type={'warning'} title={'WARNING'}>Content</Alert>
<Alert type={'warning'} title={'WARNING'}>Content</Alert>
warning
Something that tells you to be careful or tells you about something, usually something bad, before it happens.
important
Having great value or influence; very necessary; (used about a person) having great influence or authority.
caution
Great care, because of possible danger; to warn somebody not to do something.
tip
A small piece of useful advice about something practical.
note
A brief record of something written down to assist the memory or for future reference; a record or outline of a speech, statement, testimony, etc.
question
A sentence in an interrogative form, addressed to someone in order to get information in reply.
quote
To repeat (a passage, phrase, etc.) from a book, speech, or the like, as by way of authority, illustration, etc.
docs
Manuals, listings, diagrams, and other hard- or soft-copy written and graphic materials that describe the use, operation, maintenance, or design of software or hardware.
Aside
If you can't explain it simply, you don't understand it well enough.
<Aside>Content</Aside> <Aside position="left|right" styled>Content</Aside> <Aside position="left|right" styled={true}>Content</Aside> <Aside position="left|right" styled={true} title="Title">Content</Aside>
<Aside>Content</Aside> <Aside position="left|right" styled>Content</Aside> <Aside position="left|right" styled={true}>Content</Aside> <Aside position="left|right" styled={true} title="Title">Content</Aside>
Tabs
Bạn có thể sử dụng defaultIndexprop
để chỉ tab mặc định:
<Tabs items={['pnpm', 'npm', 'yarn']} defaultIndex="1"> <Tab>content pnpm</Tab> <Tab>content npm</Tab> <Tab>content yarn</Tab> </Tabs>
<Tabs items={['pnpm', 'npm', 'yarn']} defaultIndex="1"> <Tab>content pnpm</Tab> <Tab>content npm</Tab> <Tab>content yarn</Tab> </Tabs>
Và bạn sẽ có npm
là tab mặc định:
Image
<Image title={`Tiêu đề hình ảnh`} alt={`Mô tả hình ảnh`} src={`/static/banner.png`} width={480} height={270} priority />
<Image title={`Tiêu đề hình ảnh`} alt={`Mô tả hình ảnh`} src={`/static/banner.png`} width={480} height={270} priority />
Tweets
Sử dụng <Tweet id="1628832338187636740" />
<Tweet id="1628832338187636740" />
để hiển thị tweet của như bên dưới.
MathJax
-
Ví dụ để hiển thị hoặc sử dụng:
- Trên một dòng, sử dụng $math-expression$ $ x^n + y^n = z^n $ - Nhiều dòng, sử dụng $$math block$$ hoặc $$ ax^{2} + bx + c = 0 $$
- Trên một dòng, sử dụng $math-expression$ $ x^n + y^n = z^n $ - Nhiều dòng, sử dụng $$math block$$ hoặc $$ ax^{2} + bx + c = 0 $$
-
Nếu bạn muốn chèn một số ký tự đặc biệt, bạn phải đặt
\
ví dụ:\{ 1,2,3 \}
cho kết quả -
Sử dụng giá trị tuyệt đối, ví dụ:
\vert -2 \vert
cho kết quả -
Không sử dụng * cho biểu tượng dấu sao, hãy sử dụng
a \ast b
và cho kết quả -
Nếu bạn muốn nhập một ma trận như gõ mã code như dưới đây
$[A]=\begin{bmatrix}1 & 2 \\\\ 2 & 3.999 \end{bmatrix},$
$[A]=\begin{bmatrix}1 & 2 \\\\ 2 & 3.999 \end{bmatrix},$
Folder structure
Tạo một cấu trúc của cây thư mục
<Files title="Folder structure after generation" data={[ { name: ".contentlayer", children: [ { name: "generated", children: [ { name: "Post", children: [ { name: "posts__hello-world.mdx.json", isHighlighted: true }, ], }, ], }, {name: "index.js"}, {name: "types.d.ts"}, ], }, { name: "data", children: [ { name: "posts", children: [ { name: "hello-world.mdx", isHighlighted: true }, ], }, ], }, { name:"contentlayer.config.js" }, { name: "next.config.js" } ]} />
<Files title="Folder structure after generation" data={[ { name: ".contentlayer", children: [ { name: "generated", children: [ { name: "Post", children: [ { name: "posts__hello-world.mdx.json", isHighlighted: true }, ], }, ], }, {name: "index.js"}, {name: "types.d.ts"}, ], }, { name: "data", children: [ { name: "posts", children: [ { name: "hello-world.mdx", isHighlighted: true }, ], }, ], }, { name:"contentlayer.config.js" }, { name: "next.config.js" } ]} />
Syntax Highlighter
- Do, Don't, Do & Don't
<DnD> <Dont>content</Dont> <Do>content</Do> </DnD>
<DnD> <Dont>content</Dont> <Do>content</Do> </DnD>
:not(pre), :not(.code-block) { > code { background-color: 'red'; } }
:not(pre), :not(.code-block) { > code { background-color: 'red'; } }
:not(pre, .code-block) { > code { background-color: 'red'; } }
:not(pre, .code-block) { > code { background-color: 'red'; } }
- code inline:
- Sử dụng `default` để cho kết quả
default
- Sử dụng `title{:.objKey}` để cho kết quả
title
title
- Sử dụng `allPosts{:.variable.other.constant}` để cho kết quả
allPosts
allPosts
- Sử dụng `function{:.fn}` để cho kết quả
getStaticPaths()
getStaticPaths()
- Sử dụng `source_code_inline{:js}` để cho kết quả
console.log("Hello World!")
console.log("Hello World!")
- Xem thêm Editor Tokens và Scopes tại đây
- Sử dụng `default` để cho kết quả
- code blocks:
- showLineNumbers hiển thị số dòng trong code.
- title="pages/blog/[slug].tsx" tạo tiêu đề cho khối code.
- caption="Đoạn mô tả" tạo
caption
cho khối code. - {4, 6, 12} đánh dấu highligh các dòng muốn chọn.
- Sử dụng cú pháp /NextJS/ để highlight từ
NextJS
NextJS
hoặc dùng /NextJS/3-5 để đánh dấu các từ xuất hiện từ thứ3
3
đến thứ5
5
.
const bio = { Languages: ['JavaScript', 'PHP', 'Python'], Frontend: ['React', 'GraphQL', 'GatsbyJS', 'NextJS', 'SCSS', 'CSS'], Backend: ['Node.js', 'Docker', 'Webpack'], Databases: ['MongoDB', 'PostgreSQL'], Others: ['Git', 'Linux'], } Object.entries(bio).reduce((acc, [key, value]) => { const output = new Intl.ListFormat().format(value) return `${acc} \n ${key}: ${output}` }, '')
const bio = { Languages: ['JavaScript', 'PHP', 'Python'], Frontend: ['React', 'GraphQL', 'GatsbyJS', 'NextJS', 'SCSS', 'CSS'], Backend: ['Node.js', 'Docker', 'Webpack'], Databases: ['MongoDB', 'PostgreSQL'], Others: ['Git', 'Linux'], } Object.entries(bio).reduce((acc, [key, value]) => { const output = new Intl.ListFormat().format(value) return `${acc} \n ${key}: ${output}` }, '')
- Sử dụng
/age/#v
/name/#v
/setAge/#s
/setName/#s
/50/#i
/'Taylor'/#i
const [age, setAge] = useState(50); const [name, setName] = useState('Taylor');
const [age, setAge] = useState(50); const [name, setName] = useState('Taylor');
- Sử dụng
diff
để bật tô sáng code. Sử dụng dấu-
-
để ghi chú là xóa dòng , dấu+
+
để thêm dòng)
export const getStaticPaths = () => { return { paths: allPosts.map((post) => ({ - slug: post._raw.sourceFileName.replace(/\.mdx$/, ""), + slug: post.slug, })), fallback: false, } } export const getStaticProps = ({ params }) => { return { props: { - post: allPosts.find( - (post) => - post._raw.sourceFileName.replace(/\.mdx$/, "") === params.slug, - ), + post: allPosts.find((post) => post.slug === params.slug), }, } } export default function SinglePostPage() {...}
export const getStaticPaths = () => { return { paths: allPosts.map((post) => ({ - slug: post._raw.sourceFileName.replace(/\.mdx$/, ""), + slug: post.slug, })), fallback: false, } } export const getStaticProps = ({ params }) => { return { props: { - post: allPosts.find( - (post) => - post._raw.sourceFileName.replace(/\.mdx$/, "") === params.slug, - ), + post: allPosts.find((post) => post.slug === params.slug), }, } } export default function SinglePostPage() {...}
- ANSI highlighting: Thông tin thêm về ANSI escape code
Complete code
<Code> // Code blocks </Code>
<Code> // Code blocks </Code>
<!DOCTYPE html> <html lang="en"> <head> <title>Page Title</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="styles.css" /> <script type="text/javascript" src="myscripts.js" /> </head> <body> <h1>My Website</h1> <p>A website created by me.</p> <div> <img id="myImage" src="pic_bulboff.gif" width="100" height="180"> <p> <button type="button" onclick="light(1)">Light On</button> <button type="button" onclick="light(0)">Light Off</button> </p> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <title>Page Title</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="styles.css" /> <script type="text/javascript" src="myscripts.js" /> </head> <body> <h1>My Website</h1> <p>A website created by me.</p> <div> <img id="myImage" src="pic_bulboff.gif" width="100" height="180"> <p> <button type="button" onclick="light(1)">Light On</button> <button type="button" onclick="light(0)">Light Off</button> </p> </div> </body> </html>
body { font-family: Arial, Helvetica, sans-serif; } h1 { color: blue; } p { color: red; }
body { font-family: Arial, Helvetica, sans-serif; } h1 { color: blue; } p { color: red; }
function light(sw) { var pic; if (sw == 0) { pic = "pic_bulboff.gif" } else { pic = "pic_bulbon.gif" } document.getElementById('myImage').src = pic; }
function light(sw) { var pic; if (sw == 0) { pic = "pic_bulboff.gif" } else { pic = "pic_bulbon.gif" } document.getElementById('myImage').src = pic; }
comment
A criticism or interpretation, often by implication or suggestion; to write explanatory or critical notes upon a text.