babel-source-code

Convert JSX code elements to Prism syntax highlighted code blocks at build time (not runtime cost).

Usage no npm install needed!

<script type="module">
  import babelSourceCode from 'https://cdn.skypack.dev/babel-source-code';
</script>

README

babel-source-code

A plugin for projects using babel and JSX which can expand <code> tags pointing at local files to Prism syntax highlighted code blocks at build time (no runtime cost). Great for React based documentation websites.

At present the Prism supported languages are hardcoded to: bash, javascript, typescript, jsx, tsx, css, markup.

Installation

Install with yarn add -D babel-source-code or npm i -D babel-source-code.

Add it to your babel plugins config:

{
  "plugins": ["babel-source-code"]
}

Usage

Import a Prism theme in your app:

import 'prismjs/themes/prism-twilight.css'

Create your demos in seperate files to the documentation:

export default function ButtonDocs() {
  return (
    <DocLayout title="Buttons">
      <MyButtonDemo />
      <code data-path="./MyButtonDemo.tsx" data-lang="tsx" />
    </DocLayout>
  )
}