Hướng dẫnCách sử dụng markdown để trang trí Topic (new)

Được viết bởi: Hust IT1


Mở đầu

Markdown là ngôn ngữ đánh dấu văn bản được tạo ra bởi John Gruber, sử dụng cú pháp khá đơn giản và dễ hiểu, dễ nhớ. Nếu nắm vững các cú pháp của Markdown bạn có thể trình bày bài viết của mình một cách mạch lạc, ấn tượng mà không mất nhiều thời gian. Bài viết dưới đây sẽ hướng dẫn để bạn có thể hiểu và sử dụng được ngay những cú pháp đó.

Lưu ý markdown của topic chỉ sử dụng được cho các topic có id > 103161, tức các topic được đăng từ ngày 13/06/2021 trở lên

Nội dung

Tiêu đề

Bạn có thể viết các lớp tiêu đề h1, h2, h3 cho đến h6 bằng cách thêm số lượng ký tự # tương ứng vào đầu dòng. Một ký tự # tương đương với h1, 2 ký tự # tương đương với h2 ...

Ví dụ khi viết

# h1
## h2
### h3
#### h4
##### h5
###### h6

thì kết quả sẽ là

h1

h2

h3

h4

h5
h6

Nhấn mạnh, highlight

Bạn có thể kẹp một từ ở đầu và cuối bằng 1 ký tự * để in nghiêng, 2 ký tự ** để bôi đậm, và 3 ký tự *** để vừa in nghiêng vừa bôi đậm.

*in nghiêng*
**bôi đậm**
***vừa in nghiêng vừa bôi đậm***
~~Chữ gạch~~

kết quả:

in nghiêng bôi đậm vừa in nghiêng vừa bôi đậm Chữ gạch

Để viết inline code, bạn dùng cú pháp

`inlide code`

Để highlight block code, bạn viết

```php

echo ("highlight code"); ```

sẽ được kết quả là

echo ("highlight code")

Dịch nghĩa cho từ viết tắt

*[HTML]: Hyper Text Markup Language
*[W3C]:  World Wide Web Consortium

The HTML specification is maintained by the W3C.

Kết quả:

The HTML specification is maintained by the W3C.

Khi bạn trở con chuột (hoặc bấm vào) chữ HTML hoặc W3C bạn sẽ thấy dòng chú thích mà bạn đặt cho từ viết tắt đó

Link, image

Link

Để chèn link vào bài viết, bạn dùng cú pháp sau

[title](http://~)

Ví dụ

[Markdown](http://https://vi.wikipedia.org/wiki/Markdown)

=> Markdown

Image

Cú pháp chèn hình ảnh như sau

![alt](http://~)

Ví dụ nếu viết

![alt](https://nhattientuu.com/wp-content/uploads/2020/11/BB-la-gi.jpg)

thì bạn sẽ chèn được hình ảnh như thế này rồi.

alt

List

List dạng gạch đầu dòng

* item

Ví dụ bạn viết

* item 1
* item 2
* item 3

thì sẽ được kết quả như sau

  • item 1
  • item 2
  • item 3

List dạng số

1. item

Ví dụ bạn viết

1. item 1
2. item 2
3. item 3

thì sẽ được kết quả như sau

  1. item 1
  2. item 2
  3. item 3

Horizonal rules

Để có được horizonal rules bạn chỉ cần viết *** hoặc --- như sau

***
---
horizonal rules

kết quả là



horizonal rules

Blockquotes

Cú pháp blockquotes là

> text

kết quả:

text

Escape markdown

Đôi khi trong khi viết bài bạn sẽ sử dụng những kí kiệu trùng với cú pháp của markdown. Để phân biệt, bạn chỉ cần thêm dấu \ trước những kí hiệu đó là được.

Ví dụ nếu bạn viết

\*text\*

thì kết quả sẽ là *text* chứ không phải text (in nghiêng)

Tables

| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title       |
| Paragraph   | Text        |

Kết quả:

Syntax Description
Header Title
Paragraph Text

Alignment

| Syntax      | Description | Test Text     |
| :---        |    :----:   |          ---: |
| Header      | Title       | Here's this   |
| Paragraph   | Text        | And more      |

Kết quả:

Syntax Description Test Text
Header Title Here's this
Paragraph Text And more

Definition Lists

First Term
: This is the definition of the first term.

Second Term
: This is one definition of the second term.
: This is another definition of the second term.

Kết quả:

First Term
This is the definition of the first term.
Second Term
This is one definition of the second term.
This is another definition of the second term.

Task Lists

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

Kết quả:

  • [x] Write the press release
  • [ ] Update the website
  • [ ] Contact the media

Emoji

Bạn có thể tra emoji ở đây: https://emojipedia.org/

Gone camping! ⛺ Be back soon.

That is so funny! 😂

Kết quả:

Gone camping! ⛺ Be back soon.

That is so funny! 😂

HotaVN advanced Markdown Embedment

Hiện tại HotaVN hỗ trợ chèn link từ Youtube, Vimeo, Google forms, Codepen, Gist, JSFiddle. Cú pháp như dưới đây:

Youtube

{@youtube: Youtube URL}

Ví dụ

{@youtube: https://www.youtube.com/watch?v=HndN6P9ke6U}

Vimeo

{@vimeo: Vimeo URL}

Ví dụ

{@vimeo: https://vimeo.com/62604492}

Google forms

{@form: url share}

Ví dụ

{@form: https://docs.google.com/forms/d/e/1FAIpQLSe6mzvWa3G-2S-FzowI3cUphgf_zQMxdQKAYSLg_TaR9JtQHA/viewform?usp=sf_link}

Codepen

{@codepen: Codepen URL}

Ví dụ

{@codepen: https://codepen.io/nickmoreton/pen/gbyygq}

Gist

{@gist: Gist URL}

Ví dụ

{@gist: https://gist.github.com/JeffreyWay/207e3bfdb5cafff050a1d75dbf755a5c}

JSFiddle

{@jsfiddle: JSFiddle URL}

Ví dụ

{@jsfiddle: http://jsfiddle.net/kizu/zfUyN/}

Công thức toán học

Bên cạnh các cú pháp Markdown phổ biến, HotaVN còn hỗ trợ viết các công thức toán học theo cú pháp của $ TeX $.

HotaVN sử dụng $KaTex$ để render các nội dung toán học, các chức năng được support bởi $KaTex$ các bạn có thể xem chi tiết tại đây: https://khan.github.io/KaTeX/function-support.html

Để viết nội dung toán học, hãy bắt đầu và kết thúc bằng dấu \$ đối với inline formula, và \$\$ đối với block formula.

Ví dụ

Inline formula: $1 +  \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, \quad\quad \text{for }\lvert q\rvert<1.$

Kết quả hiển thị

Inline formula: $1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, \quad\quad \text{for }\lvert q\rvert<1.$

Block formula:
$$
f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
$$

$$
\begin{bmatrix}
   a & b \\
   c & d
\end{bmatrix}
$$

Kết quả hiển thị

Block formula:

$$ f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi$$ $$ \begin{bmatrix} a & b \\ c & d \end{bmatrix}$$

Đối với những người mới sử dụng thì hẳn là chưa thể nhớ hết được những cú pháp của markdown, thì bạn có thể lưu lại url này để đọc dần dần https://hotavn.com/cach-su-dung-markdown-de-trang-tri-topic-new_103162.html

Kết

Hy vọng thông qua bài hướng dẫn này bạn sẽ có được những bài viết không chỉ có chất lượng cao về nội dung mà còn có trình bày đẹp mắt và ấn tượng nữa nhé!

Bài được viết dựa theo bài của viblo và được chỉnh sử để phù hợp với diễn đàn.

Posted on June 13, 2021 10:07:07 PM


10
Donate free




Đăng nhập để tham gia thảo luận! Hoặc bạn có thể bình luận bằng facebook ở dưới.