Chèn code trong bài viết wordpress bằng Plugin Enlighter – Customizable Syntax Highlighter

Plugin Enlighter – Customizable Syntax Highlighter

Enlighter là một plugin tuyệt vời khác để hiển thị mã đẹp xuất hiện trong trang web WordPress của bạn. Đây là công cụ đánh dấu cú pháp dễ sử dụng và tùy biến cho WordPress mà bạn có thể dễ dàng liên kết mã của bạn với shortcode. Một Theme-Customizer với chế độ xem trước trực tiếp được bao gồm để sửa đổi các chủ đề được xây dựng trong. Tính năng mở rộng cũng hỗ trợ tạo tự động các tab-tab để hiển thị các nhóm mã với nhau như html + css + js.

Tính năng nổi bật

  • Inline Syntax Highlighting
  • Đánh dấu các khối mã có rào chắn
  • Mã ngắn trong nội dung, nhận xét và tiện ích con
  • Dễ sử dụng chế độ soạn thảo văn bản thông qua việc sử dụng Shortcodes và QuickTags
  • Tùy chọn cấu hình nâng cao (sử dụng CDN, ..) có sẵn trong trang tùy chọn.
  • Hỗ trợ các nhóm mã (hiển thị nhiều khối mã trong một ngăn tab)
  • Công cụ chủ đề và ngôn ngữ có thể mở rộng – thêm công cụ của riêng bạn.
  • Bộ xử lý mã vạch độc lập để tránh các vấn đề bộ lọc wpautop trong chế độ soạn thảo văn bản
  • Webfont Loader để thêm các Font chữ Monospace còn thiếu vào trang web của bạn

Hướng dẫn cài đặt

  • Bước 1: Vào Plugin -> Cài mới nhập vào ô tìm kiếm là Customizable Syntax Highlighter – rồi click Cài đặt & Kích hoạt
plugin-chen-code-trong-bai-viet-wordpress-antrandigital
  • Bước 2: Vào Tạo bài viết, chọn vào biểu tượng giống trong hình
plugin-chen-code-trong-bai-viet-wordpress-antrandigital-2
  • Bước 3: Tiếp theo là chỉ việc để phần Code trong khung -> Nhấn OK
plugin-chen-code-trong-bai-viet-wordpress-antrandigital-3

Kết quả:

# Enlighter

// define the activated_plugin callback 
function action_activated_plugin( $plugin, $network_wide ) { 
    // make action magic happen here... 
}; 
         
// add the action 
add_action( 'activated_plugin', 'action_activated_plugin', 10, 2 );

# Godzilla

// define the activated_plugin callback 
function action_activated_plugin( $plugin, $network_wide ) { 
    // make action magic happen here... 
}; 
         
// add the action 
add_action( 'activated_plugin', 'action_activated_plugin', 10, 2 );

# Beyond

// define the activated_plugin callback 
function action_activated_plugin( $plugin, $network_wide ) { 
    // make action magic happen here... 
}; 
         
// add the action 
add_action( 'activated_plugin', 'action_activated_plugin', 10, 2 );

# Classic

// define the activated_plugin callback 
function action_activated_plugin( $plugin, $network_wide ) { 
    // make action magic happen here... 
}; 
         
// add the action 
add_action( 'activated_plugin', 'action_activated_plugin', 10, 2 );

# MowTwo

// define the activated_plugin callback 
function action_activated_plugin( $plugin, $network_wide ) { 
    // make action magic happen here... 
}; 
         
// add the action 
add_action( 'activated_plugin', 'action_activated_plugin', 10, 2 );

# Eclipse

// define the activated_plugin callback 
function action_activated_plugin( $plugin, $network_wide ) { 
    // make action magic happen here... 
}; 
         
// add the action 
add_action( 'activated_plugin', 'action_activated_plugin', 10, 2 );

# Droide

// define the activated_plugin callback 
function action_activated_plugin( $plugin, $network_wide ) { 
    // make action magic happen here... 
}; 
         
// add the action 
add_action( 'activated_plugin', 'action_activated_plugin', 10, 2 );

# Minimal

// define the activated_plugin callback 
function action_activated_plugin( $plugin, $network_wide ) { 
    // make action magic happen here... 
}; 
         
// add the action 
add_action( 'activated_plugin', 'action_activated_plugin', 10, 2 );

# Atomic

// define the activated_plugin callback 
function action_activated_plugin( $plugin, $network_wide ) { 
    // make action magic happen here... 
}; 
         
// add the action 
add_action( 'activated_plugin', 'action_activated_plugin', 10, 2 );

# Rowhammer

// define the activated_plugin callback 
function action_activated_plugin( $plugin, $network_wide ) { 
    // make action magic happen here... 
}; 
         
// add the action 
add_action( 'activated_plugin', 'action_activated_plugin', 10, 2 );

# Bootstrap4

// define the activated_plugin callback 
function action_activated_plugin( $plugin, $network_wide ) { 
    // make action magic happen here... 
}; 
         
// add the action 
add_action( 'activated_plugin', 'action_activated_plugin', 10, 2 );

# Dracula

// define the activated_plugin callback 
function action_activated_plugin( $plugin, $network_wide ) { 
    // make action magic happen here... 
}; 
         
// add the action 
add_action( 'activated_plugin', 'action_activated_plugin', 10, 2 );

# Monokai

// define the activated_plugin callback 
function action_activated_plugin( $plugin, $network_wide ) { 
    // make action magic happen here... 
}; 
         
// add the action 
add_action( 'activated_plugin', 'action_activated_plugin', 10, 2 );

# Generic Highlighting

// define the activated_plugin callback 
function action_activated_plugin( $plugin, $network_wide ) { 
    // make action magic happen here... 
}; 
         
// add the action 
add_action( 'activated_plugin', 'action_activated_plugin', 10, 2 );

Ngoài ra các bạn có thể tuỳ chỉnh giao diện khung chứa code.

Các bạn vào Enlighter -> Appearance. Ngay mục Theme click chuột vào để cho hiện list cho chọn theme mà bạn ưng ý nhất.

Chúc mọi người thành công !!!

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *