Hầu như tất cả các blogger, người tạo ra nội dung hoặc các nhà phát triển công nghệ đôi khi cần hiển thị các đoạn mã nổi bật trên blog của họ. Bản thân điều này có thể là một vấn đề đau đầu. Tuy nhiên, việc đánh dấu một hoặc nhiều dòng trong đoạn mã này cũng có thể cần thiết và rất tiếc, chức năng này không có trong hầu hết các tích hợp mã. May mắn thay, plugin SyntaxHighlighter Evolved đã tồn tại. Chúng tôi sẽ chỉ cho bạn cách sử dụng nó để giữ cho mã sạch và dễ đọc nhất có thể.

Cú pháp tiến hóa

Công cụ đánh dấu cú pháp

Cài đặt và kích hoạt plugin rất đơn giản. Bạn có thể tìm thấy nó trên kho lưu trữ plugin WP.org nhưng hãy chắc chắn rằng nó được thực hiện tốt bởi Alex Mill (Viper007Bond), bởi vì quả thực, có rất nhiều kết quả. Tuy nhiên, chúng tôi biết rằng nó đáng tin cậy và cập nhật. Hơn nữa, cái này đi kèm với một khối chuyên dụng cho trình soạn thảo Gutenberg. Chưa kể đến một số thông số cho phép bạn cá nhân hóa trải nghiệm của mình, điều này khiến nó trở thành lựa chọn của chúng tôi cho loại tác vụ này.

Cú pháp highlighter plugin wordpress

Trong menu Tham số trong bảng điều khiển WordPress của bạn, bạn sẽ tìm thấy một mục mới được gọi là SyntaxHighlighter . Hãy tiếp tục và nhấp vào nó. Ở đó, bạn có thể điều chỉnh mọi thứ bạn cần để nhúng các đoạn mã vào trang web WordPress của mình.

Cài đặt cú pháp

Trang cài đặt cho plugin tương đối đơn giản. Một yếu tố cụ thể mà chúng tôi thích ở plugin này là bạn có nhiều tùy chỉnh liên quan đến cách mã được hiển thị trên trang web của bạn. Bạn có thể thêm các lớp CSS vào phần nhúng, điều chỉnh phần đệm số dòng, chọn chủ đề màu sắc, sử dụng các tab thông minh và ngắt dòng, đồng thời quyết định cách tải đánh dấu ngôn ngữ mã hóa trên toàn trang web.

Cấu hình Syntaxhighlighter

Chúng tôi muốn xác định ba tham số cụ thể mà hầu hết mọi người nên biết.

Phiên bản plugin, số dòng và kích thước tab

Đầu tiên là bạn đang tải phiên bản plugin nào. Mặc dù plugin vẫn được cập nhật trong kho lưu trữ, bạn có thể chọn giữa các phiên bản 2.x và 3.x của trình cắm , tùy thuộc vào cách bạn muốn hiển thị mã của mình. Cả hai đều an toàn, tuy nhiên, chúng đều cung cấp các tính năng cụ thể mà cái kia không có (tại thời điểm viết bài).

Nếu người dùng sao chép mã của bạn là quan trọng nhất, thì phiên bản 3.x sẽ làm được. Tuy nhiên, nếu tiện ích của bạn hữu ích hơn cho việc hiển thị so với tiện ích thực tế, thì dòng mới trong phiên bản 2.x có thể tốt hơn cho bạn, vì nó loại bỏ nhu cầu sử dụng thanh cuộn. cho các đoạn mã lớn.

Sau đó, bạn cần hiển thị hoặc không hiển thị số dòng. Đối với một lượng lớn mã và hướng dẫn, số dòng là vô giá. Tuy nhiên, khi bạn có các đoạn mã ngắn, không cần thiết phải gắn nhãn vĩnh viễn chúng thành dòng 1 và 2. Việc xóa chúng có thể cải thiện đáng kể sự xuất hiện của mã.

Và sau đó là kích thước tab vẫn còn nhiều tranh cãi. Tùy chọn mặc định là 4, nhưng bạn có thể thay đổi nó thành bất kỳ số nào bạn muốn. Bao gồm giá trị chính xác là 2. (Có, chúng tôi nhận ra rằng không có giá trị chính xác nào. Chúng tôi chỉ thích 2 dấu cách cho các tab.)

Mã và mã ngắn của bạn

Nếu bạn cuộn xuống cuối trang Tham số , bạn sẽ thấy bản xem trước của mã lớn, cũng như một số lượng lớn các tham số mã ngắn. Thời gian của bạn sẽ được dành để xem qua chúng, chỉ để xem tất cả những gì plugin có thể làm để giới thiệu các đoạn mã của bạn. Ngoài ra, bất kỳ thay đổi nào bạn đã thực hiện ở trên đối với hiển thị mã trong cài đặt ở trên sẽ được phản ánh ở đây. Vì vậy, hãy nhớ nhấn lưu sau khi thay đổi bất kỳ tùy chọn nào.

Xem sửa đổi cú pháp divi

Mặc dù một số người không phải là người hâm mộ nhất của mã ngắn vì họ có thể liên kết bạn với một số plugin nhất định, nhưng chúng tôi nghĩ rằng những plugin này đáng sử dụng vì chúng thông minh và dễ nhớ. Nếu không có gì khác, bạn cần nhớ hai điều và sau đó plugin sẽ hoạt động tốt nhất cho bạn.

ou ou ou et...bien, vous obtenez</li><li>[highlight 5-9]</li></ul>

Hoặc một số biến thể. Nếu bạn có thể nhớ, bạn tự tin về những điều khác nhau bạn có thể làm với plugin này. Mặc dù bạn có thể sử dụng mã định danh dài, plugin SyntaxHighlighter được xây dựng đủ tốt để đơn giản hóa công việc của bạn.

Sử dụng mã ngắn

Bất cứ nơi nào bạn có thể hiển thị mã ngắn, bạn có thể sử dụng chúng. Trong Divi hoặc trình soạn thảo cổ điển, bạn có thể sử dụng mô-đun Văn bản hoặc trình soạn thảo TinyMCE và chỉ cần dán mã giữa các mã ngắn. Do cách hoạt động của tab Visual, chúng tôi khuyên bạn nên sử dụng tab Văn bản để giữ các định dạng ký tự đặc biệt.

Tham số văn bản Divi

Nếu bạn là người dùng Gutenberg / Block Editor, mọi thứ thật đơn giản. Bạn có thể, một lần nữa, sử dụng khối văn bản cho việc này. Dễ dàng hơn nữa là khối HTML tùy chỉnh. Như trên, hãy dán mã vào các thẻ mã ngắn.

Chặn html gutenberg divi

Tốt hơn, khối SyntaxHighlighter Evolved là chính nó. Cài đặt trình cắm thêm bao gồm khối Gutenberg của riêng nó; vì vậy, nếu bạn không phải là shortcode và không muốn làm rối tung các cài đặt, bạn không cần phải làm như vậy. Chỉ cần tìm khối dưới định dạng và chèn nó vào tin nhắn hoặc trang của bạn.

Cú pháp highliter gutenberg

Bất kể bạn chèn mã như thế nào, bạn sẽ thấy kết xuất tương tự ở mặt trước của trang web WordPress của bạn.

Tóm tắt

Bạn có thể cần trình bày các đoạn trích cho khán giả của mình vì một số lý do. Có thể bạn viết hướng dẫn hoặc đăng các giải pháp cho các vấn đề phổ biến mà khán giả có thể thực hiện và sử dụng theo ý họ? Nhưng đôi khi tích hợp GitHub không cung cấp loại trải nghiệm bạn muốn cho người dùng của mình. Đây là lúc bạn cần một plugin như SyntaxHighlighter Evolved. 

Chỉ trong vài cú nhấp chuột, với một chút tùy chỉnh và khối Gutenberg hoặc shortcode, khán giả của bạn sẽ khám phá mã của bạn mà không gặp vấn đề gì.