remark-code-preview

A remark plugin designed 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.

Install

You can install remark-code-preview using npm or yarn:

``bash
npm install remark-code-preview --save-dev


or

To use remark-code-preview in your remark-based Markdown processing pipeline, you need to configure your remark processor with this plugin. Here's an example of how to do it:

Say we have the following file example.mdx:

``md


Example

`html preview title="Code title"


And our module example.js looks as follows:

`js
import { readFile } from 'node:fs/promises'
import { remark } from 'remark'
import rehypeRaw from 'rehype-raw'
import rehypeStringify from 'rehype-stringify'
import remarkCodePreview from 'remark-code-preview'
import remarkRehype from 'remark-rehype'

remark()
.use(remarkCodePreview)
.use(remarkRehype, { allowDangerousHtml: true })
.use(rehypeRaw)
.use(rehypeStringify, { allowDangerousHtml: true })
.process(await readFile('example.mdx'), (err, file) => {
if (err) throw err
console.log(String(file))
})
`

Now, running node example.js yields:

`html


Example

<div class='foo'>Hello, World!</div>

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.

The default template looks like this:

`html


`js
import { readFile } from 'node:fs/promises'
import { remark } from 'remark'
import remarkCodePreview from 'remark-code-preview'

const customTemplate =

remark()
.use(remarkCodePreview, { template: customTemplate })
.process(await readFile('example.mdx'), (err, file) => {
if (err) throw err
console.log(String(file))
})
`

Yields:

`md


Example

By default, the plugin throws a MissingValueError when a placeholder resolves to undefined. Setting this option to true ignores it and leaves the placeholder as is.

$3

Whether to support MDX compiler.

$3

Performs an arbitrary operation for each interpolation. You can define a custom transformation function for the interpolated values.

Default transformation:

`js
;({ value }) => value
`

Related

- remark-code-format
- remark-code-jsx-renderer

Contributing

We 💛  issues.

When committing, please conform to the semantic-release commit standards. Please install commitizen and the adapter globally, if you have not already.

`bash
npm i -g commitizen cz-conventional-changelog
`

Now you can use git cz or just cz instead of git commit when committing. You can also use git-cz, which is an alias for cz.

`bash
git add . && git cz
``

License

!GitHub

A project by Stilearning © 2023.