Chúng ta đều quen thuộc với phần mềm mã hóa máy tính để bàn và IDE web. Các tính năng này làm nổi bật cú pháp để tạo điều kiện cho việc viết và gỡ lỗi mã.
Nhưng bạn có biết bạn có thể lấy cùng một màu cú pháp và thêm nó vào nội dung web của bạn không?
Tất nhiên, không phải ai cũng viết về mã hoặc có đoạn mã trong bài đăng trên blog của họ. Nhưng nếu bạn viết nhiều bài viết mã hóa hoặc cần thêm đoạn mã vào trang đích của mình, bạn sẽ thích các giải pháp làm nổi bật mã CSS và JS này.
Nếu bạn đang tìm kiếm các plugin cú pháp tô sáng cho WordPress, hãy xem bài viết này.
1. Hộp mã nguồn góc
Đây là một đoạn tuyệt vời được tạo bởi Andrew Archibald, được xây dựng hoàn toàn trong Angular.js.
Tất cả các hộp mã mẫu này đều có các tab giống như các tab bạn sẽ tìm thấy trong các nhúng nhúng CodePen. Nhưng bạn có thể thêm loại mã này vào trang của mình dát, tất cả được quản lý thông qua CSS để tạo kiểu.
Điều này sẽ giảm các yêu cầu HTTP qua việc nhúng và điều này cho phép bạn kiểm soát nhiều hơn đối với loại cú pháp bạn đang sử dụng.
Tôi thừa nhận rằng các tab này khá tuyệt và điều này sử dụng thư viện tô sáng góc cạnh để tương thích cú pháp trong hàng tá ngôn ngữ.
2) Estilo de etiqueta
Đây là một ví dụ chi tiết hơn nhiều cho các nhà phát triển viết hướng dẫn dài dòng và chia sẻ các đoạn mã lớn.
Dự án thiết kế mã này hoạt động với hai tính năng: một thanh dọc bên trái với số dòng hoặc nền toàn trang tối cho mã mẫu.
Bạn có thể thay đổi kiểu của các tùy chọn màu theo ý muốn chỉ với một chút jQuery. Chưa kể, có rất nhiều loại ở đây để phù hợp với bất kỳ thiết kế trang web nào.
3. Tab Textarea
Vì vậy, đây là một dự án thực sự độc đáo được phát triển bởi Ashley Ktorou cho thấy những gì bạn có thể làm với một vùng văn bản đơn giản.
Bộ mã hóa trên web cần nhập mã ở đâu đó. Một vùng văn bản là yếu tố hoàn hảo để xử lý điều đó.
Tuy nhiên, với đoạn mã này, bạn sẽ tìm thấy một vùng văn bản tùy chỉnh với phần tô sáng cùng với các tab tùy chỉnh và một chức năng toàn màn hình. Chưa kể rằng tất cả những thứ này hoạt động với mã CSS và mã cơ bản.
Thật điên rồ khi chúng ta có thể xây dựng các trình soạn thảo mã trong trình duyệt ngày nay.
4. Số dòng chỉ CSS
Yếu tố cú pháp động này thực sự rất đơn giản. Nhưng chính vì sự đơn giản này mà nó thực sự xứng đáng có một vị trí trong danh sách này.
Với mã này, bạn có thể tự động thêm số dòng động trong các khối shard của mình. Bạn không cần mã số và chúng sẽ bao bọc bất kể bạn thêm bao nhiêu dòng mã.
Tôi nghĩ rằng điều này có thể hoạt động tốt cho một blog có nhiều đoạn mã ở giữa viết.
Và đó là một trong vài ví dụ ở đây sử dụng nền sáng hơn với văn bản tối hơn.
5. Cú pháp tô sáng cú pháp với các tab
Bạn có muốn thêm chức năng tô sáng cú pháp cùng với Bootstrap không? Sau đó, bạn bắt gặp cây bút hoàn hảo từ nhà phát triển Kijan Maharjan.
Điều này cho phép bạn thêm một tiện ích theo thẻ vào trang có chứa nhiều kiểu khác nhau để làm nổi bật cú pháp.
Chọn màu với thư viện mã được chỉnh sửa và thiết lập toàn bộ bố cục với các chỉnh sửa CSS nhỏ.
6. Bản demo làm nổi bật cú pháp
Đây là một bản demo nổi bật rất thú vị hỗ trợ nhiều ngôn ngữ để lựa chọn.
Mỗi ngôn ngữ có phong cách thiết kế và cách phối màu riêng, nhưng bạn cũng có thể tự chỉnh sửa chúng với một chút CSS.
Bạn sẽ tìm thấy một số tùy chọn đồng nhất trong các đoạn cơ bản hơn như ví dụ JSON được nhúng ở trên. Tuy nhiên, điều này vẫn cung cấp sự đa dạng và thiết kế đủ đơn giản để phù hợp với bất kỳ thiết kế.
7. Bản thử nghiệm Prism.js
Kịch bản Prism.js miễn phí là một trong những giải pháp nguồn mở tốt nhất để làm nổi bật cú pháp. Nó được sử dụng bởi các blog thiết kế lớn như Tạp chí Smashing và có sẵn miễn phí cho mọi trường hợp sử dụng.
Nhưng nếu bạn muốn đi sâu vào Prism mà không cần nhiều mã, bạn có thể nghiên cứu đoạn trích này được tạo bởi Bram de Haan.
Từ mã đó, bạn sẽ tìm thấy một thiết lập rất nhẹ mà bạn có thể sao chép và thay đổi kiểu để phù hợp với trang web của bạn. Sử dụng sọc ngựa vằn và thanh cuộn tùy chỉnh để thực sự nổi bật so với các yếu tố khác trên trang.
8. Trình chỉnh sửa mã CSS thuần túy
Được rồi, vì vậy tên trên đây là một chút sai lệch. Về mặt kỹ thuật, đây không phải là trình chỉnh sửa mã mà bạn có thể sử dụng chỉ chạy trong CSS.
Nhưng mảnh này vẫn cực kỳ ấn tượng.
Nó là một giao diện IDE mã tĩnh được tạo lại chỉ bằng HTML và CSS.
Bạn có thể sẽ không tìm thấy nhiều sử dụng cho một cái gì đó như thế này trên trang web của bạn. Nhưng các kiểu mã có thể truyền cảm hứng cho bạn để sao chép một bố cục tương tự cho các đoạn mã của riêng bạn.
9. Tô màu cú pháp
Siêu đơn giản và siêu cơ bản mô tả đoạn trích này được tạo bởi Michaël Germini.
Nếu bạn muốn tránh tạo cú pháp tô sáng của riêng bạn từ đầu, bút chì này là dành cho bạn. Nó sử dụng một nền trắng sạch với văn bản sáng bóng và là một mẫu khởi động đẹp.
Chỉ cần nhớ rằng đây là siêu cơ bản vì vậy bạn sẽ cần dành một ít thời gian để chỉnh sửa kiểu cho phù hợp với trang web của bạn.
10. Hướng dẫn mã
Trong hướng dẫn mã Jo Dahl miễn phí này, bạn có thể thấy cách các khối tô sáng cú pháp này được sử dụng trong cài đặt trong thế giới thực.
Hướng dẫn sẽ đưa bạn qua HTML và CSS theo bố cục lưới rất sạch sẽ. Các đoạn mã trông tuyệt vời và có một bảng màu để thu hút sự chú ý của bạn mà không gây khó chịu cho trải nghiệm đọc.
Hãy ghi nhớ thiết kế này nếu bạn đang tạo một blog hoặc trang web có các đoạn mã.
