PrismJS syntax highlighting for the terminal
npm install prismjs-terminalPrismJS, but for terminal output.
``js
// ESM only, sorry, blame chalk
// But less reason to use CommonJS for new CLI apps anyway
import { highlight } from 'prismjs-terminal'
// get some code somehow
import { readFileSync } from 'fs'
const code = readFileSync('some-file.ts', 'utf8')
// highlight it
console.log(highlight(code, 'typescript'))
`
Instead of CSS, themes are defined using an object with
styling functions that take a string and return a string.
The _ style rule applies to the block as a whole, and is usedcode[class*="language-"]
as the default style. This is where you'd usually port a PrismJS
theme's css rule.
The lineNumber style rule will apply to line numbers, if they
are used.
The semantics are similar to CSS, where a nested property will be
applied to nodes within that nesting stack with a higher
priority the more tags that match, and later rules taking
precedence over earlier ones. It's _not_ a full CSS selector
syntax though, so things like .token.italic.bold aren't
supported. Just individual token class names, possibly nested.
Also, chalk is not CSS, and a terminal is not a browser, so
there are some differences and limitations of course.
Aliases are also not supported, styles have to be applied to the
actual parsed class names PrismJS provides.
For example:
`js
import { defaultTheme, Theme } from 'prismjs-terminal'
import chalk from 'chalk'
const theme: Theme = {
// any (s:string)=>string function is allowed
comment: chalk.hex('#d75fff').italic,
// can provide multiple functions, which is useful if they
// aren't chainable chalk methods
function: [chalk.hex('#f08'), s => >${s}< ],
// nest by separating with a space
// will turn /abc/gm into:
// chalk.bold('/' + chalk.green('abc') + '/' + chalk.blue('gm'))
regex: chalk.bold,
'regex regex-source': chalk.green,
'regex regex-flags': chalk.blue,
// apply one style to multiple token names by separating with ,
'string, number': chalk.green,
// See the defaultTheme export for more examples.
}
console.log(highlight(code, 'typescript', { theme }))
// can also use one of the included ones
console.log(highlight(code, 'typescript', { theme: 'xonokai' }))
`
See the themes directory in this repo for more
examples.
- interface PrismJSTerminalOpts
- theme The theme to use. Either a Theme object, or a'moria'
string identifying one of the built-in themes. Defaults to
.language
- The language of the supplied code to highlight.tsx
Defaults to if no filename is provided, or elseloadLanguages([...])
tries to infer the language from the filename. You must
have previously called fromPrismJS
in order to highlight a given language, if youtsx
want something that is not automatically included when
and typescript are included.minWidth
- The minimum width to make the block on the0
screen. Defaults to .maxWidth
- The maximum width to make the block on theprocess.stdout.columns
screen. Defaults to or 80.padding
- How many spaces to horizontally pad the code1
block. Defaults to .lineNumbers
- Whether or not to prepend a line number to eachfalse
line. Defaults to .
- highlight(code: string, opts?: PrismJSTerminalOpts): string
Highlight the string of code provided, returning the string of
highlighted code.
- highlightFile(filename: string, opts?: PrismJSTerminalOpts): Promise
Read the filename provided, and highlight its code. If a
language is not provided in the opts, it will attempt to infer
from the filename.
- highlightFileSync(filename: string, opts?: PrismJSTerminalOpts): string
Synchronous highlightFile.
- Themes:
More are welcome! If you have a PrismJS theme you like, do
send a PR. Of course not everything translates, but it's quite
straightforward to take a PrismJS CSS file and turn all the
color: #... lines into chalk.hex('#...') calls.
Theme objects can be either a Map or object where the keys are
the selectors and the values are either a styling function or
an array of styling functions to be applied in order.
- debug This just dumps the code wrapped in plain
to see what the token names are. Useful for tests and such.
- No styling, just the code as plain text.github
- Port of GHColors prismjs theme.moria
- Inspired by Vim Moria color scheme.prismDark
- Port of the prism-dark PrismJS theme.xonokai
- Port of the xonokai` PrismJS theme.