treeflips

Yin Zhongzhen

<p>Simple plugin that automatically copies content in <code><pre></code> and <code><code></code> tags to clipboard (when clicked). Other plugins out there do the same but create a little [COPY] button that you have to aim for. Mine doesn’t require any aiming, just click anywhere on the code block and it copies the whole thing. Customizable hover tooltip lets you know it’s copied.</p>
<p>For sites sharing code-commands, this plugin will save users time from having to highlight and copy-paste bits of text back and forth. It’s especially helpful for large globs of code that scroll off-screen, or when copying on your mobile phone. I’ve added more features to make it more helpful.</p>
<p><strong>Features:</strong><br />
* Easy aim – click anywhere on text block to copy entire text, no need to aim for tiny text or clipboard icon.<br />
* Tooltip text customization – change tooltip text.<br />
* Tooltip color options – customize tooltip background and text colors.<br />
* Tooltip hover custom CSS – completely restyle the tooltip hover.<br />
* Tooltip function custom CSS – apply tooltip function to other CSS classes. Allowing copy function on any content block, not only code blocks.</p>


Code Click to Copy

Great

Doesn't work with <PRE> tag, and lots of bugs

Doesn't work with tag, and lots of bugs

Copies and tags automatically to clipboard with customizable tooltips.

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.

Code Click to Copy vs WP-Markdown-SyntaxHighlighter