ink-prism

ink-prism

Syntax highlighting component for Ink, powered by Prism.

• Installation
• Usage
  • <​Code /​>
  • loadLanguage()
  • loadAllLanguages()
  • addLanguage()
  • loadTheme()
  • loadAllThemes()
  • addTheme()
  • Theme

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

See Prism.languages.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!