This element is meant to be used to display code. By default, it will place a copy button on top right of the container, that way users can easily copy snippet content to clipboard.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
<pre class="sui-code-snippet"> ... content goes here ... </pre>
There are cases when you gonna need to get rid off the copy button. For those cases, you can add sui-no-copy class.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
<pre class="sui-code-snippet sui-no-copy"> ... content goes here ... </pre>
Code Snippets uses clipboard.js library that you will need to grab from its page and load it on your plugin but starting from WordPress v5.2 this library is included in the WordPress installation.
global $wp_version;
/**
* Queue clipboard.js from your plugin if WP's version is below 5.2.0
* since it's only included from 5.2.0 on.
*/
// Use 'clipboard' as the handle so it matches WordPress' handle for the script.
if ( version_compare( $wp_version, '5.2', '<' ) ) {
wp_enqueue_script( 'clipboard', 'yourpath/clipboard.js', array(), $version, true );
}
// Here, include 'clipboard' as a dependency along with 'jquery'.
wp_enqueue_script( 'shared-ui', 'yourpath/shared-ui.min.js', array( 'jquery', 'clipboard' ), $plugin_sui_version, true );
// Initiate all sui-code-snippet SUI.suiCodeSnippet(); // Initiate single sui-code-snippet $( '.my-selector' ).SUICodeSnippet();
// Initiate with custom copy text
$( '.my-selector' ).SUICodeSnippet({
'copyText': 'Copy .htaccess', // button text
'copiedText': '.htaccess copied', // tooltip text when copied
});
// Get Clipboard.JS inistance
const clipboard = $( '.my-selector' ).data( 'SUICodeSnippet' ).getClipboardJs();
clipboard.on( 'success', function( e ) {
alert( 'Copied!' );
});
// Destroy instance
$( '.my-selector' ).data( 'SUICodeSnippet' ).destroy();