glowkit

---

Very lightweight (2kb) but strong global syntax highlighting library.

Getting Started

Installation

$ npm install glowkit
# or
$ pnpm add glowkit
# or
$ yarn add glowkit

Usage

import glowkit from "glowkit";

const myCode = `
import React from 'react';

const App = () => {
    return (
        <div>Hello, world!</div>
    )
}

export default App;
`;

const htmlResult = glowkit(myCode /* true */);

API

glowkit

Highlight code using Glowkit syntax highlighting.

export default function glowkit(str: string, noCss = false): string;

• str

The code to highlight

• noCss

Option for adding auto-css in the head.

default: false

Default Style

:root {
  --glowkit-bg-color: #282c34;
  --glowkit-color: #fff;
  --glowkit-border-radius: 4px;
  --glowkit-padding: 8px;
  --glowkit-font-size: 1.125rem;
  --glowkit-line-height: 1.75rem;
  --glowkit-font: monospace;
  --glowkit-keyword: #c678dd;
  --glowkit-operator: #b46fca;
  --glowkit-object-element: #f3727c;
  --glowkit-string: #56b6c2;
  --glowkit-object-last-element: #e5c07b;
}
.glowkit {
  background-color: var(--glowkit-bg-color);
  color: var(--glowkit-color);
  border-radius: var(--glowkit-border-radius);
  padding: var(--glowkit-padding);
  font-size: var(--glowkit-font-size);
  line-height: var(--glowkit-line-height);
  font-family: var(--glowkit-font);
  display: flex;
  flex-direction: column;
}

.glowkit > code * {
  font-weight: normal;
  color: #f1c97f;
}

.glowkit > code > strong.keyword {
  color: var(--glowkit-keyword);
}

.glowkit > code > i.operator {
  color: var(--glowkit-operator) !important;
}
.glowkit > code > .object_element {
  color: var(--glowkit-object-element);
}

.glowkit > code > .string {
  color: var(--glowkit-string);
}

.glowkit > code > .object_last_element {
  color: var(--glowkit-object-last-element);
}

LICENSE

The MIT License (MIT)

License