bxp-code
An open-source React package that renders highlighted, auto-formatted code blocks — published to npm, fully typed, and backed by a live documentation site.
Overview
Every React project that shows code eventually needs the same three things: a syntax highlighter, a formatter, and a copy button — usually wired together by hand. bxp-code packages that into a single drop-in component so it can just be installed and used, with Shiki handling highlighting and Prettier formatting the code before it renders.
It's published as a public npm package with a full TypeScript API, a documentation site, and an interactive playground so people can try it before installing.
Highlights
- Published and actively maintained as a public npm package, with a fully typed API for TypeScript projects.
-
Built two components — a single code block and a tabbed
multi-snippet variant (
BxpCodeTabs) — sharing the same highlighting and formatting pipeline underneath. - Integrated Shiki for highlighting across 100+ languages and Prettier for automatic formatting, so consumers get clean output without configuring either tool themselves.
- Designed and shipped a documentation site plus a live playground for trying the component before installing it.
Example
Rendering a single highlighted block takes one component:
<BxpCode code={code} lang="javascript" theme="dark" showLineNumbers />