
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
A utility library for visualizing code.
npm install code-fns
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.
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.
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.
FAQs
A library for visualizing code.
The npm package code-fns receives a total of 570 weekly downloads. As such, code-fns popularity was classified as not popular.
We found that code-fns demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.