# @expressive-code/core

> A text marking & annotation engine for presenting source code on the web.

Latest version **0.44.2** (published 2026-08-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install @expressive-code/core
pnpm add @expressive-code/core
yarn add @expressive-code/core
bun add @expressive-code/core
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.44.2 |
| Published | 2026-08-31 |
| First published | 2023-05-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 9 |
| Unpacked size | 620.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 966 |
| Author | Tibor Schiemann |
| Maintainers | hippotastic, delucis |

## Links

- npm: https://www.npmjs.com/package/@expressive-code/core
- Repository: https://github.com/expressive-code/expressive-code
- Homepage: https://github.com/expressive-code/expressive-code#readme
- Issues: https://github.com/expressive-code/expressive-code/issues
- npm.io page: https://npm.io/package/@expressive-code/core

## Dependencies (9)

- [postcss](https://npm.io/package/postcss.md) ^8.4.38
- [hastscript](https://npm.io/package/hastscript.md) ^9.0.0
- [postcss-nested](https://npm.io/package/postcss-nested.md) ^6.0.1
- [@ctrl/tinycolor](https://npm.io/package/@ctrl/tinycolor.md) ^4.0.4
- [hast-util-select](https://npm.io/package/hast-util-select.md) ^6.0.2
- [unist-util-visit](https://npm.io/package/unist-util-visit.md) ^5.0.0
- [hast-util-to-html](https://npm.io/package/hast-util-to-html.md) ^9.0.1
- [hast-util-to-text](https://npm.io/package/hast-util-to-text.md) ^4.0.1
- [unist-util-visit-parents](https://npm.io/package/unist-util-visit-parents.md) ^6.0.1

## Recent versions

- 0.44.2 (latest) — 2026-08-31
- 0.44.1 — 2026-07-20
- 0.44.0 — 2026-06-25
- 0.43.1 — 2026-06-09
- 0.43.0 — 2026-06-08
- 0.42.0 — 2026-05-04
- 0.41.7 — 2026-02-23
- 0.41.6 — 2026-01-15
- 0.41.5 — 2025-12-16
- 0.41.4 — 2025-12-11
- 0.41.3 — 2025-07-05
- 0.41.2 — 2025-04-22
- 0.41.1 — 2025-04-13
- 0.41.0 — 2025-04-12
- 0.40.2 — 2025-02-11
- … 78 more at https://npm.io/package/@expressive-code/core/versions

## README

# @expressive-code/core

The core package of [Expressive Code](https://expressive-code.com/), an engine for presenting source code on the web.

## Documentation

[Read the Expressive Code docs](https://expressive-code.com/) to learn more about the features provided by Expressive Code.

## When should I use this?

Using this core package directly is **only recommended for advanced use cases**.

Unless you're a plugin or integration author, you should probably use a higher-level package like [`astro-expressive-code`](https://www.npmjs.com/package/astro-expressive-code) or [`rehype-expressive-code`](https://www.npmjs.com/package/rehype-expressive-code) instead of this one.

## Installation

```bash
npm install @expressive-code/core
```

## Usage example

```js
// File: generate-html-core.mjs

import { ExpressiveCodeEngine } from '@expressive-code/core'
import { toHtml } from '@expressive-code/core/hast'
import fs from 'fs'

const ec = new ExpressiveCodeEngine({
  plugins: [
    // Add your plugins here
  ],
})

// Get base styles that should be included on the page
// (they are independent of the rendered code blocks)
const baseStyles = await ec.getBaseStyles()
const themeStyles = await ec.getThemeStyles()
const jsModules = await ec.getJsModules()

const renderResult = await ec.render({
  code: 'console.log("Hello world!")',
  language: 'js',
  meta: '',
})

// Output results to the console
console.dir({
  baseStyles,
  themeStyles,
  blockStyles: renderResult.styles,
  htmlContent: toHtml(renderResult.renderedGroupAst),
})

// Convert the rendered AST to HTML
let htmlContent = toHtml(renderResult.renderedGroupAst)

// Collect styles and add them before the HTML content
const stylesToPrepend = []
stylesToPrepend.push(baseStyles)
stylesToPrepend.push(themeStyles)
stylesToPrepend.push(...renderResult.styles)

const styleContent = `<style> ${[...stylesToPrepend].join('')} </style>`
const jsContent = `<script type="module"> ${[...jsModules].join('')} </script>`

const htmlDocument = `
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    ${styleContent}

    ${jsContent}
</head>
<body>
    ${htmlContent}
</body>
</html>
`

// Output HTML to the console
console.log(htmlDocument)

// Run `node generate-html.mjs` to generate the HTML file
// and open it in the browser
fs.writeFileSync('index.html', htmlDocument)
```

---
_Source: https://npm.io/package/@expressive-code/core · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._