Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/speed-highlight/core
A lightweight syntax highlighter written in JavaScript
https://github.com/speed-highlight/core
deno fast highlighter highlighting highlightjs javascript js language lightweight regex simple small syntax-highlighting ts
Last synced: 1 day ago
JSON representation
A lightweight syntax highlighter written in JavaScript
- Host: GitHub
- URL: https://github.com/speed-highlight/core
- Owner: speed-highlight
- License: cc0-1.0
- Created: 2021-08-14T12:18:55.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-12-10T01:06:37.000Z (about 2 months ago)
- Last Synced: 2025-01-17T21:03:30.801Z (8 days ago)
- Topics: deno, fast, highlighter, highlighting, highlightjs, javascript, js, language, lightweight, regex, simple, small, syntax-highlighting, ts
- Language: JavaScript
- Homepage: https://speed-highlight.github.io/core/examples/
- Size: 2.22 MB
- Stars: 284
- Watchers: 2
- Forks: 17
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- my-awesome-list - core - highlight | 284 | (JavaScript)
README
# Speed Highlight JS
- 🪶 Lightweight (**~2kB** for the core + **~1kB** by language)
- ⚡ Fast (faster than prism and highlight.js on average)
- 🧹 Minimal Codebase
## Simple setup 🚀
### Web
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';
```
---
### Deno
Use the [deno module](https://deno.land/x/speed_highlight_js)
```js
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](https://www.npmjs.com/package/@speed-highlight/core)
```bash
npm i @speed-highlight/core
```
```js
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
```diff
-
+
```
### Script
For the script part remove the prism.js script and replace it by a import and a call to `highlightAll`
```diff
-
+
+ import { highlightAll } from 'https://unpkg.com/@speed-highlight/core/dist/index.js';
+ highlightAll();
+
```
If you want to highlight only a specific element you can use the `highlightElement` function instead
### Code block
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 | ❌ | ✅ |