Title: Highlighting Code Block
Author: LOOS
Published: <strong>12 Tháng 12, 2018</strong>
Last modified: 1 Tháng 7, 2026

---

Tìm kiếm plugin

![](https://ps.w.org/highlighting-code-block/assets/banner-772x250.png?rev=2432522)

![](https://ps.w.org/highlighting-code-block/assets/icon-256x256.png?rev=2432522)

# Highlighting Code Block

 Bởi [LOOS](https://profiles.wordpress.org/looswebstudio/)

[Tải về](https://downloads.wordpress.org/plugin/highlighting-code-block.2.2.1.zip)

 * [Chi tiết](https://vi.wordpress.org/plugins/highlighting-code-block/#description)
 * [Đánh giá](https://vi.wordpress.org/plugins/highlighting-code-block/#reviews)
 *  [Cài đặt](https://vi.wordpress.org/plugins/highlighting-code-block/#installation)
 * [Nhà phát triển](https://vi.wordpress.org/plugins/highlighting-code-block/#developers)

 [Hỗ trợ](https://wordpress.org/support/plugin/highlighting-code-block/)

## Mô tả

“Highlighting Code Block” allows you to add a syntax-highlighted code block with
just a click.

It supports both “Block Editor” and “Classic Editor”.
 (However, we recommend using
it in the “Block Editor”.)

Please see the following page for a detailed explanation of this plugin.

URL: [https://loos.co.jp/en/documents/highlighting-code-block/](https://loos.co.jp/en/documents/highlighting-code-block/)

### Source code

The source code of this plugin is available on Github.

URL: [https://github.com/ddryo/Highlighting-Code-Block](https://github.com/ddryo/Highlighting-Code-Block)

### How to use

#### How to use （For Block Editor）

 * Open the “Formatting” category of the Block Inserter.
 * There is a custom block named “Highlighing Code Block”.
 * Select it, the block will be inserted.
 * Select the language of the code and enter any code.

#### How to use （For Classic Editor）

 * You should see a select box labeled “Code Block” on the toolbar (2nd row by default).
 * When you select a language from the select box, a code block (pre tag) is inserted.

#### If it doesn’t work

This plugin works only with PHP version 5.6 or later, WordPress 5.6 or later.
 Please
check your PHP version or WordPress version.

#### About settings

The menu “[HCB] Settings” should be added to “Settings” in the left menu of the 
management screen.
 Settings related to this plugin are set in this menu.

## Ảnh màn hình

[⌊Code Coloring⌉⌊Code Coloring⌉[

Code Coloring

[⌊Select 「Highlighing Code Block⌉⌊Select 「Highlighing Code Block⌉[

Select 「Highlighing Code Block

[⌊Select lang (Guternberg)⌉⌊Select lang (Guternberg)⌉[

Select lang (Guternberg)

[⌊Writing your code (Guternberg)⌉⌊Writing your code (Guternberg)⌉[

Writing your code (Guternberg)

[⌊Added select box (Tinymce)⌉⌊Added select box (Tinymce)⌉[

Added select box (Tinymce)

[⌊Select lang (Tinymce)⌉⌊Select lang (Tinymce)⌉[

Select lang (Tinymce)

[⌊Writing your code (Tinymce)⌉⌊Writing your code (Tinymce)⌉[

Writing your code (Tinymce)

[⌊ex) Light color⌉⌊ex) Light color⌉[

ex) Light color

[⌊ex) Dark color⌉⌊ex) Dark color⌉[

ex) Dark color

[⌊Base Setting⌉⌊Base Setting⌉[

Base Setting

[⌊Higher Setting⌉⌊Higher Setting⌉[

Higher Setting

## Khối

Plugin này cung cấp 1 khối.

 *   Highlighing Code Block

## Cài đặt

This plugin can be installed directly from your site.

 1. Log in and navigate to “Plugins”  “Add New”.
 2. Type “Highlighting Code Block” in the search field and press Enter.
 3. Locate the plugin in the list of search results and click “Install Now”.
 4. Once installed, click the “Activate” button.

## Hỏi đáp

### Available languages

The following languages are available by default.

 * HTML
 * CSS
 * SCSS
 * JavaScript
 * TypeScript
 * PHP
 * Ruby
 * Python
 * Swift
 * C
 * C#
 * C++
 * Objective-C
 * SQL
 * JSON
 * Bash
 * Git

## Đánh giá

![](https://secure.gravatar.com/avatar/bbdf310142e4523583701a048b98b0ca190e9faa6d39f4cf21c0dff73c31e87e?
s=60&d=retro&r=g)

### 󠀁[站点爆炸](https://wordpress.org/support/topic/%e7%ab%99%e7%82%b9%e7%88%86%e7%82%b8/)󠁿

 [liuliu66](https://profiles.wordpress.org/liuliu66/) 14 Tháng 4, 2024

在寻求关于此问题的帮助时，您可能需要提供以下信息：WordPress 版本 6.5.2目前启用的
主题：Vikinger – BuddyPress Social Community（1.9.9.4.2 版本）当前插件：Highlighting
Code Block（版本 2.0.1）PHP 版本 8.1.27 错误详情============错误类型 E_ERROR 发生
在文件 /www/wwwroot/1.14.58.204/wp-content/plugins/highlighting-code-block/class/
loos_hcb_menu.php 的 140 行。错误信息：Uncaught ValueError: Unknown format specifier“
�” in /www/wwwroot/1.14.58.204/wp-content/plugins/highlighting-code-block/class/
loos_hcb_menu.php:140Stack trace:#0 /www/wwwroot/1.14.58.204/wp-content/plugins/
highlighting-code-block/class/loos_hcb_menu.php(140): sprintf()#1 /www/wwwroot/1.14.58.204/
wp-includes/class-wp-hook.php(324): {closure}()#2 /www/wwwroot/1.14.58.204/wp-includes/
class-wp-hook.php(348): WP_Hook->apply_filters()#3 /www/wwwroot/1.14.58.204/wp-includes/
plugin.php(517): WP_Hook->do_action()#4 /www/wwwroot/1.14.58.204/wp-admin/admin.
php(175): do_action()#5 /www/wwwroot/1.14.58.204/wp-admin/plugins.php(10): require_once(‘…’)#
6 {main}thrown

![](https://secure.gravatar.com/avatar/f85989dc34b218af0380bd6e7f25fe2ddae526cdcbe99653801a8c2fbedf724e?
s=60&d=retro&r=g)

### 󠀁[very nice](https://wordpress.org/support/topic/veey-nice/)󠁿

 [sazone](https://profiles.wordpress.org/sazone/) 19 Tháng 3, 2024

read code easily

![](https://secure.gravatar.com/avatar/c6f2d8a321247d15872a2516f44f276f425f9a21498cb132807d674b17c71308?
s=60&d=retro&r=g)

### 󠀁[Good Job!](https://wordpress.org/support/topic/good-job-1763/)󠁿

 [ishere](https://profiles.wordpress.org/ishere/) 17 Tháng 12, 2023

Very thanks!

![](https://secure.gravatar.com/avatar/134d72580c6ecd9f2f4b36bc69a5a9c17dbb3530c022a3523bacf6a55a521cf4?
s=60&d=retro&r=g)

### 󠀁[No support for Android syntax](https://wordpress.org/support/topic/no-support-for-android-syntax/)󠁿

 [Rouzbeh Zarei](https://profiles.wordpress.org/iamrouzbehzarei/) 4 Tháng 11, 2023
1 trả lời

Unfortunately, the plugin doesn’t support Java, Kotlin, Flutter nor XML syntax, 
making it completely useless for anyone in the Android development field.

![](https://secure.gravatar.com/avatar/77530765f24709bda5ef811b35543551e5ba4ae435bf00a38da74d3aeacd29b2?
s=60&d=retro&r=g)

### 󠀁[A+ Once I figured out the BLOCKS part!](https://wordpress.org/support/topic/a-once-i-figured-out-the-blocks-part/)󠁿

 [Anonymous User 20287723](https://profiles.wordpress.org/anonymized-20287723/) 
25 Tháng 7, 2023

I don’t normally use WP Blocks and so I could not figure out why this plugin broke
for certain code syntax (PHP -> HTML -> PHP for example) and why saving sometimes
broke the previously-saved syntax. Maddening. Then I switched back to the block 
editor. AHA! It works beautifully. That’s probably why it says “Block” in the plugin
name, duh. Thank you very much for this wonderful plugin. I love that we can also
upload our own prism.js files. Cool.

![](https://secure.gravatar.com/avatar/82d9afeba3f9fbb7039b6ae795c8871d8d23618399edff6b42cf5ba880039c2d?
s=60&d=retro&r=g)

### 󠀁[Thank you!](https://wordpress.org/support/topic/thank-you-3312/)󠁿

 [Muhammad Zohaib](https://profiles.wordpress.org/fangsword/) 3 Tháng 3, 2023

Exactly what I was looking for. thanks alot!

 [ Đọc tất cả 22 đánh giá ](https://wordpress.org/support/plugin/highlighting-code-block/reviews/)

## Người đóng góp & Lập trình viên

“Highlighting Code Block” là mã nguồn mở. Những người sau đã đóng góp vào plugin
này.

Những người đóng góp

 *   [ LOOS ](https://profiles.wordpress.org/looswebstudio/)

“Highlighting Code Block” đã được dịch qua 5 ngôn ngữ. Cảm ơn [những người tham gia dịch](https://translate.wordpress.org/projects/wp-plugins/highlighting-code-block/contributors)
vì đóng góp của họ.

[Dịch “Highlighting Code Block” sang ngôn ngữ của bạn.](https://translate.wordpress.org/projects/wp-plugins/highlighting-code-block)

### Muốn tham gia phát triển?

[Duyệt code](https://plugins.trac.wordpress.org/browser/highlighting-code-block/),
check out [SVN repository](https://plugins.svn.wordpress.org/highlighting-code-block/),
hoặc theo dõi [nhật ký phát triển](https://plugins.trac.wordpress.org/log/highlighting-code-block/)
qua [RSS](https://plugins.trac.wordpress.org/log/highlighting-code-block/?limit=100&mode=stop_on_copy&format=rss).

## Nhật ký thay đổi

#### 2.2.1

 * Security: Fixed a stored XSS vulnerability via the plugin settings.

#### 2.2.0

 * Support for WordPress 7.0.

#### 2.1.3

 * Fixed an issue where there was a discrepancy in the structure of the build files.

#### 2.1.2

 * Support for WordPress 6.9.

#### 2.1.1

 * Support for WordPress 6.8.

#### 2.1.0

 * Support for WordPress 6.7.

#### 2.0.1

 * Some text of setting items has been changed.

#### 2.0.0

 * Support for WordPress 6.4.
 * Support for PHP 8.2.
 * The CSS and Block UI have been significantly adjusted.
 * CSS custom properties have also been renamed and cleaned up overall.
 * Added `data-start` attribute settings to blocks.

#### 1.7.0

 * Support for WordPress 6.2.
 * The style loading process has been fine-tuned.
 * Added aria-label to the Copy Code button.

#### 1.6.1

 * Support for WordPress 6.1.

#### 1.6.0

 * Support for WordPress 6.0.

#### 1.5.5

 * Fixed the version number.

#### 1.5.4

#### 1.5.3

 * Fixed a bug.

#### 1.5.2

 * Fixed the problem of misaligned lines in some themes.

#### 1.5.1

 * Fixed a bug.

#### 1.5.0

 * Support for WordPress 5.9.
 * Refactored the CSS.

#### 1.4.1

 * Fixed a bug where changing the settings in the languages list did not change 
   the choices in the block.

#### 1.4.0

 * Fixed a bug that amplified the class of the block.
 * Fixed a bug that caused clipboard.js to be loaded even when it was not needed.

#### 1.3.0

 * Support for WordPress 5.8.
 * Required WordPress version raised to 5.6.

#### 1.2.9

 * Fixed a bug that the number of lines is not displayed.

#### 1.2.8

 * Support for WordPress 5.7.
 * Fixed spelling mistakes. (“plane” to “plain”)
 * Code fixes.

#### 1.2.7

 * Added copy button function.
 * Code refactoring.
 * Support for WordPress 5.6.

#### 1.2.6

Fixed file icon 404 error.

#### 1.2.5

 * Made the code lighter.
 * Changed handle name of CSS and JS.

#### 1.2.4

Fixed register block.

#### 1.2.3

Fixed block.json file.

#### 1.2.2

 * Adjustments for registering “block libraries”.
 * Abolished the block width adjustment function.
 * Abolished the ability to remove “br” tag from the “code” tag.

#### 1.2.1

Change the code to register the script.

#### 1.2.0

 * Fixed a bug that CSS cannot be read depending on the server.
 * It is now possible to set whether to display the language name for each block.
 * Even if the language name is set to hidden, it will be displayed if the file 
   name is entered.
 * You can now preview the display of language names and file names in the block
   editor.

#### 1.1.0

Fixed translation file.

#### 1.0.9

Fixed translation file.

#### 1.0.8

English is supported.

#### 1.0.7

 * Compatible with WordPress5.3.
 * Deleted the left and right margins of the HCB code block, and left it to the 
   theme.
 * Enabled conversion with core “source code block”.

#### 1.0.6

 * Compress CSS file to read.
 * Changed to load some CSS with style tag in head.
 * Fixed a bug that font family settings were not reflected.
 * Code cleanup for CSS and JS

#### 1.0.5

 * Move reading script to wp_footer.
 * Changed HCB block logo.
 * You can now set font-family for code blocks.

#### 1.0.4

 * Support for WordPress 5.2.1
 * Changed font-family of code block.
 * The file name can be set to the code block.

#### 1.0.3

Support for WordPress 5.1.1

#### 1.0.2

Change readme.txt

#### 1.0.1

Comment delete.

#### 1.0

Initial release.

## Meta

 *  Phiên bản **2.2.1**
 *  Cập nhật lần cuối **7 giờ trước**
 *  Số lượt cài đặt **10.000+**
 *  Phiên bản WordPress ** 5.6 hoặc cao hơn **
 *  Đã kiểm tra lên đến **7.0**
 *  Phiên bản PHP ** 5.6 hoặc cao hơn **
 *  Ngôn ngữ
 * [Dutch](https://nl.wordpress.org/plugins/highlighting-code-block/), [English (US)](https://wordpress.org/plugins/highlighting-code-block/),
   [French (France)](https://fr.wordpress.org/plugins/highlighting-code-block/),
   [Greek](https://el.wordpress.org/plugins/highlighting-code-block/), [Japanese](https://ja.wordpress.org/plugins/highlighting-code-block/),
   và [Persian](https://fa.wordpress.org/plugins/highlighting-code-block/).
 *  [Dịch sang ngôn ngữ của bạn](https://translate.wordpress.org/projects/wp-plugins/highlighting-code-block)
 * Thẻ
 * [code](https://vi.wordpress.org/plugins/tags/code/)[code block](https://vi.wordpress.org/plugins/tags/code-block/)
   [gutenberg](https://vi.wordpress.org/plugins/tags/gutenberg/)[Highlight](https://vi.wordpress.org/plugins/tags/highlight/)
   [syntax highlighting](https://vi.wordpress.org/plugins/tags/syntax-highlighting/)
 *  [Nâng cao](https://vi.wordpress.org/plugins/highlighting-code-block/advanced/)

## Đánh giá

 4.5 trên 5 sao.

 *  [  16 5-star reviews     ](https://wordpress.org/support/plugin/highlighting-code-block/reviews/?filter=5)
 *  [  0 4-star reviews     ](https://wordpress.org/support/plugin/highlighting-code-block/reviews/?filter=4)
 *  [  0 3-star reviews     ](https://wordpress.org/support/plugin/highlighting-code-block/reviews/?filter=3)
 *  [  2 2-star reviews     ](https://wordpress.org/support/plugin/highlighting-code-block/reviews/?filter=2)
 *  [  1 1-star review     ](https://wordpress.org/support/plugin/highlighting-code-block/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/highlighting-code-block/reviews/#new-post)

[Xem tất cả đánh giá](https://wordpress.org/support/plugin/highlighting-code-block/reviews/)

## Những người đóng góp

 *   [ LOOS ](https://profiles.wordpress.org/looswebstudio/)

## Hỗ trợ

Có điều gì muốn nói? cần giúp đỡ?

 [Xem diễn đàn hỗ trợ](https://wordpress.org/support/plugin/highlighting-code-block/)