Hixo

Simple and Lightweight code highlighter with 0 dependencies for modern browsers.

Demo CodeSandbox

Installation

$ npm install hixo
// or via yarn 
$ yarn add hixo

Usage

import Hixo from "hixo";
import "hixo/build/index.css";

Or include it via jsDelivr CDN (UMD):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hixo@1.0.12/build/index.min.css" />
<script src="https://cdn.jsdelivr.net/npm/hixo@1.0.12/build/index.umd.min.js"></script>
<!-- Access via global object : window.Hixo -->

Methods && Examples

• codeToHtml(String): HTMLString

const hixo = new Hixo({ language: 'java', lineNum: true }); 

const preElement = document.querySelector('pre');
preElement.innerHTML = hixo.codeToHtml('System.out.println("Hello");');

• addKeys(String): void

// Add new keywords
hixo.addKeys('final|struct|range|async');

• setLanguage(String): void

hixo.setLanguage('java');

• addRegex(Object): void

// Add new regular expression
hixo.addRegex({
  pattern: /(?![.])[:$]{0,2}(\w+)(?=\(.)/g, // required
  color: 'method', // required
  italic: true, // optional
  bold: true, // optional
  stripHtml: true // optional: remove any html tag
});

• highlightAll(): void

// highlight all pre elements
// Html: <pre data-language="javascript"></pre>
hixo.highlightAll()

How to override the current theme

/* 
  css code 
  Note: (themes are not built-in)
  just copy your favorite theme from the folder themes 
*/
[data-theme="material"] {
  --hixo-bg: #263238;
  --hixo-fg: #EEFFFF;
  --hixo-line-num:#b1b1b1;
  --hixo-method: #82AAFF;
  --hixo-num: #FF5370;
  --hixo-string: #C3E88D;
  --hixo-comment: #6a737d;
  --hixo-keyword: #C792EA;
  --hixo-variable: #dc7c23;
  --hixo-operator:#f92672;
  --hixo-data-type:#b65611;
}

// javascript code
preElement.dataset.theme = 'material';

Todo

• Yaml in progress

Notes

• Supported Languages check docs: website
• Css themes are not built-in.
• All pull requests are welcome, feel free.

License

MIT