Code block trong bài viết, màu mè hơn cả người yêu cũ của bạn

News Oct 27, 2020

Chào toàn thể anh chị em,
Bài viết này, mình xin giới thiệu và hướng dẫn anh chị em viết bài có nội dung code sao cho màu mè giống các bài viết của mình nhé.

Screenshot-from-2020-10-27-09-31-48

Anh chị em thấy đó, các đoạn code được bôi màu mè khá đẹp mắt phải không nào. Để làm việc đó, anh chị em làm như sau:

  1. Vào phần thiết lập chọn code injection
    setting

b1

  1. Phần Post header {{ghost_head}} thêm nội dụng sau:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/themes/prism.min.css"/>
  1. Phần Post footer {{ghost_foot}} thêm nội dung sau:
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/components/prism-markup-templating.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/components/prism-php.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/components/prism-css.min.js"></script>

chú ý:

Tùy từng ngôn ngữ mà anh chị em có thể thêm import file script với ngôn ngữ tương ứng nhé, ở trên mình đang dùng 2 ngôn ngữ là phpcss nên sẽ import 2 file js của ngôn ngữ đó

  1. Cuối cùng để thêm vào bài viết thì trước thẻ code thêm tên ngôn ngữ là được rồi:

code

kết quả sẽ như này:

<?php
    $a = 1;
    $b = 2;
    $c = $a + $b;
?>

Vậy thôi, chúc anh chị em có những bài viết chất lượng,
Thanks for reading <3

Tags

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.