Chúng tôi vừa cài đặt Prism.js và nó hoạt động.
Trong video màn hình này, chúng tôi tìm thấy một chủ đề có tên là Chủ đề Ngày mai và đưa màu sắc của nó vào tô sáng cú pháp. Chúng tôi tạo một khóa màu nhỏ ở đầu tệp để tham khảo nhanh. Chúng tôi cũng đưa ra một số phỏng đoán về điều gì, ít nhất là để bắt đầu. Những gì chúng tôi kết thúc, màu sắc khôn ngoan, là OK nhưng không ngoạn mục. Nếu bạn duyệt xung quanh trang web ngày hôm nay, bạn sẽ nhận thấy chủ đề màu sắc giống như Chạng vạng, thứ mà tôi từng yêu thích trong TextMate và tôi hiện đang yêu thích trong Sublime Text 2.
Chúng tôi kết thúc bằng cách thêm các thanh tiêu đề vào các đoạn mã. Chúng tôi không có đánh dấu thực sự để làm điều này (có thể là tốt, nó chỉ là một trình trang trí), chúng tôi thêm nó bằng cách sử dụng một phần tử giả và nội dung được tạo thông qua relthuộc tính trên mã. Hầu hết các mã hiện có trên CSS-Tricks đều có thuộc tính này. Nếu không, không phải là một vấn đề lớn. Chúng tôi không thực sự sử dụng reltheo cách chính xác ở đây, nhưng tôi không quá lo lắng về điều đó.
pre(rel):before ( content: attr(rel); )Chúng tôi gặp phải một vấn đề nhỏ khi làm cho phần tử giả đó rộng 100% với phần đệm. Hóa ra khai báo kích thước hộp của chúng tôi trên * selector không ảnh hưởng đến các phần tử giả (loại có ý nghĩa), vì vậy chúng tôi cập nhật Chuẩn hóa của chúng tôi để bao gồm điều đó.