redeyed
Add color to your JavaScript!
Red Eyed Tree Frog (Agalychnis callidryas)
What?
Takes JavaScript code, along with a config and returns the original code with tokens wrapped and/or replaced as configured.
Where?
- server side using nodejs
- in the browser
What for?
One usecase is adding metadata to your code that can then be used to apply syntax highlighting.
How?
- copy the config.js and edit it in order to specify how
certain tokens are to be surrounded/replaced
- replace the
undefined
of each token you want to configure with one of the following
{String} config
'before:after'
wraps the token inside before/after
{Object} config
{ _before: 'before', _after: 'after' }
wraps token inside before/after
Missing before and after resolution for {String} and {Object} config
For the {String}
and {Object}
configurations, 'before' or 'after' may be omitted:
{String}
:
'before:'
(omitting 'after')':after'
(omitting 'before')
{Object}
:
{ _before: 'before' }
(omitting '_after'){ _after: 'after' }
(omitting '_before')
In these cases the missing half is resolved as follows:
- from the
parent._default
(i.e., Keyword._default
) if found - otherwise from the
config._default
if found - otherwise
''
(empty string)
{Function} config
function (tokenString, info) { return {String}|{Object}; }
Inputs
- tokenString: the content of the token that is currently being processed
- info: an object with the following structure
{
tokenIndex
, tokens
, ast
, code
}
In most cases the tokenString
is all you need. The extra info object is passed in case you need to gather more
information about the token
's surroundings in order to decide how to transform it.
See: replace-log-example
Output
You can return a {String} or an {Object} from a {Function} config.
- when returning a {String}, the token value will be replaced with it
- when returning an {Object}, it should be of the following form:
{
replacement
, skipPastToken
}
Transforming JavaScript code
redeyed(code, config[, opts])
Invoke redeyed with your configuration, a code snippet and maybe opts as in the below example:
var redeyed = require('redeyed')
, config = require('./path/to/config')
, code = 'var a = 3;'
, result;
try {
result = redeyed(code, config);
console.log(result.code);
} catch(err) {
console.error(err);
}
opts:
{
buildAst: true|false
nojoin: true|false
parser: require('esprima')
}
return value:
{ ast
, tokens
, comments
, splits
, code
}
- ast
{Array}
: abstract syntax tree as returned by esprima
parse - tokens
{Array}
: tokens provided by esprima (excluding
comments) - comments
{Array}
: block and line comments as provided by esprima - splits
{Array}
: code pieces split up, some of which where transformed as configured - code
{String}
: transformed code, same as splits.join('')
unless this step has been skipped (see opts)
Browser Support
AMD
Ensure to include esprima as one of your dependencies
define(['redeyed'], function (redeyed) {
[ .. ]
});
Attached to global window object
The redeyed {Function}
will be exposed globally as window.redeyed
- big surprise!
<script type="text/javascript" src="https://unpkg.com/esprima"></script>
<script type="text/javascript" src="https://unpkg.com/redeyed"></script>
redeyed in the wild
- cardinal: Syntax highlights JavaScript code with ANSI colors to be printed to
the terminal
- peacock: JavaScript syntax highlighter that generates html that is compatible
with pygments styles.
Examples