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 | โ | โ |