Skip to content

speed-highlight/core

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Speed-highlight JS

Light, fast, and easy to use, dependencies free javascript syntax highlighter, with automatic language detection, try it out here

Light πŸ“¦

  • The core is about 1kB (gzipped & minified)
  • Languages definition are from a few bytes to 1kB
  • Themes are about 1kB
  • Language rules needed are automatically loaded

Fast ⚑

Blazing fast highlighting using regex

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 '../src/index.js';
import { detectLanguage } from '../src/detect.js';

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

Load custom language

import { loadLanguage } from '../src/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://x.nest.land/speed_highlight_js/dist/terminal.js';

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

Node

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

Migrating from prism

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

Style

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

<head>
-  <link href="themes/prism.css" rel="stylesheet" />
+  <link rel="stylesheet" href="https://unpkg.com/@speed-highlight/core/dist/themes/default.css">
</head>

Script

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

<body>
-  <script src="prism.js"></script>
+<script>
+  import { highlightAll } from 'https://unpkg.com/@speed-highlight/core/dist/index.js';
+  highlightAll();
+</script>
</body>

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

Code block

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

-<pre><code class="language-css">p { color: red }</code></pre>
+<div class="shj-lang-css">p { color: red }</div>

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

-<code class="language-css">p { color: red }</code>
+<code class="shj-lang-css">p { color: red }</code>

Languages supported 🌐

Name Class name Support Language detection
bash shj-lang-bash βœ…
brainfuck shj-lang-bf increment, operator, print, comment ❌
css shj-lang-css comment, str, selector, units, function, ... βœ…
csv shj-lang-csv punctuation, ... ❌
diff shj-lang-diff βœ…
git shj-lang-git comment, insert, deleted, string, ... ❌
html shj-lang-html βœ…
http shj-lang-http keywork, string, punctuation, variable, version βœ…
ini shj-lang-ini ❌
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, ... ❌
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 βœ…
yaml shj-lang-yaml comment, numbers, variable, string, bool ❌
docker shj-lang-docker βœ…
c shj-lang-c βœ…
xml shj-lang-xml βœ…
rust shj-lang-rs βœ…
go shj-lang-go βœ…
java shj-lang-java βœ…
asm shj-lang-asm βœ…

Themes 🌈

A modern theme by default

Name Terminal Web
default βœ… βœ…
github-dark ❌ βœ…
github-light ❌ βœ…
github-dim ❌ βœ…
atom-dark βœ… βœ…
visual-studio-dark ❌ βœ…

Documentation πŸ‘€

Further in-depth documentation for the API and other topics is in our Wiki and our Documentation

License πŸ“ƒ

Shj is released under the Creative Commons Zero License. See our LICENSE file for details.