Prism – getting plugins working

How it works

  1. <pre><code class="language-javascript">
    CODE
    </code></pre>

    pick pick language – wrap code in it

  2. add plug-in css – by adding tags to page

    rainbow-braces
    line-numbers
    match-braces
    no-brace-hover


var myObject = {
    property1: "something",
    property2: 5,
    property3: true
}; 

{{{{{{{{}}}}}}}}
[[[[[[[[]]]]]]]]
((((((((((()))))))))))


<pre><code class="language-javascript">
var myObject = {
    property1: "something",
    property2: 5,
    property3: true
}; 
</code></pre>

{{{{{{{{}}}}}}}}
[[[[[[[[]]]]]]]]
((((((((((()))))))))))


Soft Wrap Support

style=”white-space:pre-wrap;”

line-numbers

Add “line-numbers” as a category

Optional: You can specify the data-start (Number) attribute on the <pre> element. It will shift the line counter.

Braces

Rainbow braces 🌈


rainbow-braces match-braces
(both need to be enabled for rainbow)

no-brace-hover – turns on / off matching pairing hints

language-lisp – is the example version




{{{{{{{{}}}}}}}}
[[[[[[[[]]]]]]]]
((((((((((()))))))))))

(defun factorial (n)
	(if (= n 0) 1
		(* n (factorial (- n 1)))))

To enable rainbow braces, simply add the rainbow-braces class to a code block. This class can also get inherited.

To enable this plugin add the match-braces class to a code block:

<pre><code class="language-xxxx match-braces">...</pre></code>

Just like language-xxxx, the match-braces class is inherited, so you can add the class to the <body> to enable the plugin for the whole page.

The plugin will highlight brace pairs when the cursor hovers over one of the braces. The highlighting effect will disappear as soon as the cursor leaves the brace pair.
The hover effect can be disabled by adding the no-brace-hover to the code block. This class can also be inherited.

You can also click on a brace to select the brace pair. To deselect the pair, click anywhere within the code block or select another pair.
The selection effect can be disabled by adding the no-brace-select to the code block. This class can also be
inherited.


Copy to clipboard

By default, the plugin shows messages in English and sets a 5-second timeout after a click. You can use the following HTML5 data attributes to override the default settings:

  • data-prismjs-copy — default message displayed by Copy to Clipboard;
  • data-prismjs-copy-error — a message displayed after failing copying, prompting the user to press Ctrl+C;
  • data-prismjs-copy-success — a message displayed after a successful copying;
  • data-prismjs-copy-timeout — a timeout (in milliseconds) after copying. Once the timeout passed, the success or error message will revert back to the default message. The value should be a non-negative integer.

The plugin traverses up the DOM tree to find each of these attributes. The search starts at every pre code element and stops at the closest ancestor element that has a desired attribute or at the worst case, at the html element.

Warning! Although possible, you definitely shouldn’t add these attributes to the html element, because a human-readable text should be placed after the character encoding declaration (<meta charset="...">), and the latter must be serialized completely within the first 512 (in older browsers) or 1024 bytes of the document. Consider using the body element or one of its de

styling

This plugin supports customizing the style of the copy button. To understand how this is done, let’s look at the HTML structure of the copy button:

<button class="copy-to-clipboard-button" type="button" data-copy-state="copy">
	<span>Copy</span>
</button>

The copy-to-clipboard-button class can be used to select the button. The data-copy-state attribute indicates the current state of the plugin with the 3 possible states being:

  • data-copy-state="copy" — default state;
  • data-copy-state="copy-error" — the state after failing copying;
  • data-copy-state="copy-success" — the state after successful copying;

These 3 states should be conveyed to the user either by different styling or displaying the button text.

scendants.

examples

Sharing

The following code blocks show modified messages and both use a half-second timeout. The other settings are set to default.

Source code:

<body data-prismjs-copy-timeout="500">
	<pre><code class="language-js" data-prismjs-copy="Copy the JavaScript snippet!">console.log('Hello, world!');</code></pre>

	<pre><code class="language-c" data-prismjs-copy="Copy the C snippet!">int main() {
	return 0;
}</code></pre>
</body>

Output:

console.log('Hello, world!');
int main() {
	return 0;
}

Inheritance

The plugin always use the closest ancestor element that has a desired attribute, so it’s possible to override any setting on any descendant. In the following example, the baz message is used. The other settings are set to default.

Source code:

<body data-prismjs-copy="foo">
	<main data-prismjs-copy="bar">
		<pre><code class="language-c" data-prismjs-copy="baz">int main() {
	return 0;
}</code></pre>
	</main>
</body>

Output:

int main() {
	return 0;
}

i18n

You can use the data attributes for internationalization.

The following code blocks use shared messages in Russian and the default 5-second timeout.

Source code:

<!DOCTYPE html>
<html lang="ru">
<!-- The head is omitted. -->
<body
	data-prismjs-copy="Скопировать"
	data-prismjs-copy-error="Нажмите Ctrl+C, чтобы скопировать"
	data-prismjs-copy-success="Скопировано!"
>
	<pre><code class="language-c">int main() {
	return 0;
}</code></pre>

	<pre><code class="language-js">console.log('Hello, world!');</code></pre>
</body>
</html>

Output:

int main() {
	return 0;
}
console.log('Hello, world!');

The next HTML document is in English, but some code blocks show messages in Russian and simplified Mainland Chinese. The other settings are set to default.

Source code:

<!DOCTYPE html>
<html lang="en"><!-- The head is omitted. -->
<body>
	<pre><code class="language-js">console.log('Hello, world!');</code></pre>

	<pre
		lang="ru"
		data-prismjs-copy="Скопировать"
		data-prismjs-copy-error="Нажмите Ctrl+C, чтобы скопировать"
		data-prismjs-copy-success="Скопировано!"
	><code class="language-js">console.log('Привет, мир!');</code></pre>

	<pre
		lang="zh-Hans-CN"
		data-prismjs-copy="复制文本"
		data-prismjs-copy-error="按Ctrl+C复制"
		data-prismjs-copy-success="文本已复制!"
	><code class="language-js">console.log('你好,世界!');</code></pre>
</body>
</html>

Output:

console.log('Hello, world!');
console.log('Привет, мир!');
console.log('你好,世界!');
Scroll to Top