@speed-highlight/core

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

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

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

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');

Use the npm package

npm i @speed-highlight/core
const { setTheme, printHighlight } = require('@speed-highlight/core/terminal');

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

Speed-highlight JS is a lighter and faster version of prism that share a similar API

Remove the prism stylesheet in the head of your html file Clone this repository or use a cdn to load our stylesheet


-  
+  

For the script part remove the prism.js script and replace it by a import and a call to highlightAll


-  
+

If you want to highlight only a specific element you can use the highlightElement function instead

For the code blocks replace the <pre><code> by only one <div> And use shj-lang- prefix instead of language- for the class property

-
p { color: red }
+
p { color: red }

And for inline code block you just have to change the class property

-p { color: red }
+p { color: red }
Name Class name Support Language detection
asm shj-lang-asm โœ…
bash shj-lang-bash โœ…
brainfuck shj-lang-bf increment, operator, print, comment โŒ
c shj-lang-c โœ…
css shj-lang-css comment, str, selector, units, function, ... โœ…
csv shj-lang-csv punctuation, ... โŒ
diff shj-lang-diff โœ…
docker shj-lang-docker โœ…
git shj-lang-git comment, insert, deleted, string, ... โŒ
go shj-lang-go โœ…
html shj-lang-html โœ…
http shj-lang-http keywork, string, punctuation, variable, version โœ…
ini shj-lang-ini โŒ
java shj-lang-java โœ…
javascipt shj-lang-js basic syntax, regex, jsdoc, json, template literals โœ…
jsdoc shj-lang-jsdoc โŒ
json shj-lang-json string, number, bool, ... โŒ
leanpub-md shj-lang-leanpub-md โŒ
log shj-lang-log number, string, comment, errors โŒ
lua shj-lang-lua โœ…
makefile shj-lang-make โœ…
markdown shj-lang-md โœ…
perl shj-lang-pl โœ…
plain shj-lang-plain โŒ
python shj-lang-py โœ…
regex shj-lang-regex count, set, ... โŒ
rust shj-lang-rs โœ…
sql shj-lang-sql number, string, function, ... โœ…
todo shj-lang-todo โŒ
toml shj-lang-toml comment, table, string, bool, variable โŒ
typescript shj-lang-ts js syntax, ts keyword, types โœ…
uri shj-lang-uri โœ…
xml shj-lang-xml โœ…
yaml shj-lang-yaml comment, numbers, variable, string, bool โŒ

A modern theme by default

Name Terminal Web
default โœ… โœ…
github-dark โŒ โœ…
github-light โŒ โœ…
github-dim โŒ โœ…
atom-dark โœ… โœ…
visual-studio-dark โŒ โœ