Khi làm một website hướng dẫn wordpress thì chúng ta thường trích dẫn các đoạn code nhằm giúp người dùng dễ dàng tìm kiếm, sao chép nội dung code dễ dàng hơn. Hôm nay, mình sẽ chia sẻ cách làm highlight code không cần Plugin mà bằng thẻ pre.
Hướng dẫn Highlight text không cần plugin trong WordPress
Plugin thì rất tiện dụng nhưng nếu lạm dụng quá nhiều plugin sẽ khiến trang web của bạn trở nên nặng nề và bên cạnh đó là tăng nguy cơ dính lỗi bảo mật liên quan đến các plugin.
Để làm điều đó thì mình sẽ chia làm 2 bước chính cho các bạn dễ hình dung:
Định dạng pre text trong bài viết WordPress
WordPress có hỗ trợ một tính năng định dạng văn bản trong bài viết cho phép đoạn văn bản đó có cách trình bày khác biệt so với các phần còn lại của nội dung bài viết, đó là định dạng Preformatted.
Để định dạng cho một đoạn nào đó trong bài viết thành pre (Preformatted) thì bạn chỉ cần chọn đoạn văn bản đó (tương tự như khi bạn chọn trong office vậy) và chọn định dạng pre như trong hình dưới.
Nếu bạn để ý thì đoạn văn bản sau khi được định dạng pre thì kiểu chữ trông sẽ khác so với phần còn lại của văn bản, ngay khi bạn đang soạn thảo bài viết.
Sau khi định dạng pre cho đoạn văn bản xong chúng ta xem trông nó như thế nào, hình dưới mình thực hiện định dạng pre cho 2 dòng demo và khi xem kết quả hiển thị thì bạn có thể thấy 2 dòng đó có kiểu chữ khác, được đặt trong 1 ô hình chữ nhật có nền đậm hơn một chút.
Nếu bạn chỉ để như trong hình trên thì kết quả chưa được đẹp và nổi bật lắm, giờ chúng ta sẽ css cho nó đẹp hơn.
CSS cho pre text
Trước khi bạn muốn thêm các CSS cho định dạng pre text để làm nổi bật đoạn văn bản đó lên thì bạn cần tìm cho được hàm hoặc class liên quan để định dạng pre.
Như hình trên bạn có thể thấy đoạn text nằm trong thẻ <pre> và css tương ứng là:
pre {
line-height: 1.2632;
}
Bây giờ bạn sửa đoạn CSS thành như sau:
pre {
background: none;
border: 1px solid #ddd;
background-color: #051e30;
border-color: #289ff4;
border-radius: 6px;
border-style: solid;
border-width: 1px 1px 1px 4px;
font-family: "Courier 10 Pitch",Courier,monospace;
line-height: 19px;
margin: 30px 0px;
overflow-x: auto;
overflow-y: hidden;
padding: 10px 10px 10px 18px;
word-wrap: break-word;
color: #fff;
font-size: 13px;
white-space: pre;
}
Các bạn vào file style.css của theme và sửa nhé. Mình khuyến khích các bạn tạo Child Theme và chỉ cần dán code trên vào style.css của child theme là xong.
Đoạn CSS này mình đang sử dụng cho trang web của mình hiện tại và lấy làm ví dụ, còn nếu bạn muốn nó trông khác đi thì có thể tự mình CSS lại.
Với định dạng pre có sẵn trong WordPress cộng thêm một chút kiến thức về CSS thì bạn hoàn toàn có thể trang trí trang web của bạn trở nên đẹp đẽ mà không cần thêm các plugin nặng nề nữa đúng không nào?
