Unless you're a plugin or integration author, you should probably use a higher-level package like astro-expressive-code or rehype-expressive-code instead of this one.

Installation

npm install @expressive-code/core

Usage example

// 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)

FAQs

What is @expressive-code/core?

Is @expressive-code/core popular?

Is @expressive-code/core well maintained?

Package last updated on 13 Jan 2025

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.

Install

@expressive-code/core