[![npm version][npm-image]][npm-url]
[![downloads][downloads-image]][npm-url]
[![build status][build-image]][build-url]
[![coverage status][coverage-image]][coverage-url]

awesome-code-frame

What is this?

This is a fork of @babel/code-frame with the latest dependencies (e.g of chalk) and exported as a [pure ESM][pure-esm] package. It uses the latest chalk, which means it requires support for package imports. If this causes problems in Jest for you, see this issue for help.

Usage

The package exports a function codeFrameColumns() which works just like @babel/code-frame although all dependent types are exported too.

``ts codeFrameColumns( rawLines: string, loc: NodeLocation, opts?: Options ): string;`

where NodeLocation is defined as:

`ts interface NodeLocation { start: Location; end?: Location; }`

Location as:

`ts interface Location { column: number; line: number; };`

and Options as:

`ts export interface Options { /** * Syntax highlight the code as JavaScript for terminals. default: false / highlightCode?: boolean; /** * The number of lines to show above the error. default: 2 / linesAbove?: number; /** * The number of lines to show below the error. default: 3 / linesBelow?: number; /** * Forcibly syntax highlight the code as JavaScript (for non-terminals); * overrides highlightCode. * default: false */ forceColor?: boolean; /** * Pass in a string to be displayed inline (if possible) next to the * highlighted location in the code. If it can't be positioned inline, * it will be placed above the code frame. * default: nothing */ message?: string; }``

[npm-image]: https://img.shields.io/npm/v/awesome-code-frame.svg
[npm-url]: https://npmjs.org/package/awesome-code-frame
[downloads-image]: https://img.shields.io/npm/dm/awesome-code-frame.svg
[build-image]: https://img.shields.io/github/actions/workflow/status/grantila/awesome-code-frame/master.yml?branch=master
[build-url]: https://github.com/grantila/awesome-code-frame/actions?query=workflow%3AMaster
[coverage-image]: https://coveralls.io/repos/github/grantila/awesome-code-frame/badge.svg?branch=master
[coverage-url]: https://coveralls.io/github/grantila/awesome-code-frame?branch=master
[pure-esm]: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c

Usage

The package exports a function codeFrameColumns() which works just like @babel/code-frame although all dependent types are exported too.

ts
codeFrameColumns( rawLines: string, loc: NodeLocation, opts?: Options ): string;

where NodeLocation is defined as:

ts
interface NodeLocation {
    start: Location;
    end?: Location;
}

Location as:

ts
interface Location {
    column: number;
    line: number;
};

and Options as:

ts
export interface Options {
  /**
   * Syntax highlight the code as JavaScript for terminals. default: false
    /
  highlightCode?: boolean;
  /**
   * The number of lines to show above the error. default: 2
    /
  linesAbove?: number;
  /**
   * The number of lines to show below the error. default: 3
    /
  linesBelow?: number;
  /**
   * Forcibly syntax highlight the code as JavaScript (for non-terminals);
   * overrides highlightCode.
   * default: false
   */
  forceColor?: boolean;
  /**
   * Pass in a string to be displayed inline (if possible) next to the
   * highlighted location in the code. If it can't be positioned inline,
   * it will be placed above the code frame.
   * default: nothing
   */
  message?: string;
}