Lưu đánh dấu dưới dạng HTML

Có nhiều công cụ để chuyển đổi tệp đánh dấu thành tệp HTML và tôi sẽ giới thiệu ba công cụ hàng đầu của cá nhân tôi

Vì nó có thể tự động tạo Mục lục và thiết lập điều hướng bên, tôi thấy nó đặc biệt hữu ích để tạo tài liệu và hướng dẫn sử dụng cho các trang web mà tôi đã xây dựng

Tôi không thể sống thiếu những công cụ này, vì giờ đây tôi có thể dễ dàng tạo mọi thứ với phần đánh dấu mà tôi đã từng tạo bằng Word hoặc PowerPoint, v.v.

3 công cụ tốt nhất của tôi

Ba điều sau đây là tốt nhất của tôi
Ba cái này không có hơn kém, nhưng mỗi cái đều có điểm hay riêng.

• ngăn xếpSửa đổi
• Pandoc
• dousaurus

Giới thiệu về StackSửa đổi

Tổng quan và Tính năng

StackEdit là trình chỉnh sửa mã nguồn mở chạy trong trình duyệt

Ngoài việc là một trình chỉnh sửa, nó còn có một menu GUI phong phú, vì vậy đây là công cụ dễ sử dụng nhất trong ba công cụ

Trang điện tử chính thức
StackEdit – Trình chỉnh sửa Markdown trong trình duyệt

URL của trình chỉnh sửa

Vì nó được xây dựng dưới dạng PWA nên bạn có thể cài đặt nó trên PC và sử dụng nó, đồng thời nó cũng hoạt động ngoại tuyến

Tôi thường sử dụng StackEdit cho các tài liệu chỉ có văn bản hoặc tài liệu đặt tệp hình ảnh từ các trang web bên ngoài
Nếu tôi muốn đặt hình ảnh từ máy tính cục bộ của mình, tôi sử dụng hai công cụ được mô tả sau

Các tính năng của StackEdit và những điều tôi thích về nó như sau

• Trực quan để sử dụng, do đó có ít chi phí học tập hơn
• Là một PWA, nó có thể được cài đặt trên PC và được gọi từ menu Windows
• Hoạt động ngoại tuyến
• Các tệp có thể được sắp xếp thành các thư mục (thông tin được lưu trữ trong bộ nhớ cục bộ của trình duyệt)
• Nó có chức năng xuất bản cho phép bạn thêm tệp vào tài khoản WordPress của mình hoặc lưu chúng vào bộ lưu trữ như Dropbox hoặc Google Drive
• Nó có thể tạo tệp HTML với Mục lục được tạo tự động theo thao tác cuộn của người dùng
• Tệp HTML đầu ra có thể đứng độc lập như một trang web
• Tệp HTML đầu ra có thể được xem trên máy cục bộ (không cần máy chủ web)
• Có thể đặt nhiều không gian làm việc (ví dụ: bạn có thể chuyển đổi giữa nhiều Google Drive)
• Lịch sử chỉnh sửa được lưu lại

Ảnh chụp màn hình các chức năng chính

Tổng quan về từng phần

Phía bên trái là bảng nhập liệu và thông tin được xem trước ở phía bên phải. Điều hướng bên trái cũng cho phép bạn sắp xếp các tệp của mình

Điều hướng bên phải cho phép bạn truy cập vào các menu khác nhau

Tính năng xuất bản

Nó có chức năng xuất bản để thêm tệp vào các dịch vụ khác nhau bằng cách liên kết với tài khoản WordPress, Dropbox và Google, v.v. Tôi chưa sử dụng tính năng xuất bản lên WordPress, nhưng nó có vẻ hữu ích

Tôi thường sử dụng chức năng xuất bản này để lưu tệp vào bộ lưu trữ

Xuất tệp HTML

Chọn "HTML được tạo kiểu với TOC" ở dưới cùng để xuất tệp HTML có mục lục theo sau cuộn của bạn
Liên kết neo cũng đã được áp dụng cho mục lục

Các trường hợp StackEdit không phù hợp

Tôi không sử dụng StackEdit khi đặt hình ảnh của PC cục bộ của mình vào tài liệu

Trong StackEdit, bạn có thể chèn hình ảnh bằng cú pháp Markdown hoặc bạn có thể chèn hình ảnh từ menu

Tuy nhiên, bạn cần chèn hình ảnh ở định dạng URL
Nếu bạn nhập đường dẫn tệp đến hình ảnh trên PC cục bộ của mình, bạn sẽ không thể xem trước nó trong StackEdit

Trong trường hợp này, tôi sử dụng Pandoc hoặc Docusaurus

Lý do cho điều này là khi tôi sử dụng hai công cụ này, về cơ bản tôi tạo các tệp đánh dấu bằng trình chỉnh sửa mã chẳng hạn như Visual Studio Code. Việc sử dụng plugin trình chỉnh sửa mã sẽ hoàn thành đường dẫn đến tệp hình ảnh và video trong môi trường cục bộ, do đó sẽ mất ít thời gian hơn so với viết phần đánh dấu trong StackEdit

Giới thiệu về Pandoc

Tổng quan và Tính năng

Pandoc là một trình chuyển đổi tài liệu nguồn mở hoạt động thông qua CLI

Nó không chỉ có thể chuyển đổi các tệp đánh dấu sang định dạng HTML mà còn hỗ trợ các định dạng tài liệu khác nhau như Microsoft Word, XML và Wiki, v.v.

Trang điện tử chính thức
Pandoc - Về pandoc

Pandoc vận hành bằng lệnh, nhưng nếu bạn chuyên xuất file markdown sang file HTML để làm tài liệu thì chỉ cần học 1 lệnh

Ngoài ra, trong tệp HTML do Pandoc xuất ra, mặc định chỉ áp dụng CSS đơn giản, nhưng bằng cách sử dụng các mẫu có sẵn trên GitHub, bạn có thể tạo một trang với các kiểu đẹp được áp dụng

Tôi sử dụng Pandoc khi tôi muốn chèn hình ảnh và video được lưu trữ trên máy cục bộ của mình vào các tệp đánh dấu

Tôi thường tổ chức các hình ảnh và video trong một thư mục images, tải chúng vào một tệp đánh dấu và sử dụng Pandoc để xuất tệp HTML

Sau đó, tôi thường gửi toàn bộ thư mục chứa thư mục images cho người mà tôi muốn cung cấp tài liệu cho

Docusaurus, sẽ được thảo luận sau, cung cấp các tính năng rất mạnh mẽ để xây dựng các trang web tài liệu nhiều trang, nhưng không thể xem các tệp đã xuất nếu không có máy chủ web, vì vậy Pandoc sẽ dễ sử dụng hơn nếu các tệp được xem trên máy cục bộ của mỗi người dùng

Các tính năng của Pandoc và những điều tôi thích về nó như sau

• Nó được sử dụng với CLI
• Hỗ trợ mọi định dạng tệp tài liệu
• Bạn có thể tạo các mẫu của riêng mình cho các tệp đầu ra
• Bạn cũng có thể sử dụng các mẫu do người khác xuất bản
• Tệp HTML đầu ra có thể được sử dụng làm trang web riêng
• Bạn có thể điều chỉnh thiết kế bằng cách thêm CSS (tương tự với StackEdit, nhưng bằng cách thêm CSS vào mẫu, bạn không phải thêm lần nào cũng được)
• Tệp HTML đầu ra có thể được xem trên máy cục bộ (không cần máy chủ web)

Cài đặt thế nào

Đối với Windows, cách đơn giản nhất là sử dụng bộ cài đặt. Một tệp ZIP chứa các tệp nhị phân cũng được cung cấp

Cả hai có thể được tải xuống từ liên kết sau
Phát hành pandoc 2. 14. 1 · jgm/pandoc

Để kiểm tra xem quá trình cài đặt đã hoàn tất hay chưa, hãy khởi chạy một thiết bị đầu cuối và chạy lệnh sau

pandoc -v

Nếu hiện phiên bản Pandoc thì quá trình cài đặt đã hoàn tất

Nếu bạn muốn biết thêm thông tin chi tiết, vui lòng kiểm tra trang web chính thức bên dưới

Trang điện tử chính thức
cài đặt pandoc

Tải xuống mẫu

Trong trường hợp của tôi, tôi thường sử dụng easy-pandoc-templates, được xuất bản trên GitHub bởi Ryan Grose, một kỹ sư dữ liệu, theo Giấy phép Công cộng GNU v3. 0

Các tệp mẫu có thể được tải xuống từ liên kết sau

easy-pandoc-templates
ryangrose / easy-pandoc-templates. Một bộ sưu tập các mẫu pandoc di động không phụ thuộc

Chuyển đổi tệp đánh dấu

Trong phần này, tôi sẽ chỉ cho bạn cách chuyển đổi tệp đánh dấu sang HTML bằng cách sử dụng "easy-pandoc-templates" đã tải xuống ở trên

Đầu tiên, cấu trúc thư mục sẽ giống như sau

your-directory
├── your-markdown.md
└── easy-pandoc-templates-master

Vui lòng giữ nguyên các tệp đã tải xuống trong thư mục easy-pandoc-templates-master

Tiếp theo, mở một cửa sổ đầu cuối và di chuyển đến thư mục chứa các tệp đánh dấu

Sau đó, chạy lệnh sau

pandoc -s --toc --template=easy-pandoc-templates-master/html/elegant_bootstrap_menu.html your-markdown.md -o your-markdown.html

Sau đây là mô tả của lệnh

• -S. Tùy chọn để tạo một trang độc lập. Điều này sẽ tạo ra một trang HTML độc lập dưới dạng tài liệu HTML với các thẻ đầu, v.v.
• -toc. Tùy chọn tạo Mục lục
• --mẫu. Chỉ định URL hoặc đường dẫn tệp của tệp mẫu. Ở đây, chúng tôi sẽ sử dụng mẫu elegant_bootstrap_menu.html
• đánh dấu của bạn. md. Chỉ định tên của tệp đánh dấu sẽ được chuyển đổi
• -o your-markdown. html. Chỉ định tên của tệp đầu ra

Lệnh này sẽ xuất một tệp HTML trong thư mục làm việc mà bạn đã chuyển đến

Mục lục sau khi cuộn sẽ được tạo ở phía bên trái của trang, như hình bên dưới

Bằng cách thêm CSS và JavaScript vào elegant_bootstrap_menu.html, bạn cũng có thể điều chỉnh giao diện và áp dụng tính năng cuộn mượt mà

Giới thiệu về Docusaurus

Tổng quan và Tính năng

Docusaurus là một công cụ tạo trang tài liệu được phát triển bởi Facebook

Mặc dù StackEdit là trình chỉnh sửa đánh dấu có thể xuất tệp HTML và Pandoc là công cụ chuyển đổi tài liệu dựa trên lệnh, Docusaurus là Trình tạo trang tĩnh

Do đó, Docusaurus hữu ích hơn cho việc tạo các trang web nhiều trang hơn là tạo một trang HTML duy nhất

Các tính năng của Docusaurus và những gì tôi thích về nó như sau

• Trình tạo trang tĩnh
• Giỏi xây dựng trang tài liệu
• Nó có thể chuyển đổi các tệp đánh dấu thành các trang tĩnh
• Nó hỗ trợ phản ứng
• Nó có các tính năng cho các trang web đa ngôn ngữ
• Nó có tính năng kiểm soát phiên bản tài liệu
• Hỗ trợ chức năng tìm kiếm trang web (tìm kiếm tài liệu Algolia)
• Có chức năng triển khai

Mặc dù nó là một công cụ để xây dựng các trang tài liệu, nhưng nó cũng có thể được sử dụng để tạo các trang độc lập như trang chủ, hồ sơ công ty (như "trang" trong WordPress) và các bài đăng trên blog

Trong trường hợp của tôi, Docusaurus rất hữu ích để tạo hướng dẫn sử dụng với số lượng trang lớn

Tuy nhiên, Docusaurus yêu cầu máy chủ web duyệt các trang web tĩnh mà nó xây dựng
Nói cách khác, bạn không thể kéo và thả các tệp HTML trên máy cục bộ của mình vào trình duyệt và duyệt chúng với định dạng URL file:// (nếu có ai biết cách thực hiện việc này, vui lòng cho tôi biết qua twitter @ktsmz của tôi. )

Do đó, nếu bạn không muốn trang của mình ở chế độ công khai, bạn cần hạn chế truy cập theo địa chỉ IP, v.v.

Chủ đề này được thảo luận trong vấn đề GitHub sau
Hỗ trợ đường dẫn tương đối · Vấn đề #448 · facebook/docusaurus

Cách sử dụng Docusaurus

Việc sử dụng Docusaurus thì có quá nhiều để giải thích ở đây, vì vậy vui lòng xem bài viết sau

bài viết liên quan
Tạo một trang web với markdown - Hướng dẫn Docusaurus

thông tin tác giả

Giám đốc web và tiếp thị

Kota Shimizu

Tôi đã làm việc trong các lĩnh vực sản xuất web, video và tạp chí, có kinh nghiệm lập kế hoạch, thiết kế, chụp ảnh, mã hóa, tiếp thị và cải tiến kinh doanh. Tôi là một giám đốc ăn tạp, người có thể xử lý mọi thứ một cách rộng rãi

Markdown có thể được chuyển đổi thành HTML không?

Làm cách nào để chuyển đổi Markdown sang HTML trong vscode?

Làm cách nào để chuyển đổi Markdown sang HTML trong C#?