Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@mapbox/babel-plugin-transform-jsxtreme-markdown

Package Overview
Dependencies
Maintainers
28
Versions
18
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@mapbox/babel-plugin-transform-jsxtreme-markdown

Transform Markdown interpolated with JS expressions and JSX elements at compile time

  • 3.1.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
28
Created
Source

@mapbox/babel-plugin-transform-jsxtreme-markdown

Transform Markdown interpolated with JS expressions and JSX elements into pure JSX, at compile time.

Uses jsxtreme-markdown to compile the interpolated Markdown.

For more information about jsxtreme-markdown features, read the README at the root of this monorepo.

Installation

npm install @mapbox/babel-plugin-transform-jsxtreme-markdown

Usage

Transforms a special tagged template literal.

require or import the (fake) package '@mapbox/babel-plugin-transform-jsxtreme-markdown/md', or whatever you've specified as packageName in your Babel options. Then use that (fake) module's export as a template literal tag, marking the template literals you'd like to be compiled at run time.

If React is not already in the file's top-level scope, var React = require('react'); will be added to the beginning of the file.

// Input
const md = require('@mapbox/babel-plugin-transform-jsxtreme-markdown/md');
const foo = md`
  # Title

  This is **bold.**
  Here is a [link](/some/url).
`;

// Output
('use strict');

var React = require('react');
var foo = (
  <div>
    <h1>Title</h1>
    <p>
      This is <strong>bold.</strong>
      Here is a <a href="/some/url">link</a>.
    </p>
  </div>
);

Because this plugin uses jsxtreme-markdown, you can also interpolate JS expressions and JSX elements within special delimiters. Read more about this in the jsxtreme-markdown docs.

// Input
import md from '@mapbox/babel-plugin-transform-jsxtreme-markdown/md';
const text = md`
  This is a paragraph {{<span className="foo">}} with a **markdown** span inside {{</span>}}
  {{ <div style={{ margin: 70 }}> }}
  And here is a _paragraph_ inside a div.
  [Link](/some/url)
  {{ </div> }}
`;

// Output
('use strict');

var React = require('react');
var text = (
  <div>
    <p>
      This is a paragraph{' '}
      <span className="foo">
        {' '}
        with a <strong>markdown</strong> span inside{' '}
      </span>
    </p>
    <div style={{ margin: 70 }}>
      And here is a <em>paragraph</em> inside a div.
      <a href="/some/url">Link</a>
    </div>
  </div>
);

options

You can pass any of the options available to jsxtremeMarkdown.toJsx.

Additional options:

packageName

Type: string. Default: '@mapbox/babel-plugin-transform-jsxtreme-markdown/md'.

The name of the package that you will require or import to use this thing. For example, with the value 'xtreme-markdown' you should use

import md from 'xtreme-markdown';

Keywords

FAQs

Package last updated on 13 Nov 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc