Markdown

Markdown ngoài cú pháp tiêu chuẩn còn có các specification được mở rộng riêng cho project này.

Frontmatter

Có thể viết meta information và setting của trang vào frontmatter khi cần. Frontmatter có format YAML.

yaml
---
slug: /reference/function
---

yaml
---
slug: /reference/function
---

Các setting có thể sử dụng như sau.

Key	Type	Mô tả
`sidebar_label`	`string`	Tiêu đề trang hiển thị trên sidebar, navigation trang trước/sau, và block link nội bộ. Nếu không chỉ định, nội dung heading đầu tiên sẽ hiển thị trên sidebar.
`slug`	`string`	Phần path của URL trang. Nếu không chỉ định, tên file bỏ extension sẽ là `slug`.
`tags`	`string[]`	Tag của trang. Giá trị mặc định là `[]`.
`description`	`string`	Tóm tắt trang. Được dùng cho `<meta name="description" content="..."/>` và mô tả trong block link nội bộ. Nếu không chỉ định, đoạn văn đầu tiên của content sẽ là `description`.
`title`	`string`	Tiêu đề trang. Nếu chỉ định cái này, không cần thêm heading vào Markdown.
`image`	`string`	Path của ảnh OGP. Chỉ định path tương đối từ thư mục static.

yaml
---
sidebar_label: Arrow function
slug: /reference/functions/arrow-function
tags:
  - function
  - arrow-function
description: Cách định nghĩa arrow function trong TypeScript
image: /img/ogp.png
---

yaml
---
sidebar_label: Arrow function
slug: /reference/functions/arrow-function
tags:
  - function
  - arrow-function
description: Cách định nghĩa arrow function trong TypeScript
image: /img/ogp.png
---

Heading

Heading level 1 # chỉ dùng cho tiêu đề trang.
Các section trong trang dùng heading level 2 ## trở lên.

Ví dụ
markdown
# Tiêu đề trang
...lời mở đầu...
## Heading lớn
...
### Heading vừa
...

Ví dụ
markdown
# Tiêu đề trang
...lời mở đầu...
## Heading lớn
...
### Heading vừa
...

Link

Link nội bộ viết đường dẫn file Markdown bằng relative path.

markdown
Chi tiết xem tại [Function](../references/functions.md).

markdown
Chi tiết xem tại [Function](../references/functions.md).

Block link nội bộ

Block link nội bộ dùng để hiển thị link đến các trang trong site. Như ví dụ sau, đây là component tự động hiển thị tiêu đề trang và mô tả.

📄️ Khai báo biến: let và const

Variable declaration trong JavaScript có let và const.

Block link nội bộ có các ưu điểm sau.

Trang liên quan nổi bật
Tự động cập nhật theo khi đổi tiêu đề trang đích

Để tạo block link, đặt dòng trống trước và sau, và không viết gì khác trước/sau dòng link nội bộ.

markdown
...text...
[let và const](../references/values-types-variables/let-and-const.md)
...text...

markdown
...text...
[let và const](../references/values-types-variables/let-and-const.md)
...text...

cẩn thận

Link text của Markdown bị bỏ qua, tiêu đề của trang đích được sử dụng. Ví dụ, nếu tiêu đề của function.md là "Về function", và Markdown là [Function](./function.md), thì "Function" bị bỏ qua, hiển thị trên website sẽ là "Về function".

Inline code

Không đặt khoảng trắng trước/sau inline code.

markdown
❌ Khai báo biến dùng `const` .
⭕️ Khai báo biến dùng`const`.

markdown
❌ Khai báo biến dùng `const` .
⭕️ Khai báo biến dùng`const`.

Để dùng backtick trong inline code, dùng double backtick.

markdown
Template literal dùng`` ` ``.

markdown
Template literal dùng`` ` ``.

Template literal dùng`.

Code block

Code block sẽ có syntax highlight nếu chỉ định tên ngôn ngữ.

markdown
```ts
// code
```

markdown
```ts
// code
```

Các ngôn ngữ có thể sử dụng như sau.

https://github.com/shikijs/shiki/blob/main/docs/languages.md#all-languages

Tiêu đề code block

Để thêm tiêu đề cho code block, chỉ định attribute title.

markdown
```ts title="sample.ts"
// sample code
```

markdown
```ts title="sample.ts"
// sample code
```

sample.ts
ts
// sample code

sample.ts
ts
// sample code

Số dòng

Code block từ 4 dòng trở lên sẽ tự động có số dòng.

markdown
Dòng 1
Dòng 2
Dòng 3

markdown
Dòng 1
Dòng 2
Dòng 3

markdown
Dòng 1
Dòng 2
Dòng 3
Dòng 4

markdown
Dòng 1
Dòng 2
Dòng 3
Dòng 4

Twoslash

Twoslash là tính năng thêm thông tin từ TypeScript compiler vào sample code. Thông tin được thêm bao gồm type của biến, message compile error, v.v.

Hiển thị type của biến

Viết ^? để hiển thị nội dung type được suy luận của biến.

markdown
```ts twoslash
const point = { x: 135, y: 35 };
//    ^?
type ReadonlyPoint = Readonly<typeof point>;
//   ^?
```

markdown
```ts twoslash
const point = { x: 135, y: 35 };
//    ^?
type ReadonlyPoint = Readonly<typeof point>;
//   ^?
```

Ví dụ hiển thị
ts
const point = { x: 135, y: 35 };
       const point: {
    x: number;
    y: number;
}
type ReadonlyPoint = Readonly<typeof point>;
          type ReadonlyPoint = {
    readonly x: number;
    readonly y: number;
}

Ví dụ hiển thị
ts
const point = { x: 135, y: 35 };
       const point: {
    x: number;
    y: number;
}
type ReadonlyPoint = Readonly<typeof point>;
          type ReadonlyPoint = {
    readonly x: number;
    readonly y: number;
}

Hiển thị error

Dùng @errors để hiển thị nội dung compile error.

markdown
```ts twoslash
// @errors: 7006
function fn(s) {}
```

markdown
```ts twoslash
// @errors: 7006
function fn(s) {}
```

Ví dụ hiển thị
ts
function fn(s) {}
Parameter 's' implicitly has an 'any' type.7006Parameter 's' implicitly has an 'any' type.

Ví dụ hiển thị
ts
function fn(s) {}
Parameter 's' implicitly has an 'any' type.7006Parameter 's' implicitly has an 'any' type.

Thiết lập compiler option

Viết theo format @compilerOption: value để thiết lập compiler option chỉ có hiệu lực trong code block đó.

markdown
```ts twoslash
// @noImplicitAny: false
function fn(s) {}
```

markdown
```ts twoslash
// @noImplicitAny: false
function fn(s) {}
```

Ví dụ hiển thị
ts
function fn(s) {}

Ví dụ hiển thị
ts
function fn(s) {}

mẹo

Compiler option mặc định của twoslash xem tại tsconfig.twoslash.json.

Hiển thị kết quả thực thi

Dùng @log, @warn, @error để styling và hiển thị comment kết quả thực thi.

markdown
```js twoslash
console.log(123);
// @log: 123
console.warn("message");
// @warn: message
const x = value;
// @error: ReferenceError: value is not defined
```

markdown
```js twoslash
console.log(123);
// @log: 123
console.warn("message");
// @warn: message
const x = value;
// @error: ReferenceError: value is not defined
```

Ví dụ hiển thị
js
console.log(123);
123
console.warn("message");
message
const x = value;
ReferenceError: value is not defined

Ví dụ hiển thị
js
console.log(123);
123
console.warn("message");
message
const x = value;
ReferenceError: value is not defined

Tái hiện code completion

Viết ^| để tái hiện code completion như trong VS Code.

markdown
```ts twoslash
// @noErrors
[1, 2, 3].fin
//           ^|
```

markdown
```ts twoslash
// @noErrors
[1, 2, 3].fin
//           ^|
```

Ví dụ hiển thị
ts
[1, 2, 3].fin
             find
findIndex
findLast
findLastIndex

Ví dụ hiển thị
ts
[1, 2, 3].fin
             find
findIndex
findLast
findLastIndex

Output JavaScript

Dùng @showEmit để hiển thị code JavaScript sau khi compile.

markdown
```ts twoslash title="Ví dụ hiển thị"
// @showEmit
enum Example {
  FOO,
  BAR,
}
```

markdown
```ts twoslash title="Ví dụ hiển thị"
// @showEmit
enum Example {
  FOO,
  BAR,
}
```

Ví dụ hiển thị
ts
"use strict";
var Example;
(function (Example) {
    Example[Example["FOO"] = 0] = "FOO";
    Example[Example["BAR"] = 1] = "BAR";
})(Example || (Example = {}));

Ví dụ hiển thị
ts
"use strict";
var Example;
(function (Example) {
    Example[Example["FOO"] = 0] = "FOO";
    Example[Example["BAR"] = 1] = "BAR";
})(Example || (Example = {}));

Output file định nghĩa type

Có thể hiển thị kết quả chuyển đổi TypeScript source code thành file định nghĩa type.

markdown
```ts twoslash
// @declaration: true
// @showEmit
// @showEmittedFile: index.d.ts
export function getStringLength(value: string) {
  return value.length;
}
```

markdown
```ts twoslash
// @declaration: true
// @showEmit
// @showEmittedFile: index.d.ts
export function getStringLength(value: string) {
  return value.length;
}
```

Ví dụ hiển thị
ts
export declare function getStringLength(value: string): number;

Ví dụ hiển thị
ts
export declare function getStringLength(value: string): number;

Inline highlight (underline)

Phần có underline ^^ sẽ được highlight. Tính năng này chưa được hỗ trợ, chỉ comment underline biến mất.

markdown
```ts twoslash
function greet(person: string, date: Date) {
  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}
greet("Maddison", new Date());
//                ^^^^^^^^^^
```

markdown
```ts twoslash
function greet(person: string, date: Date) {
  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}
greet("Maddison", new Date());
//                ^^^^^^^^^^
```

Ví dụ hiển thị
ts
function greet(person: string, date: Date) {
  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}
 
greet("Maddison", new Date());

Ví dụ hiển thị
ts
function greet(person: string, date: Date) {
  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}
 
greet("Maddison", new Date());

Twoslash Troubleshooting

`import` bị compile error (2307)

Khi import module giả không tồn tại, sẽ phát sinh error sau.

[2307] 0 - Cannot find module 'module name' or its corresponding type declarations.

Khi dùng module giả trong sample code, cần dùng @filename để tạo module.

markdown
```ts twoslash
// @filename: fictional-module.ts
export const fictional = "fictional value!";
// @filename: index.ts
// ---cut---
import { fictional } from "./fictional-module";
//       ^?
```

markdown
```ts twoslash
// @filename: fictional-module.ts
export const fictional = "fictional value!";
// @filename: index.ts
// ---cut---
import { fictional } from "./fictional-module";
//       ^?
```

Ví dụ hiển thị
ts
import { fictional } from "./fictional-module";
            (alias) const fictional: "fictional value!"
import fictional

Ví dụ hiển thị
ts
import { fictional } from "./fictional-module";
            (alias) const fictional: "fictional value!"
import fictional

Tạo NPM module giả

Để tạo NPM module giả, chuẩn bị type definition của module bằng declare module. Lúc này, module giả không cần @filename cũng compile được.

markdown
```ts twoslash
declare module "fictional-npm-module" {
  const fictional = "fictional NPM module!";
}
// @filename: index.ts
// ---cut---
import { fictional } from "fictional-npm-module";
//       ^?
```

markdown
```ts twoslash
declare module "fictional-npm-module" {
  const fictional = "fictional NPM module!";
}
// @filename: index.ts
// ---cut---
import { fictional } from "fictional-npm-module";
//       ^?
```

Ví dụ hiển thị
ts
import { fictional } from "fictional-npm-module";
            (alias) const fictional: "fictional NPM module!"
import fictional

Ví dụ hiển thị
ts
import { fictional } from "fictional-npm-module";
            (alias) const fictional: "fictional NPM module!"
import fictional

Highlight dòng

Khi muốn người đọc chú ý vào dòng cụ thể, viết số dòng để đổi màu nền của dòng đó.

markdown
```js twoslash {1,4-6,11} title="Ví dụ highlight dòng"
import React from "react";
function MyComponent(props) {
  if (props.isBar) {
    return <div>Bar</div>;
  }
  return <div>Foo</div>;
}
export default MyComponent;
```

markdown
```js twoslash {1,4-6,11} title="Ví dụ highlight dòng"
import React from "react";
function MyComponent(props) {
  if (props.isBar) {
    return <div>Bar</div>;
  }
  return <div>Foo</div>;
}
export default MyComponent;
```

Ví dụ highlight dòng
js
import React from "react";
 
function MyComponent(props) {
  if (props.isBar) {
    return <div>Bar</div>;
  }
 
  return <div>Foo</div>;
}
 
export default MyComponent;

Ví dụ highlight dòng
js
import React from "react";
 
function MyComponent(props) {
  if (props.isBar) {
    return <div>Bar</div>;
  }
 
  return <div>Foo</div>;
}
 
export default MyComponent;

Auto format sample code

Code block được auto format bằng Prettier.

Nếu không muốn auto format code block, viết  ngay trước.

markdown
```ts
f = x => x;
```
<!--prettier-ignore-->
```ts
f = x => x;
```

markdown
```ts
f = x => x;
```
<!--prettier-ignore-->
```ts
f = x => x;
```

Kết quả format
markdown
```ts
f = (x) => x;
```
<!--prettier-ignore-->
```ts
f = x => x;
```

Kết quả format
markdown
```ts
f = (x) => x;
```
<!--prettier-ignore-->
```ts
f = x => x;
```

Hiển thị cảnh báo

Text được bao bởi triple colon ::: có thể hiển thị dạng cảnh báo.

markdown
:::note
Text
:::
:::tip
Text
:::
:::info
Text
:::
:::caution
Text
:::
:::danger
Text
:::

markdown
:::note
Text
:::
:::tip
Text
:::
:::info
Text
:::
:::caution
Text
:::
:::danger
Text
:::

ghi chú

Text

mẹo

Text

thông tin

Text

cẩn thận

Text

cảnh báo

Text

Có thể chỉ định tiêu đề cho hiển thị cảnh báo.

markdown
:::note Tiêu đề tùy chọn
Text
:::

markdown
:::note Tiêu đề tùy chọn
Text
:::

Tiêu đề tùy chọn

Text

Caption cho hình và bảng

Khi thêm caption cho hình và bảng, có thể dùng <figure> và <figcaption>.

markdown
<figure><figcaption>Hình con mèo</figcaption>
![](https://placekitten.com/300/300)
</figure>

markdown
<figure><figcaption>Hình con mèo</figcaption>
![](https://placekitten.com/300/300)
</figure>

markdown
<figure><figcaption>Quốc gia và tiền tệ</figcaption>
| Quốc gia | Tiền tệ |
| -------- | ------- |
| Mỹ       | USD     |
| Việt Nam | VND     |
</figure>

markdown
<figure><figcaption>Quốc gia và tiền tệ</figcaption>
| Quốc gia | Tiền tệ |
| -------- | ------- |
| Mỹ       | USD     |
| Việt Nam | VND     |
</figure>

Quốc gia và tiền tệ

Quốc gia	Tiền tệ
Mỹ	USD
Việt Nam	VND

Block "Chia sẻ kiến thức"

Block "Chia sẻ kiến thức" giúp người đọc dễ dàng chia sẻ nội dung trang lên X. Nội dung được bao bởi <PostILearned> sẽ trở thành nội dung post.

Ví dụ cách viết block Chia sẻ kiến thức
markdown
<PostILearned>
・JavaScript có khai báo biến let và const
・let cho phép gán lại, const không cho phép gán lại
・Cơ bản nên dùng const
</PostILearned>

Ví dụ cách viết block Chia sẻ kiến thức
markdown
<PostILearned>
・JavaScript có khai báo biến let và const
・let cho phép gán lại, const không cho phép gán lại
・Cơ bản nên dùng const
</PostILearned>

Ví dụ hiển thị:

Chia sẻ kiến thức

・JavaScript có khai báo biến let và const
・let cho phép gán lại, const không cho phép gán lại
・Cơ bản nên dùng const

Từ 『Survival TypeScript』

Đăng nội dung này lên X

Lưu ý về block "Chia sẻ kiến thức"

Cần có dòng trống ngay sau <PostILearned> và ngay trước </PostILearned>.
X có giới hạn số ký tự cho nội dung post, nên hãy chú ý lượng text. Hãy tính toán lượng text với giả định "Từ 『Survival TypeScript』" sẽ được thêm vào cuối.
Không dùng cú pháp Markdown trong nội dung post. Đặc biệt, thay thế cú pháp list bằng "・".
Không đưa URL vào nội dung post. Vì post có URL có xu hướng ít hiển thị trên timeline.

Markdown

Frontmatter​

Heading​

Link​

Block link nội bộ​

📄️ Khai báo biến: let và const

Inline code​

Code block​

Tiêu đề code block​

Số dòng​

Twoslash​

Hiển thị type của biến​

Hiển thị error​

Thiết lập compiler option​

Hiển thị kết quả thực thi​

Tái hiện code completion​

Output JavaScript​

Output file định nghĩa type​

Inline highlight (underline)​

import bị compile error (2307)​

Tạo NPM module giả​

Highlight dòng​

Auto format sample code​

Hiển thị cảnh báo​

Caption cho hình và bảng​

Block "Chia sẻ kiến thức"​

Chia sẻ kiến thức

Frontmatter

Heading

Link

Block link nội bộ

Inline code

Code block

Tiêu đề code block

Số dòng

Twoslash

Hiển thị type của biến

Hiển thị error

Thiết lập compiler option

Hiển thị kết quả thực thi

Tái hiện code completion

Output JavaScript

Output file định nghĩa type

Inline highlight (underline)

`import` bị compile error (2307)

Tạo NPM module giả

Highlight dòng

Auto format sample code

Hiển thị cảnh báo

Caption cho hình và bảng

Block "Chia sẻ kiến thức"