regex-colorize

Regex Colorize

Color highlight your regex

Demo

See Slevithan's demo page

📦 Getting Started

npm

npm install regex-colorize --save

yarn

yarn add regex-colorize 

Install

npm

import RegexColorize from 'regex-colorize';
import 'regex-colorize/themes/default.css' // If you import a css file in your library
 
var rgx = new RegexColorize();
 
rgx.colorizeAll();
...

self-host/cdn

<link href="https://unpkg.com/regex-colorize/themes/default.css" rel="stylesheet">
 
<script src="//unpkg.com/regex-colorize"></script>
 
var RegexColorize = window.RegexColorize.default;
 
var rgx = new RegexColorize(); 
// rgx.addStyleSheet();
rgx.colorizeAll();
...

Usage

 
var rgx = new RegexColorize();
//new RegexColorize('my-regex'); to customize class names
//note that themes won't work with different class names, so edit the css files as well
 
// Don't run this line if you provide your own stylesheet
rgx.addStyleSheet();
 
// Can provide a class name for elements to process (defaults to class 'regex')
rgx.colorizeAll();

<code class="regex">/^[A-Za-z0-9]+(?:[ _-][A-Za-z0-9]+)*$/</code>

Themes

• default.css
• nobg.css
• regexbuddy.css
• regexpal.css
• sweetest.css (NEW)

Credits

The code is extracted from Regex Colorizer by slevithan