code-fns

code-fns

A utility library for visualizing code.

Install

npm install code-fns

Purpose

Most code highlighters in JavaScript output HTML and CSS, but if your intended target isn't a web page, the tags and styles would then need to be translated to the desired form. code-fns outputs raw text and hex colors, making it easy to render the code in whichever form you choose. Specifically, code-fns was built for use in the Motion Canvas project, for visualizing code in videos and animations. code-fns may also compute the transformation between different code blocks, so that you may animate between them.

Compatibility

Supports all browsers and all maintained node versions, though you will need to use your own transpiler, as the package files use modern EcmaScript features. This ensures that you may configure your build as you wish.

Usage

To parse code into highlighted tokens, use language.langName to select your language, and parse to highlight it.

import { ready, language, parse } from './tags';

await ready({ langs: ['tsx'] });
const tsx = language.tsx;
parse(tsx`() => true`);

This will generate the following output.

[
  { code: '() ', color: '#c9d1d9' },
  { code: '=>', color: '#ff7b72' },
  { code: ' ', color: '#c9d1d9' },
  { code: 'true', color: '#79c0ff' },
];

You may then use templating to generate your code dynamically.

import { ready, language, parse } from './tags';

await ready({ langs: ['tsx'] });
const tsx = language.tsx;
const generate = (result: string) => tsx`(${result});`;
parse(generate('false'));

[
  { code: '(', color: '#c9d1d9' },
  { code: 'false', color: '#79c0ff' },
  { code: ');', color: '#c9d1d9' },
];

To compute the difference between two generated chunks of code, use diff.

import { ready, language, diff } from './tags';

await ready({ langs: ['tsx'] });
const tsx = language.tsx;
const generate = (result: string) => tsx`(${result});`;
diff(generate('true'), generate('false'));

[
  { code: '(', color: '#c9d1d9', morph: 'retain' },
  { code: 'true', color: '#79c0ff', morph: 'delete' },
  { code: 'false', color: '#79c0ff', morph: 'create' },
  { code: ');', color: '#c9d1d9', morph: 'retain' },
];

This can be helpful to create transitional animations between code, as in Motion Canvas.