Highlighting Code Block

설명

“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 this page for a detailed description of this plugin.(Japanese article)

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 “CODE BLOCK” should be added to “Settings” in the left menu of the management screen.
Settings related to this plugin are set in this menu.

스크린샷

  • Code Coloring
  • Select 「Highlighing Code Block
  • Select lang (Guternberg)
  • Writing your code (Guternberg)
  • Added select box (Tinymce)
  • Select lang (Tinymce)
  • Writing your code (Tinymce)
  • ex) Light color
  • ex) Dark color
  • Base Setting
  • Higher Setting

블록

이 플러그인은 1(을)를 제공합니다.

  • Highlighing Code Block

설치

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.

FAQ

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

후기

2021년 3월 16일
As a plugin to replace "Crayon Syntax Highlighter", I think this plugin running on Gutenberg is the most powerful and excellent. It is also simple and easy to use.
2020년 5월 13일
Plugin works nicely but is lacking in highlighting for Java, Kotlin, Groovy, XML. You might get away with using the Javascript highlighting for Java, Kotlin and Groovy code and the HTML highlighting for XML code. But in general it seems the languages provided are aimed at front-end and mobile developers. Hope the author adds languages, or makes it easy to add your own.
2020년 3월 14일
I tested all the plugins This is the best thank you bro please support this Until the very last day of WordPress
모든 9 평가 읽기

기여자 & 개발자

“Highlighting Code Block”(은)는 오픈 소스 소프트웨어입니다. 다음의 사람들이 이 플러그인에 기여하였습니다.

기여자

“Highlighting Code Block”(이)가 2(으)로 번역되었습니다. 기여해 주셔서 번역자님께 감사드립니다.

자국어로 “Highlighting Code Block”(을)를 번역하세요.

개발에 관심이 있으십니까?

코드 탐색하기는, SVN 저장소를 확인하시거나, 개발 기록RSS로 구독하세요.

변경이력

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.