https://github.com/dominictobias/babel-plugin-source-code
A babel plugin which allows you to render Prism syntax highlighted code snippets of files with 0 runtime cost
https://github.com/dominictobias/babel-plugin-source-code
Last synced: 27 days ago
JSON representation
A babel plugin which allows you to render Prism syntax highlighted code snippets of files with 0 runtime cost
- Host: GitHub
- URL: https://github.com/dominictobias/babel-plugin-source-code
- Owner: dominictobias
- Created: 2021-07-29T21:36:03.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-07-29T23:54:30.000Z (over 3 years ago)
- Last Synced: 2025-03-17T23:19:02.067Z (about 1 month ago)
- Language: JavaScript
- Size: 8.79 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# babel-plugin-source-code
Import file contents into your JSX `` blocks at build time. Great for syntax highlighting component examples.
# Installation
Install [Prism](https://github.com/PrismJS/prism/) as per their guide.
Install `yarn add -D babel-plugin-source-code` or `npm i -D babel-plugin-source-code`.
Add it to your babel plugins config:
```json
{
"plugins": ["babel-plugin-source-code"]
}
```
# Usage
Create your demos in separate files to the documentation:
```tsx
import { ButtonDemo } from './ButtonDemo'
export default function ButtonDocs() {
return (
)
}
```
Only use relative paths in `data-path`.