ink-prism v1.0.0
ink-prism
Syntax highlighting component for Ink, powered by Prism.
Installation
$ npm i ink-prism
Usage
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>)
<Code />
The only component; its content's syntax will be highlighted.
Props
language
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()
.
theme
The theme to highlight the code with.
- Type:
string
- Default:
"prism"
See loadTheme()
.
tabSize
The number of spaces to replace all tab (\t
) characters with, if any.
- Type:
number
- Default:
4
fill
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
padding
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
loadLanguage()
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.
Parameters
name
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
loadAllLanguages()
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.
addLanguage()
Create a language with your own grammar definitions.
Parameters
name
The name of the language to add.
- Type:
string
- Required
grammar
The grammar object of the language.
- Type:
Prism.Grammar
- Required
extend
The name of an existing language to extend.
- Type:
string
- Default:
undefined
loadTheme()
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.
Parameters
name
The name of the language to load.
- Type:
string
- Required
loadAllThemes()
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.
addTheme()
Create a theme with your own colors.
name
The name of the theme to add.
- Type:
string
- Required
grammar
The theme data.
- Type:
Theme
- Required
Theme
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!
4 years ago