color-coded-code

What is it?

A script that parses a string containing pre-formatted code, returning a syntactically highlighted HTML string.

What's its purpose?

Adding lightweight, dynamic syntax highlighting capabilities to any Node based JavaScript project, without relying on external style sheets. This allows on-the-fly customization of styles (when switching between light/dark modes for instance) without hacky HTML link tag toggling.

What languages does it support?

Currenly, the parser only understands HTML/JSX.

Usage

The module exports a single function, colorCode, which accepts 4 arguments.

• str - the pre-formatted string of code to be parsed
• theme - An object defining colors for different parts of the syntax. This can be any valid CSS color string (hex, rgb, hsl, etc...)
  • tag: the opening and closng tags (ex. <div><div>)
  • attr: attribute keywords (ex <div myAttribute>)
  • vrbl: JSX variable attribute values (ex <div someProp={myVariable}>)
  • str: string based attribute values (ex <div myAttribute="some value">)
• lang - the language to be parsed (currently only "html" is supported)
• asReactElement - boolean value; if true, the parsed code will be returned as a set of React elements ready to inject into a component

Example

import{colorCode}from"color-coded-code";constmyCode=`<button style="color: red;">Click Me!</button>`;constmyTheme={tag: "hsl(0, 100%, 50%)",attr: "hsl(100, 100%, 50%)",vrbl: "hsl(200, 100%, 50%)",str: "hsl(300, 100%, 50%)",}constmyParsedCode=colorCode(myCode,myTheme,"html",false);console.log(myParsedCode);/* RETURNS:"< <span style="color: hsl(0, 100%, 50%)">button</span> <span style="color: hsl(100, 100%, 50%)">style=<span style="color: hsl(300, 100%, 50%)">"color: red;"</span></span>>Click Me!<<span style="color: hsl(0, 100%, 50%)">/button</span>>"*/