npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

marked-code-jsx-renderer

v1.2.9

Published

A marked extension to render JSX code blocks using a custom renderer and components

Downloads

117

Readme

marked-code-jsx-renderer

A marked extension to render JSX code blocks using a custom renderer and components. This extension 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 marked-code-jsx-renderer using npm or yarn:

npm i -D marked-code-jsx-renderer
# or
yarn add --dev marked-code-jsx-renderer

⚠️ NOTE: This extension exclusively supports server-side operations and is not compatible with web browsers.

Usage

To use this extension, you need to incorporate it into your marked processing pipeline. Here's an example of how to do it:

Say we have the following file example.md:

This is some code:

```jsx renderable prettier
<Nav>
  <Nav.Item>
    <Nav.Link href='/features'>Features</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link href='/pricing'>Pricing</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link href='/about'>About</Nav.Link>
  </Nav.Item>
</Nav>
```

🚨 Important: The renderable attribute must be specified in code fence blocks!

And our module example.js looks as follows:

import { readFileSync } from 'node:fs'
import { Marked } from 'marked'
import markedCodeFormat from 'marked-code-format'
import markedCodeJsxRenderer from 'marked-code-jsx-renderer'

// runner
import * as runtime from 'react/jsx-runtime'
import { Nav } from 'react-bootstrap'
import { renderToStaticMarkup } from 'react-dom/server'

const content = readFileSync('example.md', 'utf-8')

const html = await new Marked({ async: true })
  .use(
    markedCodeJsxRenderer({
      ...runtime,
      components: { Nav },
      renderer: renderToStaticMarkup
    })
  )
  .use(markedCodeFormat())
  .parse(content)

console.log(html)

Now, running node example.js yields:

<p>This is some code:</p>
<pre><code class="language-html">&lt;div class=&quot;nav&quot;&gt;
  &lt;div class=&quot;nav-item&quot;&gt;
    &lt;a href=&quot;/features&quot; data-rr-ui-event-key=&quot;/features&quot; class=&quot;nav-link&quot;
      &gt;Features&lt;/a
    &gt;
  &lt;/div&gt;
  &lt;div class=&quot;nav-item&quot;&gt;
    &lt;a href=&quot;pricing&quot; data-rr-ui-event-key=&quot;pricing&quot; class=&quot;nav-link&quot;
      &gt;Pricing&lt;/a
    &gt;
  &lt;/div&gt;
  &lt;div class=&quot;nav-item&quot;&gt;
    &lt;a href=&quot;about&quot; data-rr-ui-event-key=&quot;about&quot; class=&quot;nav-link&quot;&gt;About&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

ℹ️ This extension 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.

```jsx renderable="{unwrap: true}"
// jsx code here
```

Options

This extension 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.

import { Alert, Button } from 'react-bootstrap'

marked.use(
  markedCodeJsxRenderer({
    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.

import { Fragment } from 'react/jsx-runtime'

marked.use(markedCodeJsxRenderer({ 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.

import { jsx } from 'react/jsx-runtime'

marked.use(markedCodeJsxRenderer({ 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.

import { jsxs } from 'react/jsx-runtime'

marked.use(markedCodeJsxRenderer({ 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.

import { renderToStaticMarkup } from 'react-dom/server'

marked.use(markedCodeJsxRenderer({ 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.

import { renderToStaticMarkup } from 'react-dom/server'
import xss from 'xss'

marked.use(markedCodeJsxRenderer({ 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)
}

errorHandler

Implement monitoring and logging mechanisms to keep track of any unusual or potentially malicious activities during transformation, if the markdown input contains untrusted or user-generated content.

// in this example, errors will be logged to the console for debugging and monitoring purposes.
marked.use(markedCodeJsxRenderer({ errorHandler: console.error }))
// you can replace console.error with a more advanced logging solution like Winston or Morgan
// for better error tracking and management.

unwrap

If true, the extension will not wrap the rendered code in a codefence element. Based on the example above, this will result in the following output:

<p>This is some code:</p>
<div class="nav">
  <div class="nav-item">
    <a href="/features" data-rr-ui-event-key="/features" class="nav-link"
      >Features</a
    >
  </div>
  <div class="nav-item">
    <a href="pricing" data-rr-ui-event-key="pricing" class="nav-link"
      >Pricing</a
    >
  </div>
  <div class="nav-item">
    <a href="about" data-rr-ui-event-key="about" class="nav-link">About</a>
  </div>
</div>

Security considerations

It's essential to be aware of potential security risks, especially when the markdown input contains untrusted or user-generated content. Here are some security considerations when using this extension:

  • Code Injection: This extension uses the new Function constructor to dynamically create a function from the transformed code. While this is a common technique for rendering JSX, it can be risky if the input code contains malicious code. Ensure that you thoroughly sanitize and validate the input code to prevent code injection attacks.

  • Untrusted Markdown: If your application allows users to input markdown content, there is a risk of users injecting malicious code within code blocks. Make sure to sanitize and validate user-generated markdown content to prevent any security vulnerabilities.

  • Error Handling: The code includes an error handling mechanism (errorHandler) to catch and handle exceptions. While this is a good practice, be cautious not to expose sensitive information in error messages, which could aid attackers in understanding your system's architecture.

Related

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.

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.

git add . && git cz

License

GitHub

A project by Stilearning © 2023-2024.