Horje
Code Syntax Block plugin extends the Gutenberg Block Editor by adding syntax highlighting to the core code block.

Noted That:

  • To install correctly this code-syntax-block.zip.
  • Fisrt Download the code-syntax-block.zip to your computer
  • Extract/Open code-syntax-block.zip to Your Computer.
  • Then, Find readme.txt file inside code-syntax-block.zip and Open readme.txt.
  • Now, Read the Requirements of this plugin. Which Wordpress Version and PHP Version are required to run this Plugin in Your Wordpress Site.
  • Then, Follow the Tips Below.

Start the Tips:

1. First Download "code-syntax-block.zip" Plugin to your Local Computer. (Click Download)

2. Then, Login to your "yourdomain.com/wp-admin" Dashboard.

/stack/wp/e1593231376d7d849d2-4597-4fa3-a6ff-1eca18f72aab.png

3. Then, Click on "Plugins" + "Add New" from left sidemenu of Dashboard.

/stack/wp/e1593231378Screenshot20.png

4. Now, Click on "Upload Plugin" button.

/stack/wp/e1593231380Screenshot-2019-4-2AddPluginsHorjeWordPress.png

 

5. Now, Browse "code-syntax-block.zip" Downloaded plugin from your computer, Where you downloaded code-syntax-block.zip According to Step – 1 Above then, click on "Install Now"

/stack/wp/e15931461531577025694plugin.png

6. Now, Click on "Active Plugin"

/stack/wp/e15932313830ca45529-bf73-4101-8178-53ae60ce549f.png

7. Then, See left sidemenu. "Code Syntax Block" folder is added on left sidemenu. Now, Click on "Code Syntax Block" folder.

   Noted that: If you do not see "Code Syntax Block" folder on left sidemenu then, see at left sidemenu "Settings" or "Tools".

8. Now you configure yourself oR Watch video tutorial below about Code Syntax Block Configurtions and Settings or How to work "Code Syntax Block" in your WordPress site.

 

oR

After Activated Plugin According to Step-6 then,

  1. Go to "Plugins" + "Installed Plugin" from Wordpress Admin Panel Leftside Menu.
  2. or Direct go to: https://yourdomain/wp-admin/plugins.php
  3. Then, Find "Code Syntax Block" Activated Plugin from Plugin List.
  4. Then, Click on "Settings" from Plugin that is Code Syntax Block
  5. Now, Edit/Add/Config the setting and Click on "Save Changes" button,
WP Plugin Setting



Guide

After installing and activating the plugin, use in the Block Editor by creating a standard code block and selecting a language format.

When creating a new code block, select Code block, and then in the Inspector (Block Controls on the Right) select the language for the code. The code will not change within the editor, but you’ll see a small label with the selected language.

On the front-end when the post is being viewed, the code will be color syntax highlighted.


block, code, syntax, highlighting, core, adding, extends, plugin, gutenberg, editor,

Name

Reffered: https://wordpress.org/