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