Chèn khung Google Code Prettify cho WordPress

0
478

Đã khi nào bạn chia sẻ code hay một đoạn mã nguồn nào đó trên WordPress chưa? Mình thì hay chia sẻ lắm, nhưng khi chia sẻ thì phải trình bày sao cho đẹp mới được. Vì vậy, cặm cụi mò mẫm hết bao nhiêu Plugin nhưng cuối cùng mình lại phát hiện ra được Javascript Google Code Prettify này và áp dụng luôn cho blog.

Google Code Prettify là gì?

Là một đoạn script nhúng vào website để làm code và mã nguồn nổi bật hơn. Dung lượng nhỏ không cản trở trang load. Có thể custom thoải mái bằng CSS, đặc biệt có sẵn một thư viện skin.

Cài đặt vào blog WordPress

Chèn script sau ở phần footer cho nhẹ khi load website nhé, chèn vào trước thẻ </body> trong mã nguồn HTML của WordPress của bạn:

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert"></script>

Đấy! cái khung mình chia sẻ cái script với màu sắc nó nổi bật lên nhìn đẹp mắt hơn nhiều. Ở trong một số theme thì có hỗ trợ sẵn để ta dán vào, nhưng một số theme không có chỗ dán hãy sử dụng plugin Insert Headers and Footers nhé. Nói chung chỉ cần làm sao bạn dán đoạn script trước thẻ </body> trong mã nguồn HTML của WordPress.

Có một chút lưu ý, đoạn script trên mình đã lựa skin Desert, nếu bạn muốn thay skin khác thì vào thư viện skin xem tên skin mình muốn và sửa ở sau ?skin= tên skin bạn muốn.

Cách sử dụng trên bài viết

Viết nội dung cần chia sẻ ở thẻ <pre>. Nếu ở giao diện Trực quan thì chọn nội dung ở định dạng Được định dạng trước.

Chọn định dạng Được định dạng trước (preformatted)

Sau đó chuyển qua giao diện Văn bản (Text).

Chuyển qua giao diện chỉnh sửa Văn bản

Lúc này nội dung code hay mã nguồn bạn cần chia sẻ sẽ nằm trong thẻ <pre>. Thêm vào thẻ pre class prettyprint như dạng sau:

<pre class="prettyprint">Nội dung code hoặc mã nguồn muốn chia sẻ</pre>

Vậy là xong, hãy lưu và xem thử bài viết xem nào!
Hi vọng bài viết hữu ích với các bạn!

Để lại bình luận

avatar

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.