json-lighter

json-lighter

A lightweight JSON syntax highlighter for the web.

Installation

npm install json-lighter

Usage

import { JsonLighter } from "json-lighter";

const lighter = new JsonLighter({
  spaces: 2,
  colors: {
    punctuation: "gray",
    string: "orange",
    number: "green",
    boolean: "purple",
    null: "blue",
  },
});

// Inject the CSS into the document
lighter.injectCSS();

// Highlight JSON
const html = lighter.highlight(`
  {
    "string": "value",
    "number": 123.123,
    "boolean": false,
    "null": null
  }
`);

API

JsonLighter(options)

Creates a new instance of JsonLighter.

Options

• spaces (number): Number of spaces for indentation.
• colors (object): Custom colors for different JSON elements
  • punctuation (string): Color for punctuation characters
  • string (string): Color for string values
  • number (string): Color for number values
  • boolean (string): Color for boolean values
  • null (string): Color for null values

lighter.injectCSS()

Injects the necessary CSS into the document's head. Call this once before using the highlight method.

lighter.highlight(json)

Highlights the provided JSON string and returns HTML with syntax highlighting.

Parameters

• json (string): The JSON string to highlight

Returns

• (string): HTML string with syntax highlighting