# 027: Đánh dấu cú pháp mã, Phần 1 - Thủ thuật CSS

Anonim

Theo những gì tôi có thể nhớ, tôi đã sử dụng Google Code Prettify để áp dụng tô sáng cú pháp trên khối mã trên CSS-Tricks. Bạn biết đấy, ở đâu trong một dòng giống như test , phần đó có màu khác với testphần đó. Điều này rất hữu ích cho khả năng đọc mã. Nó cũng giúp người đọc hiểu ngay những gì họ đang nhìn là một khối mã (mọi người thích quét các bài báo, bạn có biết không).

Trong thiết kế mới này, chúng tôi quyết định sử dụng Prism.js mới được phát hành. Nó nhẹ hơn một chút và nhanh hơn. Nó cũng được điều chỉnh để chỉ hoạt động với HTML, CSS và JavaScript, là 95% mã trên CSS-Tricks. Tôi cũng khá thích cách đặt tên hợp lý cho các lớp dùng để tô màu.

Chúng tôi bắt đầu tìm ra cách chính xác để sử dụng nó. Trước hết, chúng tôi yêu cầu CodeKit nối thư viện này vào tệp JavaScript toàn cầu của chúng tôi (tệp này trống cho đến nay, nhưng chúng tôi sẽ viết mã ở đó sau). Chúng tôi liên kết tệp JavaScript đã nén trong phần chân trang được bao gồm của chúng tôi.

Chúng tôi phải mất một phút để hiểu rằng không có bất cứ thứ gì bạn “gọi”, nó chỉ hoạt động nếu bạn đặt đúng tên lớp. Chúng tôi kết thúc bằng cách chơi với CSS một chút và làm cho mã trông giống như nó luôn có trên CSS-Tricks.