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 rằng 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ó các phầ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 các phần mã vào trang đích của mình, bạn sẽ thích các giải pháp chiếu sáng mã CSS và JS này.
Nếu bạn đang tìm kiếm các cú pháp đánh dấu-plugin cho WordPress, hãy xem bài viết này.
1. Hộp mã nguồn góc cạnh
Đây là một đoạn trích thú vị đượ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 tìm thấy trong các 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, mọi thứ được xử lý bằng CSS để tạo kiểu.
Điều này sẽ làm giảm các yêu cầu nhúng HTTP, cho phép bạn kiểm soát nhiều hơn 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à cái này sử dụng thư viện chiếu sáng góc để tương thích cú pháp trong hàng tá ngôn ngữ.
2)
Estilo de etiqueta
Dưới đâ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 và chia sẻ các đoạn mã lớn.
Dự án thiết kế mã này hoạt động với hai chức năng: một thanh dọc bên trái có 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 bạn 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ế 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 phải nhập mã ở đâu đó. Một vùng văn bản là yếu tố hoàn hảo để xử lý nó.
Nhưng với đoạn trích này, bạn sẽ tìm thấy một vùng văn bản tùy chỉnh với lựa chọn cùng với các tab tùy chỉnh và một tính năng toàn màn hình. Chưa kể rằng tất cả điều 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.
Mã này cho phép bạn tự động thêm số dòng động vào các khối mối nối. Bạn không cần phải mã hóa các số và chúng sẽ được nhập 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 khi viết.
Và đó là một trong số ít ví dụ ở đây sử dụng nền sáng hơn với văn bản tối hơn.
5. Lựa chọn cú pháp Bootstrap với các tab
Bạn có muốn thêm một tính năng tô sáng cú pháp 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à định cấu hình toàn bộ bố cục với các chỉnh sửa CSS nhỏ.
6. Bản demo lựa chọn cú pháp
Dưới đây là một bản demo trình diễn 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ố lựa chọn thay thế đồng nhất trong các đoạn trích cơ bản hơn, chẳng 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 tất cả các trường hợp sử dụng.
Nhưng nếu bạn muốn đi sâu vào lăng kính 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 cài đặt rất dễ dàng 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 của điều này là một chút sai lệch. Về mặt kỹ thuật, nó không phải là trình soạn thảo 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 giao diện 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ì đó tương tự 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. cú pháp tô màu
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 đánh dấu của riêng bạn từ đầu, cây bút 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 trống và là một mẫu bắt đầu tốt đẹp.
Chỉ cần nhớ rằng nó là như vậy siêu cơ bản vì vậy bạn phải dành một chút thời gian để chỉnh sửa phong cách cho phù hợp với trang web của bạn.
10. Hướng dẫn mã
Trong Trình hướng dẫn mã Jo Dahl miễn phí này, bạn có thể thấy cách các khối chiếu sáng cú pháp này được sử dụng trong môi trường 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 mảnh 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 xem xét thiết kế này nếu bạn đang tạo một blog hoặc trang web có chứa các đoạn mã.
