Skip to content

speed-highlight/core

BranchesTags

Repository files navigation

Speed Highlight JS

Demo | Wiki | Docs

Screenshot

  • 🪶 Lightweight (~2kB for the core + ~1kB by language)
  • ⚡ Fast (faster than prism and highlight.js on average)
  • 🧹 Minimal Codebase

Simple setup 🚀

Web

Style/theme (in the header of your html file):

<link rel="stylesheet" href="/path/dist/themes/default.css">

In the body of your html file:

<div class='shj-lang-[code-language]'>[code]</div>
or
<code class='shj-lang-[code-language]'>[inline code]</code>

Highlight the code (in your javascript):

import { highlightAll } from '/path/dist/index.js';
highlightAll();

Auto language detection

import { highlightElement } from '../dist/index.js';
import { detectLanguage } from '../dist/detect.js';

elm.textContent = code;
highlightElement(elm, detectLanguage(code));

Load custom language

import { loadLanguage } from '../dist/index.js';

loadLanguage('language-name', customLanguage);

CDN

<link rel="stylesheet" href="https://unpkg.com/@speed-highlight/core/dist/themes/default.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/speed-highlight/core/dist/themes/default.css">
import ... from 'https://unpkg.com/@speed-highlight/core/dist/index.js';
import ... from 'https://cdn.jsdelivr.net/gh/speed-highlight/core/dist/index.js';

Deno

Use the deno module

import { setTheme, printHighlight } from 'https://deno.land/x/speed_highlight_js/dist/terminal.js';

await setTheme('[theme-name]');
printHighlight('console.log("hello")', 'js');

Node