I've completely revamped my old syntax highlighter, and made it more flexible and easy to use. It works the same way as the previous one, wrapping <span>
elements around sections of text in an element with certain styles, but it now allows for string highlighting, and is more extensible by allowing the user to define their own highlighting styles.
/**
* Define a new syntax for highlighting.
* @param {Array} keywords - A list of strings representing the language keywords.
* @param {Array} globals - A list of strings representing the language globals.
* @param {Array} literals - A list of strings used to match numbers, strings, etc.
*/
function syntax(keywords, globals, literals, styles) {
return {
keywords: keywords,
globals: globals,
literals: literals,
styles: styles,
};
}
/**
* This array contains some built-in
* language defaults. You can create
* your own though!
*/
var DEFAULTS = {
JavaScript: syntax(
["\\babstract\\b", "\\barguments\\b", "\\bboolean\\b", "\\bbreak\\b",
"\\bbyte\\b", "\\bcase\\b", "\\bcatch\\b", "\\bchar\\b",
"\\bclass\\b", "\\bconst\\b", "\\bcontinue\\b", "\\bdebugger\\b",
"\\bdefault\\b", "\\bdelete\\b", "\\bdo\\b", "\\bdouble\\b",
"\\belse\\b", "\\benum\\b", "\\beval\\b", "\\bexport\\b",
"\\bextends\\b", "\\bfalse\\b", "\\bfinal\\b", "\\bfinally\\b",
"\\bfloat\\b", "\\bfor\\b", "\\bfunction\\b", "\\bgoto\\b",
"\\bif\\b", "\\bimplements\\b", "\\bimport\\b", "\\bin\\b",
"\\binstanceof\\b", "\\bint\\b", "\\binterface\\b", "\\blet\\b",
"\\blong\\b", "\\bnative\\b", "\\bnew\\b", "\\bpackage\\b",
"\\bprivate\\b", "\\bprotected\\b", "\\bpublic\\b", "\\breturn\\b",
"\\bshort\\b", "\\bstatic\\b", "\\bsuper\\b", "\\bswitch\\b",
"\\bsynchronized\\b", "\\bthrow\\b", "\\bthrows\\b",
"\\btransient\\b", "\\btrue\\b", "\\btry\\b", "\\btypeof\\b",
"\\bvar\\b", "\\bvoid\\b", "\\bvolatile\\b", "\\bwhile\\b",
"\\bwith\\b", "\\byield\\b"],
["\\bnull\\b", "\\bundefined\\b", "\\btrue\\b", "\\bfalse\\b",
"\\bprototype\\b", "\\bthis\\b"],
["\\b\\d+\\b", "(('.*')|(\".*\"))", "\/\/.*"],
{
keywords: "color:blue",
globals: "color:LightBlue",
literals: "color:Gray",
}
),
Python: syntax(
["\\band\\b", "\\bas\\b", "\\bassert\\b", "\\bbreak\\b",
"\\bclass\\b", "\\bcontinue\\b", "\\bdef\\b", "\\bdel\\b",
"\\belif\\b", "\\belse\\b", "\\bexcept\\b", "\\bexec\\b",
"\\bfinally\\b", "\\bfor\\b", "\\bfrom\\b", "\\bglobal\\b",
"\\bif\\b", "\\bimport\\b", "\\bin\\b", "\\bis\\b",
"\\blambda\\b", "\\bnot\\b", "\\bor\\b", "\\bpass\\b",
"\\bprint\\b", "\\braise\\b", "\\breturn\\b", "\\btry\\b",
"\\bwhile\\b", "\\bwith\\b", "\\byield\\b", "\\bself\\b"],
["\\babs\\b", "\\bdict\\b", "\\bhelp\\b", "\\bmin\\b",
"\\bsetattr\\b", "\\ball\\b", "\\bdir\\b", "\\bhex\\b",
"\\bnext\\b", "\\bslice\\b", "\\bany\\b", "\\bdivmod\\b",
"\\bid\\b", "\\bobject\\b", "\\bsorted\\b", "\\bascii\\b",
"\\benumerate\\b", "\\binput\\b", "\\boct\\b", "\\bstaticmethod\\b",
"\\bbin\\b", "\\beval\\b", "\\bint\\b", "\\bopen\\b",
"\\bstr\\b", "\\bbool\\b", "\\bexec\\b", "\\bisinstance\\b",
"\\bord\\b", "\\bsum\\b", "\\bbytearray\\b", "\\bfilter\\b",
"\\bissubclass\\b", "\\bpow\\b", "\\bsuper\\b", "\\bbytes\\b",
"\\bfloat\\b", "\\biter\\b", "\\bprint\\b", "\\btuple\\b",
"\\bcallable\\b", "\\bformat\\b", "\\blen\\b", "\\bproperty\\b",
"\\brange\\b", "\\bvars\\b", "\\bclassmethod\\b", "\\bgetattr\\b",
"\\blocals\\b", "\\brepr\\b", "\\bzip\\b", "\\bcompile\\b",
"\\bglobals\\b", "\\bmap\\b", "\\breversed\\b", "\\b__import__\\b",
"\\bcomplex\\b", "\\bhasattr\\b", "\\bmax\\b", "\\bround\\b",
"\\bdelattr\\b", "\\bhash\\b", "\\bmemoryview\\b", "\\bset\\b",
"\\bTrue\\b", "\\bFalse\\b", "\\bNone\\b"],
["\\b\\d+\\b", "((\".*\")|('.*'))"],
{
keywords: "color:Gold",
globals: "color:Purple",
literals: "color:blue",
}
),
};
/**
* Highlight an element with a set syntax.
* @param element - The element to highlight.
* @param syntax - The syntax to use.
*/
function highlight(element, syntax) {
var keywordsRegex = new RegExp(syntax.keywords.join("|"), "g");
var globalsRegex = new RegExp(syntax.globals.join("|"), "g");
var literalsRegex = new RegExp(syntax.literals.join("|"), "g");
var keywordStyles = syntax.styles.keywords;
var globalStyles = syntax.styles.globals;
var literalStyles = syntax.styles.literals;
$(element).html($(element).text().replace(
keywordsRegex,
function(stringToReplace) {
return "<span style=" + keywordStyles + ">" + stringToReplace + "</span>";
}).replace(
globalsRegex,
function(stringToReplace) {
return "<span style=" + globalStyles + ">" + stringToReplace + "</span>"
}).replace(
literalsRegex,
function(stringToReplace) {
return "<span style=" + literalStyles + ">" + stringToReplace + "</span>"
}));
}
/**
* Run the highlight function on an
* element here with it's specific
* syntax.
*/
$(document).ready(function() {
highlight('.code-js', DEFAULTS.JavaScript);
highlight('.code-py', DEFAULTS.Python);
})
If you want to find a live demo, it can be found at this link here. Do note that I am still working on this, so the contents in this link are liable to change at any point.