dwhitevisoft

<p>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>.</p>
<p>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.</p>
<p>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:</p>
<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 <strong>Ding Ding Ding</strong></li>
</ul>
<p>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.</p>
<h3>GeSHi</h3>
<p>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.</p>
<p>GeSHi uses the syntax that is <em>close</em> 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.</p>


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

<p>Vaaky Highlighter is a free, easy-to-use, syntax highlighting tool for WordPress. Highlighting is powered by the <a href="https://github.com/highlightjs/highlight.js" rel="nofollow ugc">Highlight.js</a> javaScript syntax highlighter with language auto-detection and zero dependencies.</p>
<p>Using it will be as straightforward as adding a replacement Vaaky Highlighter Sourcecode block (Gutenberg) and insert the code that you wish to highlight: Vaaky Highlighter takes care of the rest!</p>
<p><strong>Here is the <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> of all the supported themes.</strong></p>
<h3>Usage</h3>
<ol>
<li>Add a Vaaky Highlighter block within your content</li>
<li>Write your code</li>
<li>Select the language (optional)</li>
<li>Save the post/page and check your in 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</li>
<li>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

Simple yet elegant syntax or code highlighter based on highlight.js. It allows you to add engaging snippet code blocks.

Goodbye Syntax Highlighter vs Vaaky Highlighter