jesucarr

The main reason for the development of this plugin was the lack of options supporting the HTML5 recommendation, where the code snippets should be tagged with <code>pre</code> followed by <code>code</code>, and optionally a class starting with <code>language-</code> and then our language.
You can use the plugin like this:
<pre><code><pre class="prettyprint"><code class="language-php">
// my code
</code></pre>
</code></pre>
Also very important is that although this plugin loads different files depending on your configuration, it fully supports caching scripts (<a href="https://wordpress.org/extend/plugins/w3-total-cache/" rel="ugc">W3 Total Cache</a>) to concatenate and compress all the css and js, so the impact in performance will be minimum.
<h4>Languages</h4>
This syntax highlighter is based on <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html" rel="nofollow ugc">Google Code Prettify</a> and should work on a number of languages including C and friends, Java, Python, Bash, SQL, HTML, XML, Javascript, Makefiles, and Rust. It works passably on Ruby, PHP, VB, and Awk and a decent subset of Perl and Ruby, but, because of commenting conventions, doesn’t work on Smalltalk.
Other languages are supported via an extension (plugin options): CSS, SQL, YAML, Visual Basic, Clojure, Scala, Latek (TeX, LaTeX), WikiText, Erlang, Go, Haskell, Lua, OCAML, SML, F#, Nemerle, Protocol Buffers, CHDL (VHDL), XQ (XQuery), Lisp, Scheme, Dart, Llvm, Mumps, Pascal, R, S, RD, TCL
<h4>Styles</h4>
Four different styles are provided, and they can be previewed in the plugin options. They are modified to make sure they don’t clash with any other styles in your theme.
You have also the option to include your custom style.
If you have a style that would like to see included in the option list, just <a href="http://www.frontendmatters.com/contact/" rel="nofollow ugc">contact me</a>, or <a href="https://github.com/jesucarr/wordpress-prettify-code-syntax" rel="nofollow ugc">fork me</a>.
<h4>Notes</h4>
<ul>
<li>
Plugin options are at Settings > Prettify Code Syntax. Have a look at the Screenshots tab to see how it looks like.
</li>
<li>
If you don’t care too much about the HTML5 recommendation, you can skip the <code>language-</code> class. The code always gets detected automatically.
</li>
<li>
It will also work if you only use a <code>pre</code> tag without the <code>code</code> tag (but long lines will be wrapped instead of get horizontal scroll), or if you only use a <code>code</code> tag with the <code>prettyprint</code> class (but if you don’t use <code>pre</code> your spaces/returns won’t be maintained.)
</li>
<li>
Be careful using the Visual Editor tab when inserting code, as some HTML tags will be modified or removed.
</li>
<li>
Using a chaching plugin like W3 Total Cache is highly recommended.
</li>
</ul>
<h4>Demo</h4>
You can find a <a href="http://www.frontendmatters.com/open-source/wordpress-plugins/prettify-code-syntax/" rel="nofollow ugc">front end demo</a> here a the bottom.

Prettify Code Syntax

Code syntax highlighter using Google Prettify, supporting the HTML5 recommendation, and caching plugins.

Simon Ugorji

<blockquote>
PLEASE NOTE THAT THIS PLUGIN DOES NOT AND WILL NEVER EXECUTE ANY TYPE OF CODE ON YOUR WORDPRESS SITE!
</blockquote>
This plugin uses Google Prettify which is an open-source syntax highlighting library.
This plugin relies on 3rd party services under the circumstances below;
<ol>
<li>
<a href="https://github.com/googlearchive/code-prettify/" rel="nofollow ugc">Syntax highlighting</a> – This is the core library that will make your snippets to be formatted according to your chosen language.
</li>
<li>
<a href="https://jmblog.github.io/color-themes-for-google-code-prettify/" rel="nofollow ugc">Color Themes</a> – This is the color themes that can be used to change what your code snippets looks like
</li>
</ol>
You can find the Terms of Use and privacy policy on the links above.
<h3>HOW TO USE</h3>
CREATE A NEW SNIPPET
<ol>
<li>Head Over to the New Snippet page to create a New Code Snippet.</li>
<li>On the page, add a title for the new snippet.</li>
<li>Select the Language you’re working with.</li>
<li>Type in the code in the code box and when you’re done, click on Preview.</li>
<li>Click on Save to save your code snippet.</li>
</ol>
<blockquote>
NOTE: YOUR CODE SNIPPETS ARE ENCODED AND STORED AS PLAIN TEXT TO PREVENT ITS EXECUTION
</blockquote>
MANAGE CODE SNIPPETS
<ol>
<li>Head Over to the All Snippets page to view existing code snippets.</li>
<li>You can click on the Copy button to copy the shortcode for the snippet.</li>
<li>You can click on the Edit button to edit a code snippet.</li>
<li>You can click on the Delete button to delete a code snippet.</li>
</ol>
EDIT CODE SNIPPET
<ol>
<li>Head Over to the All Snippets page to view existing code snippets.</li>
<li>Click on the Edit button to redirect you to the edit page.</li>
<li>On the Edit page, change the title for the snippet.</li>
<li>Change the Language you’re working with.</li>
<li>Modify the code in the code box and when you’re done, click on Update.</li>
</ol>
EMBED CODE SNIPPET
<ol>
<li>Head Over to the All Snippets page to view existing code snippets.</li>
<li>Click on the Copy button to copy the shortcode for the snippet.</li>
<li>In any of your wordpress posts, place the copied shortcode & save the post.</li>
<li>Preview the post to see the snippet embedded right where you want it.</li>
</ol>

Coding Blocks

code block, syntax highlighter, code highlighter, editor, php, html, css, javascript, python, java, jsx, react, snippet, highlight, syntax, github, p …

Prettify Code Syntax vs Coding Blocks