For me only

For me only

Phan Nhật Chánh

Chánh / 08 tháng 08, 2019

7 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

---
title: 'Tiêu đề bài viết'
publishedAt: 'yyyy-mm-dd'
summary: 'Đoạn mô tả ngắn'
status: 'published | draft'
series:
  order: 1 (Nếu muốn sắp xếp theo thứ tự)
  title: 'Build a Developer Blog with Next.js'
image: '/static/banner.jpg'
---
  • Keyboard: Sử dụng <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>

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>

Tabs

<Tabs items={['npm', 'yarn']}>
  <Tab>content npm</Tab>
  <Tab>content yarn</Tab>
</Tabs>
npx create-react-app [app_name] --template typescript

Image

<Image 
  title={`Tiêu đề hình ảnh`}
  alt={`Mô tả hình ảnh`} 
  src={`/static/banner.png`} 
  width={480} height={270} priority 
/>

Callout

📣

Shout out to my haters, sorry that you couldn't faze me. – Nicki Minaj (Moment 4 Life)

<Callout emoji="📣">
  Shout out to my haters, sorry that you couldn't faze me. – Nicki Minaj (Moment 4 Life)
</Callout>

ProsCard

You might use vanilla CSS if...
You don't want to add a toolchain. Vanilla CSS works with every browser & language.
<ProsCard
  title="vanilla CSS"
  pros={[
    "You want class names scoped to the corresponding component.",
    "You want to use CSS variables to reuse values.",
    "You need your application to work without JavaScript.",
    "You want the lowest barrier to entry.",
    "You want to use any language, not just JavaScript."
  ]}
/>

ConsCard

You might not use vanilla CSS if...
You're building a large web application.
<ConsCard
  title="vanilla CSS"
  cons={[
    "You don't want to configure a toolchain like Webpack.",
    "You need to distribute a package on NPM.",
    "You want nesting support by default (requires PostCSS).",
    "You don't want to context switch between files. You're building a large web application."
  ]}
/>

Tweets

Sử dụng <StaticTweet id="1303849673141243905" /> để hiển thị tweet của như bên dưới.

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 🥳

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
    $$
  • 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ả aba \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},$

Folder structure

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"
    }
  ]}
/>

Syntax Highlighter

  • code inline:
    • Sử dụng `default` để cho kết quả default
    • Sử dụng `title{:.objKey}` để cho kết quả title
    • Sử dụng `allPosts{:.variable.other.constant}` để cho kết quả allPosts
    • Sử dụng `function{:.fn}` để cho kết quả getStaticPaths()
    • Sử dụng `source_code_inline{:js}` để cho kết quả 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ừ NextJS hoặc dùng /NextJS/3-5 để đánh dấu các từ xuất hiện từ thứ 3 đến thứ 5.
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 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() {...}

Complete 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>
Bạn cần phảiđể tiếp tục!

Đăng ký nhận thông báo qua Email

Tôi sẽ gửi email cho bạn khi tôi tạo ra một cái gì đó mới và tất nhiên là sẽ không có thư rác! 🙅‍♂️

subscribers· issues