# remark-code-jsx-renderer
> A remark plugin to render JSX code blocks using a custom renderer and components
Latest version **1.1.10** (published 2024-08-28) · MIT license · 0 weekly downloads
## Install
```sh
npm install remark-code-jsx-renderer
pnpm add remark-code-jsx-renderer
yarn add remark-code-jsx-renderer
bun add remark-code-jsx-renderer
```
## Health
**Score 45/100 (D)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.
Warnings: low downloads.
Negative: abandoned.
## Facts
| | |
|---|---|
| Version | 1.1.10 |
| Published | 2024-08-28 |
| First published | 2023-09-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 15.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Beni Arisandi |
| Maintainers | bent10 |
| Keywords | remark, remark-plugin, jsx, react, javascriptreact, render, renderer, code, codefence, stilearning-remark-plugins |
## Links
- npm: https://www.npmjs.com/package/remark-code-jsx-renderer
- Repository: https://github.com/bent10/remark-plugins
- Homepage: https://github.com/bent10/remark-plugins/tree/main/packages/code-jsx-renderer
- Issues: https://github.com/bent10/remark-plugins/issues
- npm.io page: https://npm.io/package/remark-code-jsx-renderer
## Dependencies (5)
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.25.2
- [mdast-util-mdx](https://npm.io/package/mdast-util-mdx.md) ^3.0.0
- [attributes-parser](https://npm.io/package/attributes-parser.md) ^2.2.3
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.24.7
- [micromark-extension-mdxjs](https://npm.io/package/micromark-extension-mdxjs.md) ^3.0.0
## Alternatives
- [flatbuffers](https://npm.io/package/flatbuffers.md) — 6.0M weekly downloads
- [jwt-simple](https://npm.io/package/jwt-simple.md) — 259.5K weekly downloads
- [@exodus/patch-broken-hermes-typed-arrays](https://npm.io/package/@exodus/patch-broken-hermes-typed-arrays.md) — 28.5K weekly downloads
- [@native-to-anchor/buffer-layout](https://npm.io/package/@native-to-anchor/buffer-layout.md) — 12.2K weekly downloads
- [binary-parser-encoder](https://npm.io/package/binary-parser-encoder.md) — 5.3K weekly downloads
## Recent versions
- 1.1.10 (latest) — 2024-08-28
- 1.1.9 — 2024-04-21
- 1.1.8 — 2024-03-04
- 1.1.7 — 2024-02-03
- 1.1.6 — 2023-12-19
- 1.1.5 — 2023-10-30
- 1.1.4 — 2023-10-23
- 1.1.3 — 2023-10-14
- 1.1.2 — 2023-09-22
- 1.1.1 — 2023-09-22
- 1.1.0 — 2023-09-22
- 1.0.0 — 2023-09-21
## README
# remark-code-jsx-renderer
A [remark](https://github.com/remarkjs/remark) plugin to render JSX code blocks using a custom renderer and components. This plugin is especially useful when you want to incorporate React JSX code directly into your Markdown documents and control how it's rendered.
## Install
You can install the `remark-code-jsx-renderer` using npm or yarn:
```bash
npm i remark-code-jsx-renderer --save-dev
# or
yarn add remark-code-jsx-renderer --dev
```
## Usage
To use this plugin, you need to incorporate it into your remark processing pipeline. Here's an example of how to do it:
Say we have the following file `example.mdx`:
````md
This is some code:
```jsx renderable prettier
```
````
**🚨 Important:** The `renderable` attribute must be specified in code fence blocks for formatting the code.
And our module `example.js` looks as follows:
```js
import { readFileSync } from 'node:fs'
import * as runtime from 'react/jsx-runtime'
import { Nav } from 'react-bootstrap'
import { renderToStaticMarkup } from 'react-dom/server'
import { remark } from 'remark'
import remarkCodeFormat from 'remark-code-format'
import remarkCodeJsxRenderer from 'remark-code-jsx-renderer'
const content = readFileSync('example.mdx', 'utf-8')
const file = await unified()
.use(remarkCodeJsxRenderer, {
...runtime,
components: { Nav },
renderer: renderToStaticMarkup
})
.use(remarkCodeFormat, { htmlWhitespaceSensitivity: 'ignore' })
.process(content)
console.log(String(file))
```
Now, running node `example.js` yields:
````md
This is some code:
```html
```
````
> ⚠️ This plugin offers support for inline options, specifically tailored
> to the `unwrap` option. With inline options, you have fine-grained
> control over the behavior of the `unwrap` feature.
>
> ````md
> ```jsx renderable="{unwrap: true}"
> // jsx code here
> ```
> ````
## Options
This plugin accepts several options to customize its behavior:
### `components`
An object where keys represent component names and values are React component types. These components are used for rendering JSX code blocks.
```js
import { Alert, Button } from 'react-bootstrap'
processor.use(remarkCodeJsxRenderer, {
components: { Alert, Button }
})
```
### `Fragment`
Symbol to use for fragments. This option can be helpful if your JSX code specifically requires a particular type of Fragment.
```js
import { Fragment } from 'react/jsx-runtime'
processor.use(remarkCodeJsxRenderer, { Fragment })
```
### `jsx`
The `jsx` function to use when rendering JSX code. You can customize this function if your rendering process relies on a custom `jsx` implementation.
```js
import { jsx } from 'react/jsx-runtime'
processor.use(remarkCodeJsxRenderer, { jsx })
```
### `jsxs`
The `jsxs` function to use when rendering JSX code. Similar to `jsx`, this option allows you to customize the `jsxs` function if needed.
```js
import { jsxs } from 'react/jsx-runtime'
processor.use(remarkCodeJsxRenderer, { jsxs })
```
### `renderer`
A custom rendering function for rendering JSX code. This function should return a string. You can use this to render JSX using various methods, such as converting it to HTML or rendering it on the client-side.
```js
import { renderToStaticMarkup } from 'react-dom/server'
processor.use(remarkCodeJsxRenderer, { renderer: renderToStaticMarkup })
```
### `sanitizer`
The `sanitizer` option is an optional function that allows you to sanitize the JSX code before rendering. You can use this function to enhance security and prevent code injection.
```js
import { renderToStaticMarkup } from 'react-dom/server'
import xss from 'xss'
processor.use(remarkCodeJsxRenderer, { sanitizer: customSanitizer })
// Sanitize the JSX code using the xss library
// you can replace it with any sanitizer you want (e.g. DOMPurify)
function sanitizeJSX(jsxCode) {
const options = {
// Define your custom xss options here
}
return xss(jsxCode, options)
}
```
### `unwrap`
If `true`, the plugin will not wrap the rendered code in a `codefence` element.
## Related
- [remark-code-format](https://github.com/bent10/remark-plugins/tree/main/packages/code-format)
- [remark-code-preview](https://github.com/bent10/remark-plugins/tree/main/packages/code-preview)
## Contributing
We 💛 issues.
When committing, please conform to [the semantic-release commit standards](https://www.conventionalcommits.org/). 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
A project by [Stilearning](https://stilearning.com) © 2023.
---
_Source: https://npm.io/package/remark-code-jsx-renderer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._