react-midas

Highlight CSS in React with Midas.

Install

With npm do:

npm install react-midas --save

API

reactMidasFactory

This factory function returns a React component which highlights the CSS code block passed to it using Midas, a PostCSS based syntax highlighter. The themes required to style these code blocks are likely available in node_modules/midas/dist/themes if you're using npm 3, otherwise you should check under node_modules/react-midas/node_modules/midas/dist/themes.

Parameters

• opts [Object] Options to pass to midas. You can pass anything here except the stringify option, which is automatically set to false.
  • opts.wrap [boolean] Wrap the output with <pre class="midas"></pre>. By default, the CSS will also be wrapped with <code></code>. (optional, default true)

Examples

import React from 'react';
import midasFactory from 'react-midas';
 
const Midas = midasFactory();
 
export default () => (
  <div>
    <p>Here is how to make a link blue, using CSS:</p>
    <Midas>{'a { color: blue; }'}</Midas>
  </div>
);

Returns Function React component.

Midas

React component responsible for the CSS syntax highlighting.

Returns ReactElement <pre class="midas"><code>(css code)</code></pre>

Links

Please help to support this project by purchasing a midas sticker.

Contributors

Thanks goes to these wonderful people (emoji key):

Ben Briggs 💻 📖 👀 ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT © Ben Briggs