Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@speed-highlight/core

Package Overview
Dependencies
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@speed-highlight/core - npm Package Compare versions

Comparing version 1.1.7 to 1.1.8

doc/common.js.html

60

examples/deno.js

@@ -1,14 +0,60 @@

import { setTheme, printHighlight } from '../src/term.js';
import { languages, themesTerminal } from './data.js'
import { setTheme, printHighlight } from '../src/terminal.js';
import { fromFileUrl } from 'https://deno.land/std/path/mod.ts';
import { parse } from "https://deno.land/std/flags/mod.ts"
const lang = Deno.args[0] ?? 'js';
let args = parse(Deno.args)
const path = fromFileUrl(import.meta.url.replace(/[^\\\/]+$/, `languages/test.${lang}`))
if (args.help)
{
console.log(`Usage deno run --allow-read deno.js [OPTION]... [TEST_FILE]`)
console.log(``)
console.log(` --help display this help and exit`)
console.log(` --theme=[-]THEME change the used THEME`)
console.log(` --lang=[-]LANGUAGE change the used LANGUAGE`)
console.log(` --stdin highlight code given from the stdin`)
console.log(``)
console.log(`THEME may be:`)
console.log(`${themesTerminal.join(', ')}`)
console.log(`LANGUAGE may be:`)
console.log(`${languages.join(', ')}`)
Deno.exit(0)
}
if (args.theme)
{
if (!themesTerminal.includes(args.theme))
{
console.error(`'${args.theme}' is not a supported try on of the following theme:`)
console.log(`${themesTerminal.join(', ')}`)
Deno.exit(1)
}
await setTheme(args.theme)
}
if (args.lang && !languages.includes(args.lang))
{
console.error(`'${args.lang}' is not a supported try on of the following languages:`)
console.log(`${languages.join(', ')}`)
Deno.exit(1)
}
if (args.stdin)
{
const buf = new Uint8Array(1024)
let n;
do {
n = await Deno.stdin.read(buf)
const code = new TextDecoder().decode(buf.subarray(0, n))
await printHighlight(code, args.lang ?? 'js');
} while (n)
Deno.exit(0)
}
const absolutePath = args._[0] ?? fromFileUrl(import.meta.url.replace(/[^\\\/]+$/, './languages/test.js'))
.replace(Deno.cwd(), '')
.slice(1)
const code = await Deno.readTextFile(path);
const code = await Deno.readTextFile(absolutePath);
await setTheme('default');
printHighlight(code, lang);
printHighlight(code, args.lang ?? args._[0]?.split?.('.')?.[1] ?? 'js');

2

examples/node.js
const fs = require('fs'),
path = require('path'),
{ setTheme, printHighlight } = require('../dist/node/term.js');
{ setTheme, printHighlight } = require('@speed-highlight/core/terminal');

@@ -5,0 +5,0 @@ const lang = process.argv[2] ?? 'js';

{
"name": "@speed-highlight/core",
"version": "1.1.7",
"description": "🌈 Light, fast, and easy to use, dependencies free javascript syntax highlighter, with automatic language detection",
"main": "dist/node/index.js",
"directories": {
"example": "examples"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git://github.com/speed-highlight/core.git"
},
"keywords": [
"javascript",
"syntax-highlighting",
"language",
"fast",
"js",
"simple",
"highlighter",
"regex",
"highlighting",
"highlightjs",
"small",
"deno"
],
"author": "matubu",
"license": "CC0-1.0",
"bugs": {
"url": "https://github.com/speed-highlight/core/issues"
},
"homepage": "https://github.com/speed-highlight/core#readme",
"publishConfig": {
"registry": "https://npm.pkg.github.com/",
"access": "public"
}
"name": "@speed-highlight/core",
"version": "1.1.8",
"description": "🌈 Light, fast, and easy to use, dependencies free javascript syntax highlighter, with automatic language detection",
"main": "dist/node/index.js",
"exports": {
"./terminal": "./dist/node/terminal.js",
"./terminal.js": "./dist/node/terminal.js"
},
"directories": {
"example": "examples"
},
"scripts": {
"build": "./.github/workflows/minify.sh"
},
"repository": {
"type": "git",
"url": "git://github.com/speed-highlight/core.git"
},
"keywords": [
"javascript",
"syntax-highlighting",
"language",
"fast",
"js",
"simple",
"highlighter",
"regex",
"highlighting",
"highlightjs",
"small",
"deno"
],
"author": "matubu",
"license": "CC0-1.0",
"bugs": {
"url": "https://github.com/speed-highlight/core/issues"
},
"homepage": "https://github.com/speed-highlight/core#readme",
"publishConfig": {
"registry": "https://npm.pkg.github.com/",
"access": "public"
}
}

@@ -49,2 +49,9 @@ # Speed-highlight JS

Load custom language
```js
import { loadLanguage } from '../src/index.js';
loadLanguage('language-name', customLanguage);
```
#### CDN

@@ -66,6 +73,6 @@

```js
import { setTheme, printHighlight } from 'https://x.nest.land/speed_highlight_js/dist/term.js';
import { setTheme, printHighlight } from 'https://x.nest.land/speed_highlight_js/dist/terminal.js';
await setTheme('default');
printHighlight('console.log("hello")', 'js');
await setTheme('[theme-name]')
printHighlight('console.log("hello")', 'js')
```

@@ -82,8 +89,48 @@

```js
const { setTheme, printHighlight } = require('@speed-highlight/core/dist/node/term.js');
const { setTheme, printHighlight } = require('@speed-highlight/core/terminal.js');
setTheme('default')
printHighlight('console.log("hello")', 'js');
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
<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`
```diff
<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
```diff
-<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
```diff
-<code class="language-css">p { color: red }</code>
+<code class="shj-lang-css">p { color: red }</code>
```
## Languages supported 🌐

@@ -138,8 +185,8 @@

| github-dim | ❌ | ✅ |
| atom-dark | ❌ | ✅ |
| atom-dark | ✅ | ✅ |
| visual-studio-dark | ❌ | ✅ |
## Wiki 👀
## Documentation 👀
Further in-depth documentation for the API and other topics is in our [Wiki](https://github.com/speed-highlight/core/wiki)
Further in-depth documentation for the API and other topics is in our [Wiki](https://github.com/speed-highlight/core/wiki) and our [Documentation](https://speed-highlight.github.io/core/doc/)

@@ -146,0 +193,0 @@ ## License 📃

@@ -0,1 +1,11 @@

/**
* @module detect
* (Language detector)
*/
import '../typedef.js'
/**
* @type {Array.<[ShjLanguage, ...[RegExp, Number][]]>}
*/
const languages = [

@@ -25,10 +35,16 @@ ['bash', [/#!(\/usr)?\/bin\/bash/g, 500], [/\b(if|elif|then|fi|echo)\b|\$/g, 10]],

/**
* @function detectLanguage
* Try to find the language the given code belong to
* @param {String} code The code
* @returns {ShjLanguage} The language of the code
*/
export const detectLanguage = code => {
return (languages
.map(([lang, ...features]) => [
features.reduce((acc, [match, score]) => acc + [...code.matchAll(match)].length * score, 0),
lang
lang,
features.reduce((acc, [match, score]) => acc + [...code.matchAll(match)].length * score, 0)
])
.filter(([score, lang]) => score > 10)
.sort((a, b) => b[0] - a[0])[0]?.[1] || 'plain');
}
.filter(([lang, score]) => score > 20)
.sort((a, b) => b[1] - a[1])[0]?.[0] || 'plain');
}
/**
* Base script
* @module index
* (Base script)
*/
import '../typedef.js'
import expandData from './common.js';

@@ -11,6 +14,8 @@

/**
* A function that turn text in HTML to apply a class to it
* @param {String} str need to be sanitize to be safe
* @param {String} [token] token type
* @returns A string with HTML semantics
* @function
* @ignore
* Create a HTML element with the right token styling
* @param {String} str The content (need to be sanitized)
* @param {ShjToken} [token] The type of token
* @returns A HMTL string
*/

@@ -20,9 +25,10 @@ toSpan = (str, token) => token ? `<span class="shj-syn-${token}">${str}</span>` : str;

/**
* A
* @param {String} src
* @param {String|Object} lang
* @param {Function} token the callback that will be call for every token found.
* the arguments pass will be:
* * the token as a string (can be an empty string)
* * the token type also as a string like 'err', 'cmnt', ...
* @function tokenize
* Find the tokens in the given code and call the callback
* @param {String} src The code
* @param {ShjLanguage|Array} lang The language of the code
* @param {function(String, ShjToken=):void} token The callback function
* this function will be given
* * the text of the token
* * the type of the token
*/

@@ -84,16 +90,12 @@ export async function tokenize(src, lang, token) {

/**
* @typedef {Object} HighlightOptions
* @property {boolean} [hideLineNumbers=false] - Indicates whether to hide line numbers.
*/
/**
* @function highlightText
* @async
* @function highlightText A function that highlight a string text and return it
* Highlight a string passed as argument and return it
* @example
* elm.innerHTML = await highlightText(code, 'js');
* @param {String} src the text content to be highlighted
* @param {String} lang the lang name ex: 'js'
* @param {Boolean} [multiline=true] inline mode
* @param {HighlightOptions} [opt={}] other options
* @returns {String} the highlighted as String text
* @param {String} src The code
* @param {ShjLanguage} lang The language of the code
* @param {Boolean} [multiline=true] If it is multiline, it will add a wrapper for the line numbering and header
* @param {ShjOptions} [opt={}] Customization options
* @returns {Promise<String>} The highlighted string
*/

@@ -110,8 +112,9 @@ export async function highlightText(src, lang, multiline = true, opt = {}) {

/**
* @function highlightElement
* @async
* @function highlightElement highlight a element code with a 'pre' parent
* @param {HTMLElement} elm the code elm
* @param {String} [lang] the lang used for syntax highlighting by default is found in the className of the parent or the elm it self
* @param {String} [mode] can be set to inline multiline or oneline by default it's auto detected: inline if `code` tag else depends of the number of lines
* @param {HighlightOptions} [opt={}] other options
* Highlight a DOM element by getting the new innerHTML with highlightText
* @param {Element} elm The DOM element
* @param {ShjLanguage} [lang] The language of the code (seaching by default on `elm` for a 'shj-lang-' class)
* @param {ShjDisplayMode} [mode] The display mode (guessed by default)
* @param {ShjOptions} [opt={}] Customization options
*/

@@ -127,13 +130,6 @@ export async function highlightElement(elm, lang = elm.className.match(/shj-lang-([\w-]+)/)?.[1], mode, opt) {

/**
* @function highlightAll
* @async
* @function highlightAll
* for all element that have a class name starting with "shj-lang-"
* this function will call highlightElement with the html element as argument
* The function will select those scheme for example:
* ```html
* <div class='shj-lang-[code-language]'>[code]</div>
* or
* <code class='shj-lang-[code-language]'>[inline code]</code>
* ```
* @param {HighlightOptions} [opt={}] other options
* Call highlightElement on element with a css class starting with `shj-lang-`
* @param {ShjOptions} [opt={}] Customization options
*/

@@ -144,1 +140,11 @@ export let highlightAll = async (opt) =>

.forEach(elm => highlightElement(elm, undefined, undefined, opt))
/**
* @function loadLanguage
* Load a language and add it to the langs object
* @param {String} languageName The name of the language
* @param {ShjLanguage} language The language
*/
export let loadLanguage = (languageName, language) => {
langs[languageName] = language;
}

@@ -50,4 +50,4 @@ export default [

type: 'class',
match: /[A-Z][\w_]*/g
match: /\b[A-Z][\w_]*\b/g
}
]

@@ -22,3 +22,3 @@ export default [

type: 'class',
match: /[A-Z][\w_]*/g
match: /\b[A-Z][\w_]*\b/g
},

@@ -25,0 +25,0 @@ {

@@ -26,4 +26,4 @@ export default [

type: 'class',
match: /[A-Z][\w_]*/g
match: /\b[A-Z][\w_]*\b/g
}
]

@@ -42,3 +42,3 @@ export default [

type: 'class',
match: /\b[A-Z]\w*\b/g
match: /\b[A-Z][\w_]*\b/g
},

@@ -45,0 +45,0 @@ {

@@ -50,4 +50,4 @@ export default [

type: 'class',
match: /\b[A-Z]\w*\b/g
match: /\b[A-Z][\w_]*\b/g
}
]

@@ -22,3 +22,3 @@ export default [

type: 'class',
match: /\b[A-Z]\w*\b/g
match: /\b[A-Z][\w_]*\b/g
},

@@ -25,0 +25,0 @@ {

@@ -1,26 +0,18 @@

const black = '\x1b[30m',
red = '\x1b[31m',
green = '\x1b[32m',
gray = '\x1b[90m',
yellow = '\x1b[33m',
blue = '\x1b[34m',
magenta = '\x1b[35m',
cyan = '\x1b[36m',
white = '\x1b[37m';
import col from '../color.js'
export default {
deleted: red,
var: red,
err: red,
kwd: red,
num: yellow,
class: yellow,
cmnt: gray,
insert: green,
str: green,
bool: cyan,
type: blue,
oper: blue,
section: magenta,
func: magenta
};
deleted: col.red,
var: col.red,
err: col.red,
kwd: col.red,
num: col.yellow,
class: col.yellow,
cmnt: col.gray,
insert: col.green,
str: col.green,
bool: col.cyan,
type: col.blue,
oper: col.blue,
section: col.magenta,
func: col.magenta
}

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc