dwhitevisoft

For years I’ve used <a href="http://alexgorbatchev.com/SyntaxHighlighter/" rel="nofollow ugc">Alex Gorbatchev’s SyntaxHighlighter</a>. It has served me well over the years. When I moved to WordPress I tried various plugins based on the library, such <a href="https://wordpress.org/extend/plugins/syntaxhighlighter/" rel="ugc">SyntaxHighlighter Evolved</a>.
I’ve decided to start blogging using <a href="http://daringfireball.net/projects/markdown/" rel="nofollow ugc">Markdown</a>. Making this move I needed to find a way to highlight various bits of source code in an easy way. There are many nice libraries that make this a snap, such as <a href="http://code.google.com/p/google-code-prettify/" rel="nofollow ugc">google-code-prettify</a> or <a href="http://softwaremaniacs.org/soft/highlight/en/" rel="nofollow ugc">highlight.js</a>. In the end I decided to go with highlight.js, for the simple reason that it is automatic, working flawlessly with Markdown’s code syntax output.
Great, but my existing source code examples use SyntaxHighlighter’s style for code blocks (using <code><pre class="brush: ruby;" /></code>, for example). I could have converted things in a few ways:
<ul>
<li>Change the database</li>
<li>Write a JS script to convert the <code><pre /></code> structure to <code><pre><code /></pre></code></li>
<li>Write a JS script to call highlight.js’ <code>highlightBlock</code> method</li>
<li>Write a WP plugin and reformat things easily Ding Ding Ding</li>
</ul>
So there you have it. This WordPress plugin will go through and process your SyntaxHighlighter style blocks into ones that highlight.js works with out-of-the-box. It will also add the language that you have specified with the <code>brush</code> class and add it as a class on the <code><code /></code> element (<a href="http://www.w3.org/html/wg/drafts/html/master/text-level-semantics.html#the-code-element" rel="nofollow ugc">following the HTML5 recommendation</a>). Nothing is changed in the DB, so if you decide to go back to SyntaxHighlighter, you can without any issues.
<h3>GeSHi</h3>
This plugin now supports conversion of <a href="http://qbnz.com/highlighter/" rel="nofollow ugc">GeSHi</a> style code blocks! Now you can move from plugins such as <a href="https://wordpress.org/extend/plugins/wp-syntax/" rel="ugc">WP-Syntax</a> and <a href="https://wordpress.org/extend/plugins/wp-geshi-highlight" rel="ugc">WP-GeSHi-Highlight</a> to highlight.js.
GeSHi uses the syntax that is close to SyntaxHighlighter, except instead of putting the language in the <code>class</code> attribute, it uses the <code>lang</code> attribute. Similar to the SyntaxHighligher conversion, it will go through and process your GeSHi style blocks into ones that highlight.js works with out-of-the-box. It will also add the language that you have specified with the <code>lang</code> attribute and add it as a <code>class</code> on the <code><code /></code> element.

Goodbye Syntax Highlighter

For years I've used Alex Gorbatchev's SyntaxHighlighter. It has served me well over the years. When I moved to WordPress I tried various plu …

Raunak Gupta

Vaaky Highlighter is a lightweight syntax highlighter plugin for WordPress Gutenberg. 
It allows you to add clean, readable, and visually appealing code blocks and code snippets with automatic language detection.
Syntax highlighting is powered by Highlight.js, a fast and dependency-free JavaScript library that supports multiple programming languages and themes.
Vaaky Highlighter is ideal for developers, bloggers, technical writers, and documentation sites who want elegant syntax-highlighted code without unnecessary bloat.
Using it is simple: add the Vaaky Highlighter Sourcecode block in Gutenberg, paste your code, and publish — the plugin handles everything automatically.
View the live demo of all supported themes: 
<a href="https://www.webhat.in/?page_id=626&utm_source=wordpress.org&utm_medium=readme.txt&utm_campaign=link&utm_id=vaaky_highlighter&utm_term=Theme+Demo" rel="nofollow ugc">Demo Page</a>
<h3>Usage</h3>
<ol>
<li>Add the Vaaky Highlighter block in the Gutenberg editor</li>
<li>Paste or write your code</li>
<li>Select a language (optional)</li>
<li>Save and view your page on the frontend</li>
</ol>
<h3>Supported Languages</h3>
<ul>
<li>Apache</li>
<li>Bash</li>
<li>C</li>
<li>C#</li>
<li>C++</li>
<li>CSS</li>
<li>DNS Zone file</li>
<li>DOS</li>
<li>Django</li>
<li>Dockerfile</li>
<li>Go</li>
<li>HTML / XML</li>
<li>Handlebars</li>
<li>JSON</li>
<li>Java</li>
<li>JavaScript</li>
<li>Markdown</li>
<li>Nginx</li>
<li>Objective-C</li>
<li>PHP</li>
<li>Plaintext</li>
<li>PostgreSQL & PL/pgSQL</li>
<li>PowerShell</li>
<li>Python</li>
<li>R</li>
<li>Ruby</li>
<li>Rust</li>
<li>SCSS</li>
<li>SQL / MySQL</li>
<li>Shell</li>
<li>Twig</li>
<li>TypeScript</li>
<li>YAML / YML</li>
</ul>

Vaaky Highlighter – Syntax Highlighter for Gutenberg

Lightweight syntax highlighter plugin for WordPress Gutenberg powered by Highlight.js. Add beautiful, fast, and responsive code blocks with ease.

Goodbye Syntax Highlighter vs Vaaky Highlighter – Syntax Highlighter for Gutenberg