How to use

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.

Rainbow braces 🌈

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

Examples

JavaScript

const func = (a, b) => {
	return `${a}:${b}`;
}

Lisp

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

Lisp with rainbow braces 🌈 but without hover

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