# marked-code-preview
A [marked](https://marked.js.org/) extension to transform code blocks within Markdown documents into code previews. It allows you to generate visually appealing code previews for your code snippets within your Markdown content. You can customize the appearance and behavior of code previews using [templates and options](#options).
## Install
You can install `marked-code-preview` using npm or yarn:
```bash
npm i marked-code-preview
# or
yarn add marked-code-preview
```
## Usage
To use this extension in your Marked processing pipeline, you need to configure your marked processor with this extension. Here's an example of how to do it:
### Browser
Say we have the following file `example.html`:
```html
Marked code preview extension
```
[](https://untitled-dkvdhhd08twr.runkit.sh/)
### Node.js
Say we have the following file `example.md`:
````md
# Example
```html preview title="Code title"
Hello, World!
```
````
**🚨 Important:** The `preview` attribute must be specified in code fence blocks.
And our module `example.js` looks as follows:
```js
import { readFileSync } from 'node:fs'
import { marked } from 'marked'
import markedCodePreview from 'marked-code-preview'
const html = marked
.use({ gfm: true })
.use(markedCodePreview)
.parse(readFileSync('example.md', 'utf8'))
console.log(html)
```
Now, running `node example.js` yields:
```html
Example
Code title
Hello, World!
<div class='foo'>Hello, World!</div>
```
## Options
This extension accepts the following options:
### `template?: string`
The code preview template to use. You can customize the preview layout using placeholders like `{preview}`, `{code}`, codefence meta data (e.g. `{title}`), and your custom [data](#data--key-string-unknown-).
The default template looks like this:
```html
{title}
{preview}
{code}
```
You can customize the template according to your needs. For example:
```js
import { readFileSync } from 'node:fs'
import { marked } from 'marked'
import markedCodePreview from 'marked-code-preview'
const customTemplate = `