How it works
- <pre><code class="language-javascript">
CODE
</code></pre>pick pick language – wrap code in it
- 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 pressCtrl+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:
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:
Output:
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:
Output:
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:
Output:
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:
Output: