Cách sử dụng Markdown trong phát triển web

Sep 11, 2025

Cách

Khi các nhà phát triển web và người tạo nội dung, chúng tôi thường dành nhiều thời gian để viết văn bản được bọc bên trong Html. mã. Điều gì sẽ xảy ra nếu chúng tôi nói với bạn rằng có một cách tốt hơn để làm điều đó với Markdown? Một cách mà bạn đã có thể tập trung vào việc viết và không phải là mã?

Markdown là một ngôn ngữ đánh dấu nhẹ, nhẹ được phát triển vào năm 2004 bởi John Gruber và Aaron Swartz. Ban đầu được tạo để làm cho việc viết XHTML / HTML dễ dàng hơn bằng cách chuyển đổi các tệp văn bản đơn giản thành HTML hoặc XHTML hợp lý, Markdown có thể được sử dụng cho hầu hết mọi loại văn bản: bản thảo, hướng dẫn, ghi chú, nội dung web và nhiều hơn nữa.

Mặc dù tương đối đơn giản, Markdown có thể hơi đáng sợ khi bạn mới bắt đầu. Nhưng một khi bạn có được sự treo cổ của nó, bạn sẽ nhanh chóng nhận ra thời gian đã dành bao nhiêu thời gian định dạng mã của mình thay vì nhập nội dung của bạn.

01. Chọn trình soạn thảo Markdown

Khi bạn đang làm việc với Markdown cho Web, điều quan trọng là phải hiểu cú pháp và giới hạn cơ bản mà bạn có thể gặp phải. Trước khi bạn bắt đầu, bạn cần một số loại trình chỉnh sửa và trình thông dịch cho trang web của bạn. Thay phiên, bạn có thể chuyển đổi điểm đánh dấu trước khi xuất bản.

You'll need some kind of editor to get started — Bạn sẽ cần một số loại biên tập để bắt đầu

Có một số biên tập viên mà bạn có thể chọn. Byword. là tuyệt vời bởi vì nó cung cấp một loạt các tùy chọn xuất, bao gồm HTML và PDF. Một sự thay thế tuyệt vời khác là Stackedit. - Trình soạn thảo Markdown miễn phí, trực tuyến. Tất nhiên, bất kỳ trình soạn thảo văn bản thuần túy sẽ hoạt động.

Jetpack is handy for use with WordPress — Jetpack rất tiện dụng để sử dụng với WordPress

Nếu bạn không có kế hoạch chuyển đổi Markdown của mình sang HTML, bạn có thể nhận được một plugin (hoặc Interrupter) cho trang web của mình. Cho wordpress, Jetpack. Có hỗ trợ tuyệt vời cho Markdown, cho phép bạn sử dụng Markdown trực tiếp bên trong bài đăng và nhận xét - miễn là bạn kích hoạt tùy chọn đó.

Giống như bất kỳ ngôn ngữ đánh dấu nào, Markdown có cú pháp riêng. LƯU Ý: Có một số hương vị hoặc nhiều loại khác nhau. Trong bài viết này, chúng tôi sẽ chỉ bao gồm cú pháp chung được chia sẻ.

02. Thiết lập tiêu đề

Trong HTML, có sáu kiểu tiêu đề: H1. Cái gì H2. Cái gì H3. Cái gì h4. Cái gì H5. và H6. . Để tạo lại những thứ này trong Markdown, hãy sử dụng một loạt các biểu tượng hashtag ( Số ) - Tương ứng với số tiêu đề - theo sau là văn bản tiêu đề. Ví dụ: để tạo một & lt; H1 & GT; Tag, sử dụng một hashtag Số Được; cho một & lt; H2 & GT; Tag, sử dụng hai hashtags ## Được; Vân vân và vân vân.

Đầu vào Markdown:

 # Heading 1
## Heading 2.
### Heading 3.
#### Heading 4.
##### Heading 5.
###### Nhóm 6

Đầu ra HTML:

 & lt; H1 & GT; Heading 1 & Lt; / H1 & GT;
& lt; h2 & gt; nhóm 2 & lt; / h2 & gt;
& lt; H3 & GT; nhóm 3 & lt; / H3 & GT;
& lt; h4 & gt; nhóm 4 & lt; / h4 & gt;
& lt; H5 & GT; nhóm 5 & lt; / H5 & GT;
& lt; h6 & gt; nhóm 6 & lt; / h6 & gt;

03. Đánh dấu các đoạn văn

Đoạn văn được đại diện bởi & lt; P & GT; thẻ trong html. Trong Markdown, chúng được phân tách bằng một hoặc nhiều dòng trống. Giống như HTML, khoảng trắng bị bỏ qua. Vì vậy, nếu bạn thêm 20 dòng trống, bạn vẫn sẽ chỉ có một đoạn văn.

Đầu vào Markdown:

 Con cáo nâu nhanh chóng nhảy qua con chó lười biếng.
Con chó lười không quan tâm, bởi vì anh ta là một con chó lười biếng.

Đầu ra HTML:

 & lt; p & gt; cáo nâu nhanh chóng nhảy qua con chó lười biếng. & Lt; / p & gt;
& lt; p & gt; con chó lười không quan tâm, bởi vì anh ta là một con chó lười biếng. & lt; / p & gt;

04. Phong cách ngắt dòng

Ngắt dòng, được biểu diễn trong HTML với & lt; br & gt; Thẻ, được thêm vào bằng cách ngắt một dòng, với hai khoảng trắng ở cuối dòng trước đó.

Đầu vào Markdown:

 Con cáo nâu nhanh chóng
nhảy qua con chó lười biếng.

Đầu ra HTML:

 & lt; p & gt; cáo nâu nhanh chóng & lt; br & gt; nhảy qua con chó lười biếng. & Lt; / p & gt;

05. Đánh dấu nhấn mạnh

Có hai cách để thêm nhấn mạnh vào văn bản của bạn: in nghiêng ( & lt; em & gt; trong html) hoặc in đậm ( & lt; mạnh & gt; trong HTML).

Trong Markdown, bạn thực hiện điều này bằng cách sử dụng một hoặc hai dấu hoa thị ( * ). Bạn cũng có thể sử dụng dấu gạch dưới (_), nhưng tôi gắn bó với dấu hoa thị, vì có những hương vị khác của Markdown sử dụng dấu gạch dưới cho những thứ khác.

Đầu vào Markdown:

 * Văn bản in nghiêng *
** Văn bản in đậm **

Đầu ra HTML:

 & lt; em & gt; in nghiêng & lt; / em & gt;
& lt; mạnh & gt; in đậm & lt; / strong & gt;

LƯU Ý: Bạn cũng có thể tạo văn bản in nghiêng in nghiêng bằng ba dấu sao: *** Văn bản in đậm và nghiêng *** .

06. Tạo quy tắc ngang

Để tạo một quy tắc ngang (hoặc & lt; hr & gt; Trong HTML), sử dụng một loạt các dấu gạch nối ba hoặc nhiều hơn ( --- ), dấu sao ( *** ) hoặc dấu bằng ( ===. ). Đó là sự lựa chọn của bạn mà bạn thích, nhưng chỉ cần đảm bảo bạn bao gồm một dòng trống ở trên và bên dưới.

Đầu vào Markdown:

 Học một cái gì đó mới luôn luôn rất nhiều niềm vui.

---

Nó chắc chắn là!

Đầu ra HTML:

 & lt; p & gt; học một cái gì đó mới luôn luôn rất nhiều niềm vui. & Lt; / p & gt;
& lt; hr & gt;
& lt; p & gt; nó chắc chắn là! & lt; / p & gt;

07. Thêm hình ảnh và liên kết

Trong HTML, một hình ảnh được thêm vào bằng cách sử dụng & lt; img & gt; Thẻ và liên kết được thêm vào bằng cách sử dụng & lt; a & gt; nhãn.

Trong Markdown, hình ảnh bắt đầu với một dấu chấm than ( ! ), tiếp theo là dấu ngoặc vuông ( [] ) cho 'văn bản thay thế' và dấu ngoặc đơn ( () ) cho đường dẫn đến hình ảnh. Bạn cũng có thể bao gồm một tiêu đề tùy chọn bên trong dấu ngoặc kép ( "" ).

Với các liên kết, nó gần giống nhau, ngoại trừ không có dấu chấm than.

Đầu vào Markdown:

! [Văn bản thay thế] (/ đường dẫn / to / image.jpg "Tiêu đề tùy chọn")
[Văn bản liên kết] (http://example.com "Tiêu đề tùy chọn")

Lưu ý: Bạn cũng có thể sử dụng các liên kết và hình ảnh tham chiếu, nhưng điều đó không được đề cập ở đây.

Đầu ra HTML:

 & lt; img src = "/ path / to / image.jpg" alt = "alt văn bản" Tiêu đề = "Tiêu đề tùy chọn" / & gt;
& lt; a href = "http://example.com" Tiêu đề = "Tiêu đề tùy chọn" & gt; liên kết văn bản & lt; / a & gt;

08. Liệt kê

Có hai loại danh sách trong HTML: Đã đặt hàng ( & lt; ol & gt; ) và không có thứ tự ( & lt; ul & gt; ). Với Markdown, sử dụng số cho danh sách được đặt hàng và dấu hoa thị ( * ) hoặc dấu gạch ngang ( Bằng ) cho danh sách không có thứ tự.

Đầu vào Markdown:

 1. Mục 1
2. Mục 2.
* Mục đầu tiên
* Mục thứ hai
- Mục đầu tiên
- Mục thứ hai

Đầu ra HTML:

 & lt; ol & gt;
& lt; li & gt; mục 1 & lt; / li & gt;
& lt; li & gt; mục 2 & lt; / li & gt;
& lt; / ol & gt;
& lt; ul & gt;
& lt; li & gt; mục đầu tiên & lt; / li & gt;
& lt; li & gt; mục thứ hai & lt; / li & gt;
& lt; / ul & gt;
& lt; ul & gt;
& lt; li & gt; mục đầu tiên & lt; / li & gt;
& lt; li & gt; mục thứ hai & lt; / li & gt;
& lt; / ul & gt;

09. Thêm mã nội tuyến và khối mã

Khi bạn đang làm việc với mã trong HTML, bạn có thể bao gồm nó dưới dạng phần tử nội tuyến bằng cách sử dụng & lt; mã & gt; Tags; hoặc như một khối văn bản được định dạng trước bằng cách sử dụng & lt; pre & gt; & lt; code & gt; sự phối hợp.

Trong Markdown, các phần tử này được phân cách bằng cách sử dụng một backtick duy nhất ở mỗi bên ( `. ); hoặc bằng cách sử dụng kiểu có rào chắn, bao gồm ba backtick trên và dưới khối mã ( `` `. ).

Đầu vào Markdown:

 Biến `numberofpoints` giữ điểm của người chơi.
Nếu người chơi.wins {
NumberOfPoints + = 1
Không thể

Đầu ra HTML:

 CODE & LT; CODE & GT; NumberOfPoint & LT; / Code & GT; biến giữ điểm của người chơi.
& lt; pre & gt; & lt; code & gt;
Nếu người chơi.wins {
NumberOfPoints + = 1
Không thể
& lt; / pre & gt; & lt; / code & gt;

10. Phong cách lên blockquotes

BlockQuote được thêm vào trong HTML bằng cách sử dụng & lt; blockquote & gt; nhãn. Trong Markdown, sử dụng lớn hơn ký hiệu ( & gt; ) trước dòng.

Đầu vào Markdown:

 & gt; Đây là khối blockquote của tôi.
& gt;
& gt; Đây là một phần của cùng một blockquote.
& gt; Đây là một khối blockquote mới.

Đầu ra HTML:

 & lt; blockquote & gt;
& lt; p & gt; đây là khối blockquote của tôi. & lt; / p & gt;
& lt; br & gt;
& lt; p & gt; đây là một phần của cùng một blockquote. & lt; / p & gt;
& lt; / blockquote & gt;
& lt; blockquote & gt;
& lt; p & gt; đây là một khối blockquote mới. & lt; / p & gt;
& lt; / blockquote & gt;

11. Nhúng HTML nội tuyến

Có những lúc bạn cần tạo một yếu tố HTML không được hỗ trợ;Ví dụ, bạn có thể cần một & lt; bảng & gt; hoặc là & lt; div & gt; nhãn.

Nếu đó là trường hợp, bạn có thể kết hợp Markdown và HTML, nhưng có một số hạn chế.Chẳng hạn, bạn không thể bao gồm Markdown trong các thẻ HTML cấp độ khối.

Đọc thêm:

20 mô-đun node.js bạn cần biết
12 câu hỏi JavaScript phổ biến đã được trả lời
9 trong số các tài nguyên tốt nhất để học HTML và CSS

Cách sử dụng Markdown trong phát triển web

01. Chọn trình soạn thảo Markdown

02. Thiết lập tiêu đề

03. Đánh dấu các đoạn văn

04. Phong cách ngắt dòng

05. Đánh dấu nhấn mạnh

06. Tạo quy tắc ngang

07. Thêm hình ảnh và liên kết

08. Liệt kê

09. Thêm mã nội tuyến và khối mã

10. Phong cách lên blockquotes

11. Nhúng HTML nội tuyến

Cách - Các bài báo phổ biến nhất

Cách sử dụng Sketch Gravity

Hướng dẫn Adobe Fresco: Tạo một bức chân dung trong ứng dụng Vẽ tranh

Sử dụng Framer X để xây dựng các nguyên mẫu tương tác

8 quy tắc vàng của thiết kế di động

Học cách mô hình hóa một người 3d trong Zbrush và Maya

Tạo các kiểu và bố cục CSS cụ thể

Chiếu sáng tác phẩm 3D của bạn với đèn vòm

Làm sắc nét mô hình hóa bề mặt cứng của bạn trong 3ds Max

Thể loại