Danh sách đánh dấu để dán và hiển thị mã nguồn trong WordPress
Khi viết một bài lập trình và giới thiệu mã nguồn, tôi muốn có Highlighter, một chức năng giúp bạn dễ dàng xem mã.Có rất nhiều phát triển mà bạn không thể quyết định sử dụng cái nào.Trong bài viết này, chúng tôi sẽ giới thiệu các công cụ làm nổi bật mã nguồn trong WordPress và đặc điểm của từng loại, được chia thành loại thư viện, loại plugin và dịch vụ web.
loại thư viện
Highlighter kiểu upload file thư viện lấy được vào thư mục child theme và sử dụng.Nó nhẹ hơn một plug-in, nhưng phải mất nhiều công sức hơn để giới thiệu.
Đánh dấu.js
Một thư viện JavaScript có tên là Highlight.js. Nó hỗ trợ 189 ngôn ngữ lập trình và có 89 kiểu hiển thị (tính đến tháng 2018 năm 11).Chức năng rất đơn giản, chỉ cần làm nổi bật mã.rất nhẹ.phổ biến.
Prism.js
Một thư viện JavaScript nhẹ.Hỗ trợ 153 ngôn ngữ và 8 kiểu hiển thị (tính đến tháng 2018 năm 11).Bạn có thể dễ dàng thêm số dòng, đánh dấu các dòng được chỉ định, hiển thị ngôn ngữ, cài đặt nút sao chép, v.v. dưới dạng các chức năng mở rộng.Điều này cũng phổ biến.
Làm đẹp mã Google
Đúng như tên gọi, nó là một thư viện JavaScript do Google phát triển. Nó hỗ trợ các ngôn ngữ lập trình chính như C, Python, HTML, CSS, JavaScript, Makefile, v.v., nhưng các ngôn ngữ phụ cần có phần mở rộng.Có 5 kiểu hiển thị (kể từ tháng 2018 năm 11).Ngoài hai phương pháp tải lên thư mục WordPress ở trên và sử dụng nó, có một phương pháp cài đặt đơn giản bằng trình tải tự động.Có ít thông tin tiếng Nhật vì không có nhiều người dùng.
https://github.com/google/code-prettify
Loại trình cắm
Một loại được phân phối dưới dạng plugin miễn phí cho WordPress.Nó rất dễ triển khai và dễ xử lý, nhưng nó có thể làm cho trang web của bạn hơi nặng so với các loại khác.Trong loại thư viện, bạn có thể chọn chỉ hỗ trợ các ngôn ngữ bạn cần, nhưng trong phiên bản plug-in, nó là một hình ảnh cung cấp tất cả các ngôn ngữ và tất cả các chức năng.
Mã WP Highlight.js
Đây là phiên bản plugin của Highlight.js được giới thiệu trong loại thư viện. Tương thích với SyntaxHighlighter, Prettify, CrayonSyntaxHighlighter, vì vậy bạn có thể di chuyển từ các công cụ tô sáng khác.
https://ja.wordpress.org/plugins/wp-code-highlightjs/
Công cụ tô sáng cú pháp lăng kính
Phiên bản plugin của Prism.js.
https://ja.wordpress.org/plugins/ank-prism-for-wp/
Chứng minh trước mã
Như nhau.
https://ja.wordpress.org/plugins/code-prettify/
Bút đánh dấu cú pháp Crayon
Ấn tượng rằng có nhiều người dùng và thông tin phong phú về việc mở bằng tiếng Nhật.Ngay cả những người mới bắt đầu cũng có thể dễ dàng thay đổi kích thước và thiết kế phông chữ, thêm số dòng và chỉ định đánh dấu, v.v. và khả năng tùy biến rất cao.Có nhiều ý kiến cho rằng nó nặng và bản cập nhật cuối cùng đã dừng từ năm 2015, đây là một điều đáng lo ngại.
https://ja.wordpress.org/plugins/crayon-syntax-highlighter/
Công cụ đánh dấu cú pháp Mivhak
Nó hỗ trợ hơn 130 ngôn ngữ lập trình và có 36 chủ đề, thật hoàn hảo.Từ CSS và JS nhẹ đến các tập lệnh và chủ đề ngôn ngữ dường như tải theo yêu cầu, nó có cảm giác nặng nề như Crayon Syntax Highlighter.Bạn chỉ có thể chỉ định kích thước phông chữ cho phần mã.
https://ja.wordpress.org/plugins/mivhak/
Tôi đã so sánh tác động của từng plug-in đối với tốc độ hiển thị của trang web, vì vậy vui lòng tham khảo thêm phần này.
So sánh tốc độ hiển thị trang web của các plug-in Syntax Highlighter
Loại dịch vụ web
Nó là một loại công cụ đánh dấu chuyển đổi mã nguồn trên web thành các thẻ để nhúng và dán các thẻ đó vào trình soạn thảo văn bản Wordpress để đánh dấu chúng.
Gist (một dịch vụ GitHub)
Gist là dịch vụ chia sẻ mã của GitHub. Khi bạn tải mã lên Gist, thẻ để hiển thị sẽ được xuất ra. Cần phải đăng ký với GitHub, nhưng ưu điểm là bạn có thể chỉnh sửa và quản lý mã bên GitHub (Nếu bạn chỉnh sửa bằng trình soạn thảo văn bản,hoặcThật khó hiểu khi loay hoay với các thẻ như ).
https://gist.github.com/discover
srctohtml
Bạn có thể dễ dàng chuyển đổi mã thành các thẻ HTML để nhúng mà không cần đăng ký.Các ngôn ngữ được hỗ trợ là JavaScript, C ++ và PHP, ít hơn một chút.
http://marginalsoft.com/tools/srctohtml/
chọn cái nào
Những gì bạn muốn tập trung vào sẽ xác định công cụ bạn sử dụng.Mình đã tóm tắt định hướng và tính không phù hợp của từng loại một cách dễ hiểu, các bạn tham khảo nhé.Ngoài ra, điều quan trọng là phải biết nếu bạn quan tâm đến thiết kế của những điểm nổi bật.
| loại thư viện | Nhấn mạnh vào sự nhẹ nhàng của hoạt động và tốc độ hiển thị |
| Loại trình cắm | Nhấn mạnh vào tính dễ giới thiệu (Tùy thuộc vào plugin, nó có thể không quá nặng) |
| Loại dịch vụ web | Những người bị thu hút bởi các chức năng quản lý mã, đã đăng ký trên GitHub (Gist) Những người không có nhiều cơ hội nhúng (srctohtml) |
Nhân tiện, tôi sử dụng plugin Mivhak Syntax Highlighter.Thật tốt khi bạn chỉ có thể chỉ định kích thước phông chữ cho phần mã và vận hành các cài đặt nút khác nhau trên màn hình cài đặt đơn giản.Tốc độ sẽ giảm trên thiết bị di động, nhưng những người tham khảo mã có thể đến từ PC, vì vậy tôi không nghĩ đó là vấn đề lớn.