Skip to content

A script that parses a pre-formatted code string and returns syntactically discrete, style-able HTML elements.

License

Notifications You must be signed in to change notification settings

J-Puls/color-coded-code

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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";

const myCode = `<button style="color: red;">Click Me!</button>`;
const myTheme = {
  tag: "hsl(0, 100%, 50%)",
  attr: "hsl(100, 100%, 50%)",
  vrbl: "hsl(200, 100%, 50%)",
  str: "hsl(300, 100%, 50%)",
}
const myParsedCode = 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>>"

*/

About

A script that parses a pre-formatted code string and returns syntactically discrete, style-able HTML elements.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published