Chuyển Markdown sang HTML: cú pháp được hỗ trợ, chỗ kết quả lệch chuẩn và cách xử lý
Công cụ đổi một đoạn Markdown thành mã HTML tương ứng, có hai thẻ xem là bản dựng thử và mã nguồn để bạn vừa kiểm tra hình thức vừa lấy mã đem dùng. Ô nhập đã điền sẵn một đoạn mẫu gồm đủ các cú pháp thông dụng, tiện để thử ngay mà không phải tự soạn.
Tính năng nổi bật
- Chuyển tiêu đề, chữ đậm, chữ nghiêng, chữ vừa đậm vừa nghiêng
- Chuyển mã nội tuyến và khối mã có rào ba dấu huyền, giữ tên ngôn ngữ thành lớp trên thẻ mã
- Chuyển liên kết và ảnh sang thẻ tương ứng, giữ nguyên phần chữ thay thế của ảnh
- Chuyển danh sách gạch đầu dòng, danh sách đánh số, trích dẫn và đường kẻ ngang
- Chuyển bảng viết bằng dấu gạch đứng thành thẻ bảng HTML
- Thẻ xem bản dựng thử để kiểm tra hình thức trước khi lấy mã
- Thẻ xem mã nguồn kèm nút sao chép toàn bộ HTML
- Ô nhập điền sẵn đoạn mẫu đầy đủ cú pháp thông dụng
- Chạy hoàn toàn trên trình duyệt, nội dung bạn nhập không được gửi lên máy chủ
Vì sao vẫn cần bước chuyển sang HTML
Markdown ra đời năm 2004 với một mục tiêu rất rõ: cho phép viết nội dung ở dạng chữ thuần vẫn dễ đọc khi chưa dựng, rồi mới chuyển sang HTML khi cần xuất bản. Hai mươi năm sau, nó đã thành cách viết mặc định cho tài liệu kỹ thuật, ghi chú và mã nguồn. Nhưng rất nhiều nơi tiếp nhận nội dung lại chỉ hiểu HTML: ô soạn thảo dạng mã trong hệ quản trị nội dung, trường mô tả sản phẩm trên sàn thương mại điện tử, mẫu thư điện tử, bảng tin nội bộ, hoặc một khối nội dung tùy chỉnh trong công cụ dựng trang. Khi đó bạn cần một bước chuyển đổi nhanh, không phải cài công cụ dòng lệnh và cũng không muốn dán tài liệu nội bộ lên một dịch vụ lạ. Công cụ này giải đúng nhu cầu đó. Nhưng vì nó chuyển đổi bằng các phép thay thế theo mẫu chứ không dùng bộ phân tích cú pháp đầy đủ, bạn nên biết trước phạm vi nó làm được để không phải dò lỗi trên trang đã đăng.
Lợi ích khi sử dụng
- Lấy được mã HTML sạch cho những nơi chỉ nhận HTML mà không nhận Markdown
- Xem được cả hình thức lẫn mã nguồn trong cùng một màn hình
- Không phải cài công cụ dòng lệnh hay dựng dự án chỉ để chuyển một tệp
- Tài liệu nội bộ không rời khỏi trình duyệt
- Đoạn mẫu có sẵn giúp tra nhanh cú pháp Markdown khi bạn quên
Cách chuyển Markdown sang HTML
- 1Xóa đoạn mẫu trong ô bên trái rồi dán nội dung Markdown của bạn vào.
- 2Bấm nút chuyển đổi, vì kết quả không tự cập nhật khi bạn gõ mà chỉ dựng lại sau mỗi lần bấm.
- 3Xem thẻ bản dựng thử trước để kiểm tra tiêu đề, danh sách và bảng có ra đúng hình thức mong muốn không.
- 4Chuyển sang thẻ mã nguồn để soi HTML, đặc biệt kiểm tra phần danh sách đánh số và phần bảng.
- 5Bấm sao chép, dán vào nơi cần dùng, rồi bổ sung phần định kiểu vì mã sinh ra không kèm theo CSS nào.
Cú pháp được hỗ trợ và cú pháp không được hỗ trợ
Danh sách được hỗ trợ: tiêu đề từ cấp một tới cấp ba, viết bằng một tới ba dấu thăng kèm một dấu cách; chữ đậm bằng cặp hai dấu sao, chữ nghiêng bằng một dấu sao, vừa đậm vừa nghiêng bằng ba dấu sao; mã nội tuyến bằng cặp dấu huyền; khối mã bằng ba dấu huyền kèm tên ngôn ngữ tùy chọn; trích dẫn bằng dấu lớn hơn kèm dấu cách; đường kẻ ngang bằng đúng ba dấu gạch nối trên một dòng riêng; liên kết và ảnh theo cú pháp ngoặc vuông kèm ngoặc đơn; danh sách gạch đầu dòng bằng dấu gạch nối kèm dấu cách; danh sách đánh số bằng chữ số kèm dấu chấm; bảng viết bằng dấu gạch đứng. Danh sách không được hỗ trợ cũng cần biết rõ: tiêu đề cấp bốn trở lên sẽ giữ nguyên dấu thăng thành chữ thường; dấu sao và dấu cộng dùng làm ký hiệu gạch đầu dòng không được nhận, chỉ dấu gạch nối mới được; danh sách lồng nhau bị làm phẳng về một cấp; ô đánh dấu việc cần làm, chữ gạch ngang, chú thích cuối trang, liên kết dạng tham chiếu và địa chỉ tự nhận diện đều không được xử lý. Với những cú pháp này, hãy sửa tay trong mã HTML sau khi dán.
Hai chỗ kết quả lệch so với trình dựng Markdown chuẩn
Chỗ thứ nhất là danh sách đánh số. Công cụ đổi từng dòng có chữ số kèm dấu chấm thành một ô danh sách, rồi ở bước cuối gom mọi ô danh sách liền nhau lại và bọc bằng thẻ danh sách không thứ tự. Nghĩa là danh sách một, hai, ba của bạn sẽ ra HTML dùng chấm tròn thay vì số. Nếu thứ tự có ý nghĩa, chẳng hạn các bước trong quy trình, hãy sửa thẻ bọc thành thẻ danh sách có thứ tự sau khi dán. Chỗ thứ hai là bảng. Công cụ nhận ra dòng phân cách gồm các dấu gạch nối và xóa nó đi, nhưng do cách kiểm tra, mọi ô còn lại đều được đóng gói bằng thẻ ô dữ liệu chứ không có ô nào thành thẻ ô tiêu đề. Kết quả là hàng đầu tiên của bảng mất tính chất tiêu đề, cả về hình thức lẫn về ngữ nghĩa cho trình đọc màn hình và cho công cụ tìm kiếm. Cách sửa nhanh là bọc hàng đầu tiên trong thẻ phần đầu bảng rồi đổi các thẻ ô của hàng đó sang thẻ ô tiêu đề. Hai chỗ này nên kiểm tra mỗi lần, vì chúng không báo lỗi mà chỉ lặng lẽ ra sai.
Markdown không có một chuẩn duy nhất, và điều đó gây ra chuyện gì
Bản mô tả đầu tiên năm 2004 khá ngắn và để lại nhiều điểm mơ hồ, nên mỗi phần mềm tự diễn giải theo cách riêng và cùng một tệp có thể hiển thị khác nhau ở những nơi khác nhau. Năm 2014, một nhóm phát triển công bố bản đặc tả chặt chẽ nhằm chuẩn hóa, quy định rõ từng trường hợp biên như thế nào là một danh sách lồng, xử lý ra sao khi dấu sao nằm giữa từ, hay bao nhiêu dấu cách thì thành khối mã. Song song đó, nền tảng lưu trữ mã nguồn lớn nhất bổ sung thêm một nhánh cú pháp riêng gồm bảng, chữ gạch ngang, ô đánh dấu việc cần làm và địa chỉ tự nhận diện; đây chính là nhánh mà phần lớn người dùng quen thuộc vì nó xuất hiện trong tệp giới thiệu dự án. Hệ quả thực tế: một tệp trông hoàn hảo trên nền tảng đó có thể vỡ khi đưa vào một trình dựng khác, và ngược lại. Vì vậy khi viết Markdown để chuyển sang HTML, hãy bám vào phần cú pháp chung nhất và tránh những mẹo cú pháp chỉ chạy trên đúng một nền tảng, kể cả khi bạn thấy chúng tiện.
Markdown cho phép HTML thô, và đây là chỗ có rủi ro thật
Ngay từ thiết kế ban đầu, Markdown cho phép chèn thẳng thẻ HTML vào giữa nội dung và trình dựng sẽ để nguyên chúng đi qua. Đây là tính năng hữu ích khi bạn cần một thứ mà Markdown không diễn đạt được, chẳng hạn một khối có lớp riêng hay một bảng phức tạp. Nhưng nó cũng có nghĩa là mọi thẻ HTML trong nội dung đầu vào đều xuất hiện nguyên vẹn trong kết quả, kể cả thẻ mã kịch bản và các thuộc tính xử lý sự kiện. Công cụ này không lọc gì, và thẻ xem bản dựng thử đưa thẳng kết quả vào trang, nên nếu bạn dán một đoạn Markdown lấy từ nguồn không tin cậy thì đoạn mã trong đó sẽ chạy ngay trong tab của bạn. Với việc dùng cá nhân, cách phòng đơn giản là chỉ dán nội dung do chính bạn hoặc đồng nghiệp viết. Với việc xây hệ thống cho phép người dùng cuối nhập Markdown, chẳng hạn ô bình luận hay trang hồ sơ, thì bắt buộc phải chạy kết quả qua một thư viện làm sạch HTML trước khi hiển thị, đồng thời chỉ giữ lại danh sách thẻ và thuộc tính được phép thay vì cố chặn từng thứ nguy hiểm.
Mã HTML sinh ra cần bổ sung gì trước khi đăng
Kết quả là HTML thuần không kèm bất kỳ định kiểu nào, nên khi dán vào một trang không có sẵn quy tắc định kiểu cho nội dung bài viết, mọi thứ sẽ trông trần trụi: bảng không có đường kẻ, khối mã không có nền, trích dẫn không có vạch bên trái. Hãy bọc toàn bộ trong một khối có lớp riêng rồi viết định kiểu cho lớp đó. Bốn việc nên làm thêm. Thứ nhất là thêm chiều rộng và chiều cao cho các thẻ ảnh, vì thiếu hai thuộc tính này thì trình duyệt không biết chừa chỗ và bố cục bị nhảy khi ảnh tải xong, đây là một trong những yếu tố bị chấm điểm khi đo trải nghiệm trang. Thứ hai là bọc bảng trong một khối cho phép cuộn ngang, nếu không bảng nhiều cột sẽ đẩy cả trang tràn ngang trên điện thoại. Thứ ba là bổ sung thuộc tính mở tab mới và thuộc tính quan hệ cho các liên kết ra ngoài nếu quy ước của bạn yêu cầu. Thứ tư là nhớ rằng lớp ngôn ngữ trên thẻ mã chỉ là một nhãn: muốn mã được tô màu cú pháp, bạn phải nạp thêm một thư viện tô màu.
Câu hỏi thường gặp (FAQ)
Công cụ hỗ trợ tiêu đề tới cấp mấy?
Chỉ tới cấp ba, tức một, hai hoặc ba dấu thăng. Từ bốn dấu thăng trở lên, dòng đó không được chuyển và các dấu thăng sẽ hiện ra như chữ bình thường trong kết quả. Nếu tài liệu của bạn có tiêu đề cấp bốn, hãy sửa tay trong mã HTML sau khi dán.
Vì sao danh sách đánh số lại ra dấu chấm tròn?
Vì bước gom nhóm ở cuối bọc mọi ô danh sách liền nhau bằng thẻ danh sách không thứ tự, không phân biệt chúng đến từ dấu gạch nối hay từ chữ số. Nếu thứ tự có ý nghĩa, hãy đổi thẻ bọc thành thẻ danh sách có thứ tự sau khi dán mã vào chỗ cần dùng.
Vì sao bảng không có hàng tiêu đề?
Vì cách nhận diện khiến mọi ô đều được đóng gói bằng thẻ ô dữ liệu, không ô nào thành thẻ ô tiêu đề. Kết quả là hàng đầu mất tính chất tiêu đề cả về hình thức lẫn ngữ nghĩa. Hãy bọc hàng đầu trong thẻ phần đầu bảng và đổi các ô của hàng đó sang thẻ ô tiêu đề.
Dùng dấu sao làm ký hiệu gạch đầu dòng có được không?
Không, công cụ chỉ nhận dấu gạch nối kèm một dấu cách. Dấu sao và dấu cộng đều là ký hiệu hợp lệ trong Markdown chuẩn nhưng ở đây sẽ không được chuyển, thậm chí dấu sao còn có thể bị hiểu nhầm thành cú pháp chữ nghiêng và cho ra kết quả lạ.
Danh sách lồng nhau nhiều cấp có giữ được không?
Không, mọi ô danh sách bị làm phẳng về cùng một cấp vì công cụ không theo dõi mức thụt đầu dòng. Với tài liệu có danh sách lồng, hãy dựng lại cấu trúc lồng trong mã HTML sau khi dán, hoặc dùng một trình chuyển đổi có bộ phân tích cú pháp đầy đủ.
Nội dung tôi dán vào có được gửi lên máy chủ không?
Không. Toàn bộ phép chuyển đổi chạy bằng JavaScript ngay trong tab trình duyệt, không có lời gọi mạng nào mang nội dung đi và không có lịch sử nào được ghi. Đóng tab là nội dung biến mất, nên dùng được với tài liệu nội bộ.
Dán Markdown lấy từ nguồn lạ có an toàn không?
Không nên. Markdown cho phép chèn thẳng thẻ HTML và công cụ không lọc gì, trong khi thẻ xem bản dựng thử đưa kết quả thẳng vào trang. Nếu nội dung chứa mã kịch bản, mã đó sẽ chạy ngay trong tab của bạn. Chỉ nên dán nội dung do chính bạn hoặc đồng nghiệp viết.
Khối mã có được tô màu cú pháp không?
Không. Công cụ chỉ gắn tên ngôn ngữ thành một lớp trên thẻ mã, đó là nhãn để thư viện tô màu nhận ra chứ bản thân nó không tô gì. Muốn có màu, bạn phải nạp thêm một thư viện tô màu cú pháp vào trang đích và gọi nó sau khi nội dung được dựng.
Vì sao kết quả không tự cập nhật khi tôi gõ?
Vì công cụ chỉ dựng lại sau mỗi lần bấm nút chuyển đổi, không theo dõi từng ký tự. Sau khi sửa nội dung bên trái, hãy bấm lại nút đó rồi mới đọc kết quả, nếu không bạn sẽ đang xem bản của lần chuyển trước.
Vì sao cùng một tệp Markdown hiển thị khác nhau ở các nơi?
Vì Markdown không có một chuẩn duy nhất. Bản mô tả đầu tiên để lại nhiều điểm mơ hồ nên mỗi phần mềm diễn giải theo cách riêng, sau đó có thêm một bản đặc tả chặt chẽ và một nhánh cú pháp mở rộng riêng của nền tảng lưu trữ mã nguồn. Hãy bám vào phần cú pháp chung nhất.
Mã HTML sinh ra có kèm CSS không?
Không, đây là HTML thuần không có định kiểu. Khi dán vào trang chưa có quy tắc định kiểu cho nội dung bài viết, bảng sẽ không có đường kẻ, khối mã không có nền và trích dẫn không có vạch bên trái. Hãy bọc trong một khối có lớp riêng rồi viết định kiểu cho lớp đó.
Chuyển ngược từ HTML về Markdown có được không?
Công cụ này chỉ chuyển một chiều. Chiều ngược lại khó hơn nhiều vì HTML biểu diễn được nhiều thứ mà Markdown không có cú pháp tương ứng, nên luôn phải chấp nhận mất mát. Nếu cần, hãy dùng công cụ chuyên chuyển HTML sang Markdown và kiểm tra lại kết quả bằng mắt.
Từ khóa liên quan
- chuyển markdown sang html
- markdown to html online
- công cụ đổi md sang html
- markdown là gì
- cú pháp markdown cơ bản
- chuyển readme sang html
- viết bài bằng markdown
- markdown sang html miễn phí
- bảng trong markdown
- khối code trong markdown
- commonmark và github flavored markdown
- markdown chứa html thô
- làm sạch html trước khi hiển thị
- chuyển ghi chú sang html
- markdown cho tài liệu kỹ thuật
- html cho email template
- danh sách đánh số trong markdown
- tô màu cú pháp code trên web
- công cụ markdown chạy trên trình duyệt
- xuất bản nội dung lên cms
