Syntax highlighting component for Ink, powered by Prism.
$ npm i ink-prism
const React = require("react")
const Ink = require("ink")
const { Code } = require("ink-prism")
const code = `
const React = require("react")
const Ink = require("ink")
const { Code } = require("ink-prism")
Ink.render(
<Code language="js">
console.log("Syntax highlighting!")
</Code>
)`
Ink.render(<Code language="js">{code}</Code>)
The only component; its content's syntax will be highlighted.
The language to highlight the code as. It will be automatically hyphen-case
d, so you can use camelCase
if you want to.
- Type:
string
- Required
See loadLanguage()
.
The theme to highlight the code with.
- Type:
string
- Default:
"prism"
See loadTheme()
.
The number of spaces to replace all tab (\t
) characters with, if any.
- Type:
number
- Default:
4
Whether to "fill" remaning space after every newline, as to make the background color show as a block, instead of as the shape of the text.
- Type:
boolean
- Default:
true
This component also has 7 other properties which are not listed individually; paddingTop
, paddingBottom
, paddingLeft
, paddingRight
, paddingX
, paddingY
and padding
. You can either guess what these do, or check out Ink's Box's padding props.
- Type:
number
- Default:
0
By default, only a few languages are loaded into memory; markup
, (alias: html
, mathml
, svg
, xml
, ssml
, atom
, rss
), css
, clike
, and javascript
(alias: js
).
Use this method to load one of the built-in languages into memory.
This method is synchronous. Currently, there is no way to load languages asynchronously.
The name of the language to load. It will be automatically hyphen-case
d, so you can use camelCase
if you want to.
- Type:
string
- Required
Load all of the built-in languages into memory. Make sure you actually want to use this method, as there are a lot of languages (more than 200).
This method is synchronous. Currently, there is no way to load languages asynchronously.
Create a language with your own grammar definitions.
The name of the language to add.
- Type:
string
- Required
The grammar object of the language.
- Type:
Prism.Grammar
- Required
The name of an existing language to extend.
- Type:
string
- Default:
undefined
By default, only the prism
theme is loaded into memory. Use this method to load one of the built-in themes into memory.
This method is synchronous. Currently, there is no way to load themes asynchronously.
The name of the language to load.
- Type:
string
- Required
Load all of the built-in themes into memory. There aren't that many built-in themes, so this shouldn't pose serious performance issues, though it should still not be necessary in normal circumstances.
This method is synchronous. Currently, there is no way to load themes asynchronously.
Create a theme with your own colors.
The name of the theme to add.
- Type:
string
- Required
The theme data.
- Type:
Theme
- Required
Themes in ink-prism
are defined differently from Prism themes, as you can't really use CSS in Ink.
First of all, all colors must be in hex format (#RGB
, #RGBA
, #RRGGBB
, or #RRGGBBAA
). The theme must have a background
property, defining the background color. Then, a color
property, which will be used for all non-highlighted (default) text.
Finally, a tokens
property, mapping every token name (comment
, punctuation
, function
, ...) to its color. These colors can not only be a plain string, but also an object containing the bold
or italic
boolean properties.
Here's an example. (There are more tokens than that; they were removed for the sake of simplicity):
module.exports = {
background: "#f5f2f0",
color: "#000000",
tokens: {
comment: { italic: true, color: "#708090" },
namespace: "#000000b3", // rgba(0, 0, 0, 0.7)
bold: { bold: true, color: "#000" },
italic: { italic: true, color: "#000" }
}
}
Here's the full version of the default theme, Prism. Check out the other built-in themes for more examples, and feel free to make a Pull Request with any themes you want to add into this module!