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
###### h6thì 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
Ví dụ nếu viết
thì bạn sẽ chèn được hình ảnh như thế này rồi.
List
List dạng gạch đầu dòng
* itemVí dụ bạn viết
* item 1
* item 2
* item 3thì sẽ được kết quả như sau
- item 1
- item 2
- item 3
List dạng số
1. itemVí dụ bạn viết
1. item 1
2. item 2
3. item 3thì sẽ được kết quả như sau
- item 1
- item 2
- item 3
Horizonal rules
Để có được horizonal rules bạn chỉ cần viết *** hoặc --- như sau
***
---
horizonal ruleskết quả là
horizonal rules
Blockquotes
Cú pháp blockquotes là
> textkế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 mediaKế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 $KaTex$�i với inline formula, và $KaTex$ố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.
