๐ Light, fast, and easy to use, dependencies free javascript syntax highlighter, with automatic language detection
npm install @speed-highlight/core- ๐ชถ 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):
``html`
In the body of your html file:
`html`[code]
or[inline code]
Highlight the code (in your javascript):
`js`
import { highlightAll } from '/path/dist/index.js';
highlightAll();
Auto language detection
`js
import { highlightElement } from '../dist/index.js';
import { detectLanguage } from '../dist/detect.js';
elm.textContent = code;
highlightElement(elm, detectLanguage(code));
`
Load custom language
`js
import { loadLanguage } from '../dist/index.js';
loadLanguage('language-name', customLanguage);
`
---
#### CDN
`html`
`js`
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
`js
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
`bash`
npm i @speed-highlight/core
`js
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
`diff`
-
+
For the script part remove the prism.js script and replace it by a import and a call to highlightAll
`diff`
-
+
If you want to highlight only a specific element you can use the highlightElement function instead
For the code blocks replace the
by only one
And use shj-lang- prefix instead of language- for the class property`diff
-p { color: red }
+p { color: red }
`And for inline code block you just have to change the class property
`diff
-p { color: red }
+p { color: red }
``Languages supported ๐
| 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 | โ |
Themes ๐
A modern theme by default
| Name | Terminal | Web |
| ------------------- | -------- | --- |
| default | โ
| โ
|
| github-dark | โ | โ
|
| github-light | โ | โ
|
| github-dim | โ | โ
|
| atom-dark | โ
| โ
|
| visual-studio-dark | โ | โ
|