@speed-highlight/core
v1.2.12
Published
π Light, fast, and easy to use, dependencies free javascript syntax highlighter, with automatic language detection
Maintainers
matubuReadme
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):
<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/coreconst { 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 π
| 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 | β | β |