Home

Awesome

Speed Highlight JS

<p align="center"> <a href="https://speed-highlight.github.io/core/examples">Demo</a> | <a href="https://github.com/speed-highlight/core/wiki">Wiki</a> | <a href="https://speed-highlight.github.io/core/docs">Docs</a> </p>

Screenshot

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

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 ๐ŸŒ

NameClass nameSupportLanguage detection
asmshj-lang-asmโœ…
bashshj-lang-bashโœ…
brainfuckshj-lang-bfincrement, operator, print, commentโŒ
cshj-lang-cโœ…
cssshj-lang-csscomment, str, selector, units, function, ...โœ…
csvshj-lang-csvpunctuation, ...โŒ
diffshj-lang-diffโœ…
dockershj-lang-dockerโœ…
gitshj-lang-gitcomment, insert, deleted, string, ...โŒ
goshj-lang-goโœ…
htmlshj-lang-htmlโœ…
httpshj-lang-httpkeywork, string, punctuation, variable, versionโœ…
inishj-lang-iniโŒ
javashj-lang-javaโœ…
javasciptshj-lang-jsbasic syntax, regex, jsdoc, json, template literalsโœ…
jsdocshj-lang-jsdocโŒ
jsonshj-lang-jsonstring, number, bool, ...โŒ
leanpub-mdshj-lang-leanpub-mdโŒ
logshj-lang-lognumber, string, comment, errorsโŒ
luashj-lang-luaโœ…
makefileshj-lang-makeโœ…
markdownshj-lang-mdโœ…
perlshj-lang-plโœ…
plainshj-lang-plainโŒ
pythonshj-lang-pyโœ…
regexshj-lang-regexcount, set, ...โŒ
rustshj-lang-rsโœ…
sqlshj-lang-sqlnumber, string, function, ...โœ…
todoshj-lang-todoโŒ
tomlshj-lang-tomlcomment, table, string, bool, variableโŒ
typescriptshj-lang-tsjs syntax, ts keyword, typesโœ…
urishj-lang-uriโœ…
xmlshj-lang-xmlโœ…
yamlshj-lang-yamlcomment, numbers, variable, string, boolโŒ

Themes ๐ŸŒˆ

A modern theme by default

NameTerminalWeb
defaultโœ…โœ…
github-darkโŒโœ…
github-lightโŒโœ…
github-dimโŒโœ…
atom-darkโœ…โœ…
visual-studio-darkโŒโœ