{"id":2440,"date":"2019-04-02T10:07:29","date_gmt":"2019-04-02T10:07:29","guid":{"rendered":"https:\/\/wpvivid.com\/?p=2440"},"modified":"2019-04-02T10:07:29","modified_gmt":"2019-04-02T10:07:29","slug":"highlight-syntax-in-wordpress-html-editor","status":"publish","type":"post","link":"https:\/\/wpvivid.com\/highlight-syntax-in-wordpress-html-editor.html","title":{"rendered":"How to Highlight Syntax in WordPress Post\/Page HTML Editor"},"content":{"rendered":"

Most developers prefer to work with environments they are comfortable with<\/a>, for many that is writing code with an editor that allows them to highlight syntax.<\/p>\n

Saying some developers is an understatement; it\u2019s just a human thing to want to deal with the familiar.<\/p>\n

When a typical day involves writing code with editors like Visual code studio, Notepad++, sublime or any other modern code editor, working with the WordPress HTML<\/a> or Code editor can be a drain.<\/p>\n

Yes, you can write code with the WordPress HTML or code editor; one could probably do that if they are adding a few lines of markup to a page or a post<\/a>.<\/p>\n

However, this article is not about that; neither are you interested in that by reading this article.<\/p>\n

This article is about providing a full developer coding experience with syntax highlighting in WordPress<\/a>.<\/p>\n

This is perfect when one intends to spend several hours writing or editing code directly in the WordPress page or post, purely for better productivity and speed of execution.<\/p>\n

At your disposal are several WordPress plugins<\/a> that transform the default code editor on your pages and posts to one that can highlight syntax giving you a similar coding interface as any other modern standalone editor with same or comparable features to write cleaner code faster.<\/p>\n

For this article, we shall explore one of this syntax highlighting plugins, HTML Editor Syntax Highlighter<\/a>\u00a0by James Bradford<\/a>.<\/p>\n

At the tail end of this article, you can find some more plugins you can experiment with before you opt to settle for one.<\/p>\n

\n

Step by Step: How to highlight syntax in WordPress post\/page HTML editor<\/h2>\n<\/blockquote>\n

1. Install HTML Editor Syntax Highlighter<\/strong><\/h4>\n

\"HTML<\/p>\n

Download the installation files from here<\/a><\/span>\u00a0or search for \u201cHTML Editor Syntax Highlighter\u201d in the Add new plugin section of your WordPress admin area<\/a>.<\/p>\n

Installing and activating the plugin is all there is to enabling syntax highlighting in your WordPress editor. There is nothing more to set or do. Go straight to the page or post you want to write your code.<\/p>\n

Using the HTML syntax highlighter with Gutenberg editor<\/strong><\/h4>\n

HTML Editor Syntax Highlighter works seamlessly with the old WordPress classic editor<\/a>. \u00a0Just click Text in the editor as seen in the image above and begin coding with syntax highlighting.<\/p>\n

With the new Gutenberg editor<\/a>, however, you will need to access the Gutenberg code editor.<\/p>\n

HTML Editor Syntax Highlighter does not work with the Gutenberg blocks<\/a>, whether it is custom HTML, Code or HTML blocks.<\/p>\n

In the image below you can see that the HTML block on Gutenberg editor there is no syntax highlighting even with HTML Editor Syntax Highlighter<\/a>\u00a0enabled.<\/p>\n

\"HTML<\/p>\n

To highlight syntax in the editor of our page or post, we would need to switch entirely from the visual mode to the editor mode.<\/p>\n

We can go about this in two ways.<\/p>\n

Option 1.<\/strong> On the top right corner of the page or post you want to access the code editor, click the three small dots you will see \u2013 see the image below.<\/p>\n

\"access<\/p>\n

Then click Code Editor.<\/p>\n

\"click<\/p>\n

Option 2.<\/strong> Using the keyboard key combination below you can switch between the Visual editor and the code editor.<\/p>\n

Control + shift + alt + M<\/strong><\/p>\n

That will open the Gutenberg Code editor.<\/p>\n

In the code editor, you can now write your code syntax highlighting.<\/p>\n

\"code<\/p>\n

If you are the type that loves to write your code directly in WordPress, then that is how you can go without hacking any code.<\/p>\n

Early on I mentioned of some alternative plugins for those who do not need to get stuck to HTML Editor Syntax Highlighter<\/a>\u00a0or blindly follow our advice.<\/p>\n

Here are some more WordPress syntax highlighting plugins that you can explore before settling with one that provides you the best coding environment with tools and features you want.<\/p>\n

SyntaxHighlighter<\/a>\u00a0Evolved<\/p>\n

Enlighter<\/a>\u00a0\u2013 Customizable Syntax Highlighter<\/p>\n

My Syntax<\/a>\u00a0Highlighter<\/p>\n

Simple Code<\/a>\u00a0Highlighter<\/p>\n

Mivhak<\/a>\u00a0Syntax Highlighter<\/p>\n

\n

Final Thoughts<\/h2>\n<\/blockquote>\n

If you are consulting on a project or working on a clients website<\/a>, as a good practice when you are done with the assignment that necessitated the code editor, switch back to the Visual editor.<\/p>\n

We would love to hear your experiences with HTML Editor Syntax Highlighter<\/a>\u00a0or any of other syntax highlighting editors. You can leave your thoughts in the comment section below.<\/p>\n","protected":false},"excerpt":{"rendered":"

Want to edit code directly in the WordPress page or post with syntax highlighting? I’ll show you how to highlight syntax in WordPress post\/page HTML editor.<\/p>\n","protected":false},"author":3,"featured_media":2759,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","iawp_total_views":38},"categories":[80],"tags":[],"yoast_head":"\nHow to Highlight Syntax in Wordpress Post\/Page HTML Editor - WPvivid<\/title>\n<meta name=\"description\" content=\"Want to edit code directly in the Wordpress page or post with syntax highlighting? I'll show you how to highlight syntax in WordPress post\/page HTML editor.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wpvivid.com\/highlight-syntax-in-wordpress-html-editor.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Highlight Syntax in Wordpress Post\/Page HTML Editor - WPvivid\" \/>\n<meta property=\"og:description\" content=\"Want to edit code directly in the Wordpress page or post with syntax highlighting? I'll show you how to highlight syntax in WordPress post\/page HTML editor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpvivid.com\/highlight-syntax-in-wordpress-html-editor.html\" \/>\n<meta property=\"og:site_name\" content=\"WPvivid\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-02T10:07:29+00:00\" \/>\n<meta name=\"author\" content=\"TonyRobins\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"TonyRobins\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpvivid.com\/highlight-syntax-in-wordpress-html-editor.html\",\"url\":\"https:\/\/wpvivid.com\/highlight-syntax-in-wordpress-html-editor.html\",\"name\":\"How to Highlight Syntax in Wordpress Post\/Page HTML Editor - WPvivid\",\"isPartOf\":{\"@id\":\"https:\/\/wpvivid.com\/#website\"},\"datePublished\":\"2019-04-02T10:07:29+00:00\",\"dateModified\":\"2019-04-02T10:07:29+00:00\",\"author\":{\"@id\":\"https:\/\/wpvivid.com\/#\/schema\/person\/7cd2b626d269c38ca5456654d1a5d2e0\"},\"description\":\"Want to edit code directly in the Wordpress page or post with syntax highlighting? I'll show you how to highlight syntax in WordPress post\/page HTML editor.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpvivid.com\/highlight-syntax-in-wordpress-html-editor.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpvivid.com\/highlight-syntax-in-wordpress-html-editor.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpvivid.com\/highlight-syntax-in-wordpress-html-editor.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpvivid.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Highlight Syntax in WordPress Post\/Page HTML Editor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpvivid.com\/#website\",\"url\":\"https:\/\/wpvivid.com\/\",\"name\":\"WPvivid\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpvivid.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpvivid.com\/#\/schema\/person\/7cd2b626d269c38ca5456654d1a5d2e0\",\"name\":\"TonyRobins\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpvivid.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/wpvivid.com\/wp-content\/uploads\/2019\/10\/logo1-96x96.png\",\"contentUrl\":\"https:\/\/wpvivid.com\/wp-content\/uploads\/2019\/10\/logo1-96x96.png\",\"caption\":\"TonyRobins\"},\"url\":\"https:\/\/wpvivid.com\/author\/tonyrobins\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Highlight Syntax in Wordpress Post\/Page HTML Editor - WPvivid","description":"Want to edit code directly in the Wordpress page or post with syntax highlighting? I'll show you how to highlight syntax in WordPress post\/page HTML editor.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wpvivid.com\/highlight-syntax-in-wordpress-html-editor.html","og_locale":"en_US","og_type":"article","og_title":"How to Highlight Syntax in Wordpress Post\/Page HTML Editor - WPvivid","og_description":"Want to edit code directly in the Wordpress page or post with syntax highlighting? I'll show you how to highlight syntax in WordPress post\/page HTML editor.","og_url":"https:\/\/wpvivid.com\/highlight-syntax-in-wordpress-html-editor.html","og_site_name":"WPvivid","article_published_time":"2019-04-02T10:07:29+00:00","author":"TonyRobins","twitter_card":"summary_large_image","twitter_misc":{"Written by":"TonyRobins","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpvivid.com\/highlight-syntax-in-wordpress-html-editor.html","url":"https:\/\/wpvivid.com\/highlight-syntax-in-wordpress-html-editor.html","name":"How to Highlight Syntax in Wordpress Post\/Page HTML Editor - WPvivid","isPartOf":{"@id":"https:\/\/wpvivid.com\/#website"},"datePublished":"2019-04-02T10:07:29+00:00","dateModified":"2019-04-02T10:07:29+00:00","author":{"@id":"https:\/\/wpvivid.com\/#\/schema\/person\/7cd2b626d269c38ca5456654d1a5d2e0"},"description":"Want to edit code directly in the Wordpress page or post with syntax highlighting? I'll show you how to highlight syntax in WordPress post\/page HTML editor.","breadcrumb":{"@id":"https:\/\/wpvivid.com\/highlight-syntax-in-wordpress-html-editor.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpvivid.com\/highlight-syntax-in-wordpress-html-editor.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpvivid.com\/highlight-syntax-in-wordpress-html-editor.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpvivid.com\/"},{"@type":"ListItem","position":2,"name":"How to Highlight Syntax in WordPress Post\/Page HTML Editor"}]},{"@type":"WebSite","@id":"https:\/\/wpvivid.com\/#website","url":"https:\/\/wpvivid.com\/","name":"WPvivid","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpvivid.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpvivid.com\/#\/schema\/person\/7cd2b626d269c38ca5456654d1a5d2e0","name":"TonyRobins","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpvivid.com\/#\/schema\/person\/image\/","url":"https:\/\/wpvivid.com\/wp-content\/uploads\/2019\/10\/logo1-96x96.png","contentUrl":"https:\/\/wpvivid.com\/wp-content\/uploads\/2019\/10\/logo1-96x96.png","caption":"TonyRobins"},"url":"https:\/\/wpvivid.com\/author\/tonyrobins"}]}},"_links":{"self":[{"href":"https:\/\/wpvivid.com\/wp-json\/wp\/v2\/posts\/2440"}],"collection":[{"href":"https:\/\/wpvivid.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpvivid.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpvivid.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/wpvivid.com\/wp-json\/wp\/v2\/comments?post=2440"}],"version-history":[{"count":0,"href":"https:\/\/wpvivid.com\/wp-json\/wp\/v2\/posts\/2440\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpvivid.com\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/wpvivid.com\/wp-json\/wp\/v2\/media?parent=2440"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpvivid.com\/wp-json\/wp\/v2\/categories?post=2440"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpvivid.com\/wp-json\/wp\/v2\/tags?post=2440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}