For me only

For me only

Phan Nhật Chánh

Chánh08 tháng 08, 2019

8 min read
·
•••views
·
•••likes

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.

comment A criticism or interpretation, often by implication or suggestion; to write explanatory or critical notes upon a text.

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

Albert Einstein

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 <StaticTweet id="1303849673141243905" /><StaticTweet id="1303849673141243905" /> để hiển thị tweet của như bên dưới.

leeerob
Lee Robinson@leeerob
Twitter Icon
Big news – I'm joining the incredible team at ▲ @Vercel I'm thrilled to help grow the Next.js community and continue building the optimal workflow for front-end developers 🥳
105371.4K

MathJax

  • Ví dụ để hiển thị ax2+bx+c=0ax^{2} + bx + c = 0 hoặc xn+yn=znx^n + y^n = z^n 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ả {1,2,3}\{ 1,2,3 \}

  • Sử dụng giá trị tuyệt đối, ví dụ: \vert -2 \vert cho kết quả ∣−2∣\vert -2 \vert

  • 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ả a∗ba \ast b

  • Nếu bạn muốn nhập một ma trận như [A]=[1223.999],[A]=\begin{bmatrix}1 & 2 \\\\ 2 & 3.999 \end{bmatrix}, 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

Folder structure after generation
.contentlayer
generated
Post
posts__hello-world.mdx.json
index.js
types.d.ts
data
posts
hello-world.mdx
contentlayer.config.js
next.config.js
Folder structure before generation
<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"
    }
  ]}
/>
Folder structure before generation
<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>
Don't
:not(pre), :not(.code-block) {
  > code {
    background-color: 'red';
  }
}
:not(pre), :not(.code-block) {
  > code {
    background-color: 'red';
  }
}
Do
: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ả titletitle
    • Sử dụng `allPosts{:.variable.other.constant}` để cho kết quả allPostsallPosts
    • 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
  • code blocks:
    • showLineNumbers hiển thị số dòng trong code.
    • title="pages/blog/[slug].tsx" tạo tiêu đề 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ừ NextJSNextJS hoặc dùng /NextJS/3-5 để đánh dấu các từ xuất hiện từ thứ 33 đến thứ 55.
pages/blog/[slug].tsx
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}`
}, '')
pages/blog/[slug].tsx
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)
pages/blog/[slug].tsx
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() {...}
pages/blog/[slug].tsx
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() {...}
Trang web này sử dụng rehype-pretty-code . Bạn có thể tham khảo thêm tài liệu tại đây.

Complete code

<Code>
// Code blocks
</Code>
<Code>
// Code blocks
</Code>
Chọn một file
index.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>
index.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>
Series
Markdown 101