{"id":4628,"date":"2026-01-21T07:41:21","date_gmt":"2026-01-21T07:41:21","guid":{"rendered":"https:\/\/thedigitalsagency.com\/services\/digital-downloadable\/introducing-the-enhanced-code-block-syntax-highlighting-and-more\/"},"modified":"2026-01-21T07:41:22","modified_gmt":"2026-01-21T07:41:22","slug":"introducing-the-enhanced-code-block-syntax-highlighting-and-extra","status":"publish","type":"post","link":"https:\/\/thedigitalsagency.com\/services\/digital-downloadable\/introducing-the-enhanced-code-block-syntax-highlighting-and-extra\/","title":{"rendered":"Introducing the Enhanced Code Block: Syntax Highlighting and Extra"},"content":{"rendered":"
<\/p>\n
\n
Closing yr, WordPress.com presented new code editors for the block editor and the Further CSS enter field within the WordPress admin. This was once the primary level of a bigger effort to make enhancing code a extra stress-free revel in.<\/p>\n
These days, I\u2019m satisfied to announce the release of the second one level of that effort: introducing the brand new and advanced Code block<\/strong>.<\/p>\n
This isn’t a brand new block. It\u2019s an enhancement to the present Code block that you just\u2019ve most likely already been the usage of, which incorporates a number of enhancements over the unique:<\/p>\n
\n
Syntax highlighting:<\/strong> Helps color-based syntax highlighting for over 100 not unusual languages.<\/li>\n
Configuration:<\/strong> Make a decision to turn the filename, language identify, line numbers, or even come with a replica button for guests.<\/li>\n
Drag-and-drop:<\/strong> Dragging a code report out of your laptop to the editor will mechanically turn out to be it to the Code block with the language set.<\/li>\n
Transforms:<\/strong> Change into different code-supported blocks on WordPress.com, equivalent to Syntax Highlighter, to the brand new Code block.<\/li>\n
Kinds:<\/strong> Customise syntax colours immediately from the editor or by way of \u2018theme.json\u2019 for those who\u2019re a developer.<\/li>\n<\/ul>\n
The use of the improved Code block<\/h2>\n
You shouldn’t have to allow anything else to start the usage of the brand new model of the Code block. It\u2019s already to be had to make use of. Simply insert the Code block any place within the block editor and upload your code.<\/p>\n
By way of default, when including a Code block and putting code, you’re going to see your code in Simple Textual content:<\/p>\n<\/figure>\n
After all, Simple Textual content doesn\u2019t come with any syntax highlighting because it\u2019s no longer a language. To modify this, make a choice a code language from the Settings \u2192 Language<\/strong> dropdown within the sidebar:<\/p>\n<\/figure>\n
Syntax highlighting will then be carried out in response to the language that you just decided on, making the code a lot more readable for each you and your guests!<\/p>\n
Professional tip:<\/strong> When you kind 3 backticks adopted by way of the language identify (e.g., ```php<\/code>) after which hit Input<\/strong>, the editor will mechanically create a brand new Code block example and auto-fill the Language<\/strong> atmosphere.<\/p>\n
If you wish to kick your Code block\u2019s options up a notch, you’ll be able to additionally configure a number of different settings but even so the language:<\/p>\n
\n
Filename:<\/strong> Upload a customized filename to show within the best left of the code block (helpful when strolling readers via tutorials).<\/li>\n
Display language identify:<\/strong> Presentations the language identify within the best proper nook of the block.<\/li>\n
Display replica button:<\/strong> Inserts a Reproduction button within the best proper of the block, permitting web page guests to duplicate everything of the code.<\/li>\n
Display line numbers:<\/strong> Presentations line numbers subsequent on your code at the left.<\/li>\n
Line numbers get started at:<\/strong> Make a choice a beginning line quantity.<\/li>\n<\/ul>\n
This will likely make your web page\u2019s code examples a lot more reader pleasant:<\/p>\n<\/figure>\n
Customizing the Code block colours<\/h2>\n
There are more than one techniques to customise the syntax highlighting and colours proven with the improved Code block. On this phase, I\u2019ll stroll you via every from the fastest\/most simple to the extra complicated ways.<\/p>\n
Settling on a block taste<\/h3>\n
The Code block ships with 4 block types out of the field:<\/p>\n
\n
Default:<\/strong> Will use the default types and colours out of your theme.<\/li>\n
No Spotlight:<\/strong> Disables syntax highlighting.<\/li>\n
Solarized Gentle:<\/strong> A gentle shade scheme.<\/li>\n
Solarized Darkish:<\/strong> A dismal shade scheme.<\/li>\n<\/ul>\n
Topics too can check in further types. Settling on this type of types is the fastest approach to alternate how your Code block is output:<\/p>\n\n
![\"Example](\"https:\/\/en-blog.files.wordpress.com\/2026\/01\/enhanced-code-block-plain-text-example.jpg\")
<\/figure>\n![\"Example](\"https:\/\/en-blog.files.wordpress.com\/2026\/01\/enhanced-code-block-syntax-highlighting-example.jpg\")
<\/figure>\n![\"Example](\"https:\/\/en-blog.files.wordpress.com\/2026\/01\/enhanced-code-block-extra-display-settings.jpg\")
<\/figure>\n![\"Example](\"https:\/\/en-blog.files.wordpress.com\/2026\/01\/enhanced-code-block-solarized-light-preset-1.jpg\")