# Speed Highlight JS

Demo | Wiki | Docs

![Screenshot](https://raw.githubusercontent.com/speed-highlight/core/main/assets/screenshot.png) - ๐Ÿชถ 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 - + ``` 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 | โŒ | โœ… |