Làm thế nào để hiển thị Markdown trên một trang web với md-block
Cú pháp đơn giản của Markdown làm cho nó trở thành một sự thay thế tuyệt vời cho HTML. Ngôn ngữ này luôn hỗ trợ nhúng HTML, nhưng bây giờ bạn có thể làm theo cách khác và nhúng Markdown vào HTML.
Sử dụng một thư viện đơn giản, bạn có thể lưu trữ Markdown được nhúng trong các trang web của mình và chuyển đổi nó sang HTML thích hợp ngay lập tức.
Mục Lục
Khối md làm gì?
Quy trình hiện tại của bạn có thể liên quan đến việc tạo các tệp Markdown bằng tay, sau đó chuyển đổi chúng thành HTML. Đây là cách nhiều ứng dụng CMS hiện đại hoạt động. Hoặc bạn có thể sử dụng một khuôn khổ như Angular để hiển thị Markdown thành các trang.
Thư viện md-block hoàn toàn không phải là một giải pháp thay thế; thay vào đó, nó đáp ứng một trường hợp sử dụng hơi khác. Nó chuyển đổi Markdown nội tuyến thành HTML tương đương của nó. Bạn có thể nhúng Markdown vào các tệp HTML của mình và hiển thị nó trên máy khách, vào thời điểm yêu cầu.
Đây là những gì có thể trông như thế này:
<html>
<head>...</head><body>
<md-block>
# Heading
Some *embedded* Markdown which `md-block` can convert for you!
</md-block>
</body>
</html>
Bạn nên căn trái mã Markdown được nhúng của mình mà không có bất kỳ thụt lề nào ở đầu. Điều này là do khoảng trắng ở đầu có thể quan trọng trong Markdown, không giống như HTML.
Thư viện giới thiệu phần tử HTML tùy chỉnh của riêng mình, md-block. Mặc dù phần tử này không phải là một phần của tiêu chuẩn HTML, nhưng đây là một kỹ thuật hợp lệ. Tiêu chuẩn Thành phần Web (MDN) bao gồm một API được gọi là Phần tử tùy chỉnh. API này hỗ trợ đăng ký động các phần tử tùy chỉnh bằng JavaScript.
Trước khi tải thư viện md-block, trang này sẽ hiển thị theo cách quen thuộc:
Tất nhiên, bạn có thể tạo kiểu cho phần tử md-block để nó trông giống trong trình soạn thảo văn bản hơn. Với khoảng trắng được định dạng sẵn và phông chữ monospace, ít nhất nó sẽ dễ đọc hơn một chút:
<style>md-block { white-space: pre; font-family: monospace; }</style>Bạn có thể muốn loại đầu ra này nếu bạn đang viết một hướng dẫn về Markdown. Nó cho phép bạn giải thích cú pháp Markdown trong khi cho phép bạn dễ dàng chỉnh sửa Markdown mẫu của mình:
Nhưng thủ thuật của bên md-block là chuyển Markdown đó thành HTML cuối cùng.
Ngay cả với các kiểu trình duyệt mặc định, nội dung hiện được hiển thị giống như HTML thông thường của bạn, ngay cả khi bạn đã gửi nó tới trình duyệt dưới dạng Markdown:
Cách sử dụng md-block
Khi bạn đã thêm thư viện md-block vào trang của mình, bạn có thể ghi Markdown của mình vào md-block các yếu tố. Sau đó, thư viện sẽ tự động định dạng Markdown của bạn và bạn có thể tiếp tục nhúng Markdown theo yêu cầu.
Tuy nhiên, có một vài biến thể trong quá trình này.
Nguồn tập lệnh từ xa hoặc tự cài đặt
Cách dễ nhất để bắt đầu là tham khảo thư viện từ trang web chính thức của md-block:
<script type="module" src="https://md-block.verou.me/md-block.js"></script>Đây có thể không phải là cách tiếp cận hiệu quả nhất, nhưng nó chắc chắn là nhanh nhất. Chỉ cần thêm mã này vào cái đầu và trang của bạn sẽ tự động hiển thị mọi thứ trong phần tử md-block sang HTML:
Tất nhiên, bạn có thể tải xuống tệp JavaScript đó và lưu trữ nó trên trang web của riêng bạn. Hoặc bạn có thể cài đặt nó qua npm:
npm install md-blockMarkdown Blocks so với Inline Markdown
Phần tử mặc định, được đặt tên theo chính thư viện, là md-block. Nhưng bạn cũng có thể sử dụng md-span phần tử cho Markdown nội dòng, chẳng hạn như văn bản ở giữa câu:
Trường hợp sử dụng cho Markdown nội tuyến có lẽ ít phổ biến hơn, nhưng bạn vẫn có thể sử dụng nó:
<p>An HTML paragraph containing <md-span>*italic*</md-span> text.</p>Làm thế nào để cú pháp làm nổi bật các khối mã đánh dấu bằng lăng kính
Prism là một công cụ đánh dấu cú pháp mà Lea Verou, người tạo ra md-block, đồng tạo ra. Bạn có thể sử dụng nó để đánh dấu các khối mã được định dạng sẵn trong một trang web, bao gồm cả những khối mà md-block tạo ra.
Vì vậy, với HTML này:
<html>
<body>
<md-block>
```javascript
function square(number) {
return number * number;
}
```
</md-block>
<script src="prism.js"></script>
</body>
</html>
Bạn sẽ thấy mã được định dạng độc đáo với phần đánh dấu nhận biết cú pháp:
Tùy chọn của bạn để viết trực tuyến vừa tăng
Cách bạn sử dụng md-block là tùy thuộc vào bạn, nhưng có rất nhiều tiềm năng cho các giải pháp sáng tạo sử dụng nó. Bạn có thể sử dụng nó để chạy một CMS rất nhẹ cho những người viết tự tin sử dụng Markdown, nhưng không sử dụng HTML.
Markdown là một ngôn ngữ hoàn hảo cho khán giả nói chung. Việc áp dụng nó bởi các công cụ như Slack rất có thể sẽ tăng mức sử dụng hơn nữa.