vscat

Bringing VS Code syntax highlighting to the terminal!

Why?

VS Code has developed phenomenally over the last few years, making it the de facto code editor for millions of developers. With extensive styling and theming, developers quickly became comfortable with its syntax highlighting. Having consistent highlighting means:

Improved code readability.
Easier and faster code reviews.
Consistent and clear diagnostic messages.

Unfortunately, this did not translate to CLI tools that the same developers use. This library aims to bridge the gap by bringing VS Code grammars and themes to the terminal. We hope that future build tools, apis, and linters can adopt it to provide a consistent experience accross all surfaces.

Features

Highlighting Source Files

📄 `typescript` 🖌 `default-dark-plus`	📄 `cpp` 🖌 `default-light-plus`

📄 `json` 🖌 `abyss`	📄 `python` 🖌 `default-high-contrast`

Highlighting Diffs and Patches

📄 `html` 🖌 `default-dark-plus`	📄 `python` 🖌 `tomorrow-night-blue`

Highlighting Diagnostics

📄 `javascriptreact` 🖌 `default-high-contrast`	📄 `javascriptreact` 🖌 `default-high-contrast`

📄 `javascriptreact` 🖌 `default-high-contrast`	📄 `javascriptreact` 🖌 `default-high-contrast`

57 Available languages

We support all built in VS Code languages. You can also pass the explicit path to a text mate grammar file if you would like to use a custom language. By default, we try to automatically detect the file's language based on VS Code's file detection rules.

`bat`	`c`	`clojure`	`coffeescript`	`cpp`
`csharp`	`css`	`cuda-cpp`	`dart`	`diff`
`dockercompose`	`dockerfile`	`fsharp`	`git-commit`	`git-rebase`
`go`	`groovy`	`handlebars`	`hlsl`	`html`
`ignore`	`ini`	`jade`	`java`	`javascript`
`javascriptreact`	`json`	`jsonc`	`julia`	`less`
`log`	`lua`	`makefile`	`markdown`	`objective-c`
`objective-cpp`	`perl`	`perl6`	`php`	`powershell`
`properties`	`python`	`r`	`razor`	`ruby`
`rust`	`scss`	`shaderlab`	`shellscript`	`sql`
`swift`	`typescript`	`typescriptreact`	`vb`	`xml`
`xsl`	`yaml`

14 Available Themes

We support all built in VS Code themes. You can also pass the explicit path to a custom theme file if you would like to use a custom theme.

ID	Name	Example
`abyss`	Abyss
`default-dark-plus`	Default Dark+
`kimbie-dark`	Kimbie Dark
`monokai`	Monokai
`monokai-dimmed`	Monokai Dimmed
`red`	Red
`solarized-dark`	Solarized Dark
`tomorrow-night-blue`	Tomorrow Night Blue
`visual-studio-dark`	Visual Studio Dark
`default-high-contrast`	Default High Contrast
`default-light-plus`	Default Light+
`quiet-light`	Quiet Light
`solarized-light`	Solarized Light
`visual-studio-light`	Visual Studio Light

Roadmap

We released the first version of this library to gauge interest and assess further investment areas. Please open an issue to give feedback on your use-case, or how can this library serve you better. Here are some of the features on our roadmap:

Supporting nested languages (#2)
Supporting advanced decorators, like underlines, background colors (#3)
Supporting diffing individual characters in diff view (#4)

Testing

You can write automated tests for the output of this library, either by taking snapshots and comparing the raw ANSI output, or by combining this with a library like terminal-screenshot. This library uses XTerm.js to render real terminal output, and saves a screenshot as an image. You can also combine it with jest-image-snapshot to persist and diff these images using Jest.

import vscat from "vscat";
import {renderScreenshot} from "terminal-screenshot";

it("can highlight source code", async () => {
  const output = await vscat.highlightSource({sourceCode, ...});
  const image = await renderScreenshot({output, ...});

  expect(image).toMatchImageSnapshot();
});

Help and Support

Please use GitHub Issues to report any issues, or ask questions.

vscat

vscat

Why?