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-cased, 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-cased, 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!