Cách biến VSCode thành Ultimate Markdown Editor

Nếu bạn viết cho web, bạn có thể muốn xem xét Markdown. Có rất nhiều ứng dụng Markdown phục vụ cho người viết web. Nhưng các trình soạn thảo mã miễn phí như Visual Studio Code (VSCode) của Microsoft có thể còn mạnh hơn nữa.

VSCode hiểu Markdown và có các công cụ tích hợp để xem trước nó trong HTML. Tuy nhiên, bạn có thể thêm chức năng xử lý văn bản như đếm từ và kiểm tra chính tả. Bạn cũng có thể muốn bật các tùy chỉnh dành riêng cho trang web cho trình xem trước.

LÀM VIDEO TRONG NGÀY

Cuối cùng, khả năng sao chép Markdown dưới dạng HTML để bạn có thể dán nó vào Hệ thống quản lý nội dung (CMS) là điều bắt buộc.

Tải xuống và cài đặt VSCode

Để bắt đầu, hãy tải xuống VSCode hoặc VSCodium mã nguồn mở thay thế của nó. Các phiên bản của mỗi phiên bản đều có sẵn cho tất cả các hệ điều hành máy tính để bàn chính.

Một khi bạn đã đã tải xuống và cài đặt VSCode , chạy ứng dụng để bắt đầu.

Cài đặt tiện ích mở rộng đếm từ

Bắt đầu bằng cách thêm bộ đếm từ. Có nhiều tiện ích mở rộng có sẵn để xử lý việc này. Phần mềm phân biệt tốt nhất giữa các từ thực tế và mã hoặc tên tệp là phần mở rộng Bộ đếm từ của chính Microsoft.

Tải xuống: Số từ Phần mở rộng VSCode (Miễn phí)

Bấm vào Tải xuống tiện ích mở rộng Dưới Tài nguyên trong ngăn dưới bên phải.
Sau khi tải xuống, hãy chuyển sang VSCode.
Bấm vào biểu tượng bánh răng ở góc dưới bên trái của giao diện.
Bấm vào Tiện ích mở rộng .
Bấm vào dấu chấm lửng ( ... ) gần đầu ngăn Tiện ích mở rộng.
Nhấp chuột Cài đặt từ VSIX .
Chọn ms-vscode.wordcount - *. vsix tệp bạn vừa tải xuống.

Các Số từ phần mở rộng bây giờ sẽ được cài đặt. Kiểm tra nó bằng cách mở một tệp Markdown mới và nhập. Bây giờ bạn sẽ thấy một bộ đếm từ ở phía dưới bên trái của giao diện:

Một tài liệu đánh dấu mở trong VSCode có lỗi chính tả được phát hiện bằng gạch dưới chữ nguệch ngoạc màu xanh lam mềm.

Cài đặt Tiện ích mở rộng Kiểm tra Chính tả

Bạn cũng sẽ muốn thêm chức năng kiểm tra chính tả. Như với bộ đếm từ, có nhiều phần mở rộng xử lý việc kiểm tra chính tả. Phổ biến nhất là Kiểm tra chính tả mã của Street Side Software vì nó có sẵn ở nhiều ngôn ngữ.

Tải xuống: Kiểm tra chính tả mã Phần mở rộng VSCode (Miễn phí)

màn hình cảm ứng windows 10 không hoạt động dell

Làm theo các bước từ 1 đến 6 từ phần trên.
Chọn Streetidesoftware.code-trình kiểm tra chính tả - *. vsix tệp bạn vừa tải xuống.

Các Kiểm tra chính tả mã phần mở rộng bây giờ sẽ được cài đặt. Kiểm tra nó bằng cách mở một tệp Markdown mới và gõ các từ sai chính tả.

Phía dưới bên phải của thanh trạng thái VSCode với chỉ báo hiển thị bốn lỗi chính tả.

Bạn sẽ thấy một dòng chữ nguệch ngoạc màu xanh lam dưới những từ đó cùng với một số lỗi ở phía dưới bên phải của giao diện:

Tệp VSCode settings.json mở với mã tùy chỉnh được thêm vào.

Tùy chỉnh Squiggle lỗi

Vấn đề lớn nhất với tiện ích Kiểm tra chính tả này là màu xanh lam yếu được sử dụng cho ô vuông xác định lỗi. Nó có xu hướng hòa vào nền của các chủ đề tối và được sử dụng lại cho các phần tử Markdown khác.

Bạn có thể thử thay đổi nó thành màu đỏ đậm như bạn mong đợi sẽ thấy trong trình xử lý văn bản:

Bấm vào biểu tượng bánh răng ở góc dưới bên trái của giao diện.
Bấm vào Cài đặt .
Bấm vào Bàn làm việc , sau đó Vẻ bề ngoài .
Cuộn xuống Tùy chỉnh màu sắc :
Nhấp chuột Chỉnh sửa trong settings.json .
Dán mã sau vào trình chỉnh sửa mở trong tab mới:
```
"editorInfo.foreground": "#ff0000"
```
và lưu tệp.

Bây giờ nếu bạn viết sai chính tả một từ, VSCode sẽ trang trí nó bằng một ô vuông màu đỏ tươi:

Một tài liệu HTML được định dạng đúng sẽ mở trong VSCode.

Bỏ qua khẳng định sai

Trình kiểm tra chính tả có thể không nhận ra một số thuật ngữ cụ thể trong ngành hoặc danh từ riêng như tên công ty. Ví dụ: trong ảnh chụp màn hình ở trên, VSCode đánh dấu từ viết tắt 'distro' là một lỗi chính tả.

Để không xem những từ này là lỗi, bạn sẽ muốn thêm chúng vào Thiết lập người dùng .

Nhấp chuột phải vào từ bạn muốn trình kiểm tra chính tả bỏ qua.
Di chuột qua chính tả và chọn Thêm từ vào cài đặt người dùng .

Kể từ bây giờ, kiểm tra chính tả sẽ không còn xác định những từ này là sai:

Menu VSCode Settings> Extensions> Markdown> Markdown: Styles.

Cài đặt Copy Markdown dưới dạng Tiện ích mở rộng HTML

Tiếp theo, cài đặt tiện ích mở rộng Copy Markdown dưới dạng HTML để bạn có thể sao chép và dán Markdown được định dạng.

màn hình đen máy tính xách tay toshiba với con trỏ

Tải xuống: Sao chép Markdown dưới dạng HTML Phần mở rộng VSCode (Miễn phí)

Làm theo các bước từ 1 đến 6 từ các phần trên.
Chọn jerriepelser.copy-markdown-as-html-1.1.0.vsix tệp bạn vừa tải xuống.

Bây giờ bạn sẽ có thể sao chép Markdown từ VSCode và dán nó vào CMS dưới dạng HTML sạch. Để kiểm tra điều này:

Chọn một số văn bản Markdown.
Mở Bảng lệnh bên trong Lượt xem menu hoặc bằng cách nhấn CTRL + Shift + P .
Chọn Markdown: Sao chép dưới dạng HTML :
Dán Markdown đã sao chép vào một tệp HTML mới.

Bạn sẽ thấy rằng Markdown được sao chép đã được dán đúng cách dưới dạng HTML:

Màn hình chào mừng VSCode trong chủ đề ánh sáng.

Tùy chỉnh ngăn xem trước

Theo mặc định, ngăn xem trước sẽ có cùng kiểu với chủ đề VSCode hiện tại.

Phần đánh dấu của bài viết này mở trong VSCode bằng cách sử dụng chủ đề Office của huacat.

Tuy nhiên, bạn có thể muốn các bản xem trước phản ánh chính xác hơn điểm đến cuối cùng của nội dung của bạn. Bạn có thể tùy chỉnh ngăn xem trước để làm cho Markdown của bạn trông giống như đã có trên trang web mà bạn đang xuất bản.

Bạn có thể sử dụng bất kỳ trang web nào bạn muốn; các kiểu sau đây được lấy từ MUO. Chỉ sử dụng công cụ phần tử kiểm tra của trình duyệt để tìm phông chữ và chọn màu từ bất kỳ trang web nào .

Tạo một tệp mới và đặt tên nó như ' CustomStyles.css '

Dán mã CSS mẫu sau vào tệp:

body { 
  background-color: #fff; 
  color: #2c2c2c; 
  font-family: Roboto; 
  font-size: 18px; 
  font-weight: 400; 
  line-height: 1.7em; 
  max-width: 750px; 
} 
  
h1 { 
  font-size: 38px; 
  font-weight: 800; 
} 
  
h2 { 
  font-size: 34px; 
  font-weight: 700; 
} 
  
h3 { 
  font-size: 24px; 
  font-weight: 700; 
} 
  
a { 
  border-bottom: 2px solid #bf0d0b; 
  color: #bf0d0b; 
  font-weight: 700; 
} 
  
a:hover { 
  color: #fff; 
  background: #bf0d0b; 
} 
  
strong { 
  font-weight: bold; 
}

và lưu tệp.
Bấm vào biểu tượng bánh răng ở góc dưới bên trái của giao diện.
Bấm vào Cài đặt .
Bấm vào Tiện ích mở rộng và sau đó Markdown .
Cuộn xuống Markdown: Phong cách và bấm vào Thêm mặt hàng .
Nhập con đường của bạn CustomStyles.css tệp, ví dụ:
```
C:\Users\Adam\CustomStyles.css
```
Nhấp chuột ĐƯỢC RỒI .

Khi bạn đã thực hiện những điều này, bạn sẽ kết thúc với một ngăn xem trước trông giống như bài viết này.

Một lần nữa, tôi nhận được các giá trị này bằng cách sử dụng công cụ Kiểm tra phần tử của trình duyệt trên MUO, nhưng bạn sẽ muốn tìm các giá trị cho trang web đích của riêng mình.

Chủ đề biên tập viên

Chủ đề VSCode mặc định có cả tối và sáng, với các phiên bản có độ tương phản cao của mỗi chủ đề. Nhưng giống như bất kỳ trình soạn thảo mã tốt nào, có rất nhiều chủ đề tuyệt vời của bên thứ ba có sẵn .

Nếu bạn thích giao diện của Bộ xử lý Word hơn giao diện của trình soạn thảo mã, tôi đề xuất chủ đề Office by huacat:

làm cách nào để đặt ứng dụng trên thẻ sd của tôi

Nếu bạn thích một trình soạn thảo mã, các chủ đề phổ biến như Dracula, Gruvbox, Material (xem ảnh chụp màn hình bên dưới) và Nord đều có sẵn từ thị trường tiện ích mở rộng.

Để cài đặt một chủ đề mới:

Bấm vào biểu tượng bánh răng ở góc dưới bên trái của giao diện.
Bấm vào Tiện ích mở rộng .
Tìm kiếm bất kỳ chủ đề nào được đề cập ở trên hoặc chỉ cần lọc danh mục để chủ đề và duyệt qua những gì có sẵn.

VSCode có phải là Trình chỉnh sửa Markdown cuối cùng không?

Vì vậy, VSCode có phải là trình soạn thảo Markdown cuối cùng cho nội dung web không? Ngoài hộp, có lẽ là không. Nhưng nó có thể mở rộng được như bất cứ thứ gì có thể.

Bộ đếm từ, công cụ kiểm tra chính tả, Copy Markdown dưới dạng HTML, các tùy chỉnh xem trước và các chủ đề chỉ làm sơ qua bề mặt. Có một hệ sinh thái đầy đủ các tiện ích mở rộng có sẵn cho VSCode và bạn có thể tự do biến nó thành của riêng mình.