https://github.com/shahradelahi/ts-code-frame
🖼️ Visual terminal code frame pointer generator
https://github.com/shahradelahi/ts-code-frame
code-frame error-highlighting syntax-error terminal-pointer typescript visual-reporting
Last synced: 11 days ago
JSON representation
🖼️ Visual terminal code frame pointer generator
- Host: GitHub
- URL: https://github.com/shahradelahi/ts-code-frame
- Owner: shahradelahi
- License: mit
- Created: 2026-06-18T12:49:10.000Z (19 days ago)
- Default Branch: main
- Last Pushed: 2026-06-23T10:50:34.000Z (14 days ago)
- Last Synced: 2026-06-23T12:53:05.824Z (14 days ago)
- Topics: code-frame, error-highlighting, syntax-error, terminal-pointer, typescript, visual-reporting
- Language: TypeScript
- Homepage: https://npmjs.com/@se-oss/code-frame
- Size: 53.7 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
ts-code-frame
_ts-code-frame_ is a visual terminal code frame pointer generator.
---
- [Installation](#-installation)
- [Usage](#-usage)
- [Documentation](#-documentation)
- [Contributing](#-contributing)
- [License](#license)
## 📦 Installation
```bash
pnpm add @se-oss/code-frame
```
Install using your favorite package manager
**npm**
```bash
npm install @se-oss/code-frame
```
**yarn**
```bash
yarn add @se-oss/code-frame
```
## 📖 Usage
### Basic Usage
Use `createCodeFrame` to generate a pointer at a specific string index.
```ts
import { createCodeFrame } from '@se-oss/code-frame';
const code = 'const a = 1;\nconst b = 2;\nconst c = 3;';
const result = createCodeFrame(code, 15);
console.log(result);
```
### Advanced Code Frame
Use `codeFrameColumns` to specify exact line and column ranges.
```ts
import { codeFrameColumns } from '@se-oss/code-frame';
const code = 'const a = 1;\nconst b = 2;\nconst c = 3;';
const result = codeFrameColumns(code, {
start: { line: 2, column: 7 },
end: { line: 2, column: 8 },
});
console.log(result);
```
### Inline Messages
Add custom messages pointing to the error location.
```ts
const result = codeFrameColumns(
code,
{ start: { line: 2, column: 7 } },
{ message: 'Unexpected token' }
);
```
### Syntax Highlighting
Enable colored output using native node utility styling.
```ts
const result = codeFrameColumns(
code,
{ start: { line: 2, column: 7 } },
{ highlightCode: true }
);
```
### Custom Line Boundaries
Control context windows above and below the error.
```ts
const result = codeFrameColumns(
code,
{ start: { line: 2, column: 7 } },
{
linesAbove: 1,
linesBelow: 1,
}
);
```
### Highlight Utility
Manually syntax highlight code snippets.
```ts
import { highlight } from '@se-oss/code-frame';
const colored = highlight('const x = 42;');
```
## 📚 Documentation
For all configuration options, please see [the API docs](https://www.jsdocs.io/package/@se-oss/code-frame).
## 🤝 Contributing
Want to contribute? Awesome! To show your support is to star the project, or to raise issues on [GitHub](https://github.com/shahradelahi/ts-code-frame).
Thanks again for your support, it is much appreciated! 🙏
## License
[MIT](/LICENSE) © [Shahrad Elahi](https://github.com/shahradelahi) and [contributors](https://github.com/shahradelahi/ts-code-frame/graphs/contributors).