> 从remark-code-preview修改

Install

You can install @thinke/remark-plugin-code-preview using npm or yarn:

``bash
npm install @thinke/remark-plugin-code-preview --save-dev


or

To use @thinke/remark-plugin-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
``