page-code-snippets.html

---
layout: default
title: Code Snippets
permalink: /code-snippets/
id: code-snippets
is_searchable: true
---

<div class="sui-floating-notices">

	<div role="alert" id="library-warning" class="sui-notice" aria-live="assertive"></div>

</div>

<section class="sui-row-with-sidenav">

	<!-- Navigation -->
	<div class="sui-sidenav" role="navigation">

		<ul class="sui-vertical-tabs sui-sidenav-hide-md">

			<li class="sui-vertical-tab current">
				<a href="#" role="button" data-tab="default">Default</a>
			</li>

			<li class="sui-vertical-tab">
				<a href="#" role="button" data-tab="no-copy">No-Copy Button</a>
			</li>

			<li class="sui-vertical-tab">
				<a href="#" role="button" data-tab="documentation">Documentation</a>
			</li>

		</ul>

		<div class="sui-sidenav-settings">

			<div class="sui-form-field sui-sidenav-hide-lg">
	
				<select class="sui-select">
					<option value="default">Default</option>
					<option value="no-copy">No-Copy Button</option>
					<option value="documentation">Documentation</option>
				</select>
	
			</div>
	
		</div>

	</div>

	<!-- TAB: Default -->
	<div class="sui-box" data-tab="default">

		<div class="sui-box-header">
			<h2 class="sui-box-title">Default</h2>
		</div>

		<div class="sui-box-body">

			<p>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.</p>

<pre class="sui-code-snippet">
&lt;IfModule mod_rewrite.c&gt;
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
&lt;/IfModule&gt;
</pre>

			<div class="demo-code-block" style="margin-top: 15px;">
<pre class="sui-code-snippet html">
&lt;pre class=&quot;sui-code-snippet&quot;&gt;
... content goes here ...
&lt;/pre&gt;
</pre>
			</div>

		</div>

	</div>

	<!-- TAB: No-Copy Button -->
	<div class="sui-box" data-tab="no-copy" style="display: none;">

		<div class="sui-box-header">
			<h2 class="sui-box-title">Default</h2>
		</div>

		<div class="sui-box-body">

			<p>There are cases when you gonna need to get rid off the copy button. For those cases, you can add <code>sui-no-copy</code> class.</p>

<pre class="sui-code-snippet sui-no-copy">
&lt;IfModule mod_rewrite.c&gt;
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
&lt;/IfModule&gt;
</pre>

			<div class="demo-code-block" style="margin-top: 15px;">
<pre class="sui-code-snippet html">
&lt;pre class=&quot;sui-code-snippet sui-no-copy&quot;&gt;
... content goes here ...
&lt;/pre&gt;
</pre>
			</div>

		</div>

	</div>

	<!-- TAB: Documentation -->
	<div class="sui-box" data-tab="documentation" style="display: none;">

		<div class="sui-box-body">

			<!-- ROW: Specifications -->
			<div
				id="showcase-specs"
				utilities="true"
				utilities-page="{{ site.baseurl }}/utilities/"
				monochrome="true"
				rtl-lang="false"
			></div>

			<!-- ROW: Clipboard Library -->
			<div class="sui-box-settings-row">

				<div class="sui-box-settings-col-1">
					<h3 class="sui-settings-label">Clipboard Library</h3>
				</div>

				<div class="sui-box-settings-col-2">

					<div class="sui-notice sui-notice-info">

						<div class="sui-notice-content">

							<div class="sui-notice-message">

								<p>Code Snippets uses <a href="https://clipboardjs.com/" target="_blank" rel="noreferrer">clipboard.js</a> library that you will need to grab from its page and load it on your plugin but starting from <strong>WordPress v5.2</strong> this library is included in the WordPress installation.</p>

							</div>

						</div>

					</div>

					<div class="demo-code-block">

<pre class="sui-code-snippet php">
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 );
</pre>

					</div>

				</div>

			</div>

			<!-- ROW: JS Instantiation -->
			<div class="sui-box-settings-row">

				<div class="sui-box-settings-col-1">
					<span class="sui-settings-label">JS Instantiation</span>
				</div>

				<div class="sui-box-settings-col-2">

					<div class="demo-code-block">

<pre class="sui-code-snippet sui-no-copy js">
// Initiate all sui-code-snippet
SUI.suiCodeSnippet();

// Initiate single sui-code-snippet
$( '.my-selector' ).SUICodeSnippet();
</pre>

					</div>

				</div>

			</div>

			<!-- ROW: JS API -->
			<div class="sui-box-settings-row">

				<div class="sui-box-settings-col-1">
					<span class="sui-settings-label">JS API</span>
				</div>

				<div class="sui-box-settings-col-2">

					<div class="demo-code-block">

<pre class="sui-code-snippet sui-no-copy js">
// 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();
</pre>

					</div>

				</div>

			</div>

		</div>

	</div>

</section>