You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@speed-highlight/core

Package Overview
Dependencies
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@speed-highlight/core

🌈 Light, fast, and easy to use, dependencies free javascript syntax highlighter, with automatic language detection

1.2.7
latest
Source
npmnpm
Version published
Weekly downloads
1.1M
6.38%
Maintainers
1
Weekly downloads
 
Created
Source

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 🌐

NameClass nameSupportLanguage detection
bashshj-lang-bash✅
brainfuckshj-lang-bfincrement, operator, print, comment❌
cssshj-lang-csscomment, str, selector, units, function, ...✅
csvshj-lang-csvpunctuation, ...❌
diffshj-lang-diff✅
gitshj-lang-gitcomment, insert, deleted, string, ...❌
htmlshj-lang-html✅
httpshj-lang-httpkeywork, string, punctuation, variable, version✅
inishj-lang-ini❌
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, ...❌
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✅
yamlshj-lang-yamlcomment, numbers, variable, string, bool❌
dockershj-lang-docker✅
cshj-lang-c✅
xmlshj-lang-xml✅
rustshj-lang-rs✅
goshj-lang-go✅
javashj-lang-java✅
asmshj-lang-asm✅

Themes 🌈

A modern theme by default

NameTerminalWeb
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.

Keywords

javascript
syntax-highlighting
language
fast
js
simple

FAQs

Package last updated on 10 Dec 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

TC39 Advances 11 Proposals for Math Precision, Binary APIs, and More

Security News

TC39 Advances 11 Proposals for Math Precision, Binary APIs, and More

TC39 advances 11 JavaScript proposals, with two moving to Stage 4, bringing better math, binary APIs, and more features one step closer to the ECMAScript spec.

By Sarah Gooding  -  Aug 06, 2025
Critical Vulnerability in NestJS Devtools: Localhost RCE via Sandbox Escape

Research

/

Security News

Critical Vulnerability in NestJS Devtools: Localhost RCE via Sandbox Escape

A flawed sandbox in @nestjs/devtools-integration lets attackers run code on your machine via CSRF, leading to full Remote Code Execution (RCE).

By Jonathan Leitschuh  -  Aug 01, 2025