emaland/vscat

Bringing VS Code syntax highlighting to the terminal!

vscat

Bringing VS Code syntax highlighting to the terminal!

• Get started with the TypeScript/JavaScript API
• Get started with the terminal CLI

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:

1. Improved code readability.
2. Easier and faster code reviews.
3. 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.