mattshelton

<p>WP-Markdown-SyntaxHighlighter is intended to work with the <a href="https://wordpress.org/extend/plugins/wp-markdown/" rel="ugc">wp-markdown</a> and <a href="http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/" rel="nofollow ugc">SyntaxHighlighter Evolved</a> plugins as follows:</p>
<ul>
<li>WP-Markdown can automatically use <a href="http://code.google.com/p/google-code-prettify/" rel="nofollow ugc">Prettify.js</a> to format code, but if you prefer <a href="http://alexgorbatchev.com/SyntaxHighlighter/" rel="nofollow ugc">Alex Gorbatchev’s SyntaxHighlighter</a>, this plugin will re-format the Markdown-formatted code blocks to be properly styled by SyntaxHighlighter directly or SyntaxHighlighter Evolved via plugin.</li>
<li>SyntaxHighlighter Evolved uses SyntaxHighlighter and additional extended functionality to display code blocks in an easily readable manner.</li>
</ul>
<p>There are two methods of use:</p>
<ol>
<li>Add a <code>#!</code> line to your code example and specify the language (brush) only</li>
<li>Add a <code>#!!</code> line to your code example and specify any/all supported parameters via a JSON object</li>
</ol>
<h4>Simple Method</h4>
<p>To use, add a <code>#!</code> line as the first line of your code example with the language you are using:</p>
<pre><code>#!ruby
class Foo < Bar
  def hello
    puts "Hello World!"
  end
end
</code></pre>
<p>The <code>#!</code> is removed, and the code is reformatted as:</p>
<pre><code><pre class="brush:ruby; notranslate" title="">class One < Two
  def hello
    puts "Hello World!"
  end
end</pre>
</code></pre>
<h4>Full Method</h4>
<p>To use, add a <code>#!!</code> line as the first line of your code example, with any of the supported SyntaxHighlighter parameters as a JSON object</p>
<pre><code>#!!{"brush":"ruby","toolbar":"true","highlight":"[2,3,4]"}
class Foo < Bar
  def hello
    puts "Hello World!"
  end
end
</code></pre>
<p>The <code>#!!</code> is removed, and the parameters are interpreted into a CSS class string as:</p>
<pre><code><pre class="brush: ruby; toolbar: true; highlight: [2,3,4]; notranslate">class Foo < Bar
  def hello
    puts "Hello World!"
  end
end</pre>
</code></pre>
<h3>TODO</h3>
<ul>
<li>Consider adding support to toggle ‘notranslate’</li>
</ul>


WP-Markdown-SyntaxHighlighter

WP-Markdown-SyntaxHighlighter works in conjunction with Markdown-formatted code blocks and SyntaxHighlighter to properly format code.

Dan D

<p>Codeblocks Extended with PrismJS was born of a personal need for a lightweight code highlighter, with special functionality.<br />
Many of the other PrismJS based plugins in the repository were either outdated, or were lacking features that I was looking for.</p>
<p>Features:</p>
<ul>
<li>Integrates the latest PrismJS build, with the most common langauges used.</li>
<li>Integrates the PrismJS line-numbers plugin, to automatically number lines of code.</li>
<li>Integrates the PrismJS line-highlight plugin to allow you to highlight specific lines of code.</li>
<li>Integrates ClipboardJS + custom jQuery to add a “Copy to Clipboard” button to each code block.</li>
<li>Custom Text Editor button to wrap selected text with the most commmon <code><pre></code> and <code><code></code> classes, and replacing special characters with their HTML safe equivalents.</li>
<li>Custom Visual Editor / TinyMCE dropdown button, with the most common languages to wrap selected text.</li>
<li>Since this works via wrapping <code><pre></code> and <code><code></code> tags with classes, you can use all custom class settings that PrismJS offers.</li>
<li>No shortcodes to mess with, so you don’t have to worry about losing whitespace between editor modes.</li>
<li>No settings page needed: Just activate it and go!</li>
</ul>
<p>For a full list of languages supported and more information on this plugin’s use, please check out the FAQ.</p>
<p>Note: This does NOT auto-detect the language. Most plugins that do so brute force the languages or require file extensions, resulting in a much heavier plugin. The decision was made to keep this as light-weight as possible.</p>
<p>Note 2: This is designed to work with the Classic Editor. It does not currently work in Gutenberg blocks.</p>
<p>Thanks to Mike @ <a href="https://wp-bullet.com/" rel="nofollow ugc">WP Bullet</a> for the banner and icon.</p>


Codeblocks Extended with PrismJS

Codebocks Extended with PrismJS includes syntax highlighting, copy to clipboard, and Visual + Text editor integration.

WP-Markdown-SyntaxHighlighter vs Codeblocks Extended with PrismJS