63

regex-colorizer - Highlighter for Javascript Regular Expressions

 4 years ago
source link: https://www.tuicool.com/articles/yMRr63Z
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Regex Colorize

Color highlight your regex

NfmEzej.png!web2eaaIj2.png!web

Demo

See Slevithan's demo page

:package: 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


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK