Hướng dẫn chèn khung Code CSS vào trong bài viết WordPress

Có đôi lúc khi viết bài và bạn muốn chèn đoạn code vào một khung nhỏ cho dễ nhìn hơn trong website wordpress nhưng trình soạn thảo mặc định của wordpress lại không cho tùy biến insert text dưới dạng code. Vậy phải làm sao để có thể chèn được code trong bài viết.

Bài viết sau của Tuấn Anh Blog sẽ giới thiệu tới quý bạn đọc một plugin Crayon Syntax Highlighter sẽ giúp bạn đáp ứng việc này.

B1: Đầu tiên, chúng ta tải plugin Crayon Syntax Highlighter tại đây
B2: Active plugin và vào mục cài đặt ở Setting > Crayon để tuỳ chỉnh (bạn mang thể để mặc định)
B3: Viết bài mới và trên khung soạn thảo xuất hiện dấu <> bạn click vào ấy. Cửa sổ mới xuất hiện.

khung chèn code

khung code

Bạn chèn 1 đoạn code có sẵn vào Khung rồi nhấn nút Add là xong nhé. Xem demo bên dưới

<div class="centered back"></div>
<div class="centered face"></div>
 
<div class="centered headphones">
  <div class="centered band"></div>
  <div class="earmuff"></div>
  <div class="earmuff"></div>
</div>
 
<div class="centered music">
  <div class="group1">
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
  </div>
  <div class="group2">
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
  </div>
</div>

Hy vọng bài viết sẽ hữu ích cho bạn

Bạn đang xem bài viết Cách chèn khung Code CSS vào trong bài viết WordPress

Add Comment