react-code-prettify

A react component for making source-code snippets prettier using Google's code-prettify.

⚠️ Experimental Stage. Supports only few languages. ⚠️

Usage

Importing the component.

  import Code from 'react-code-prettify';

Assign your code snippet as a string to a variable.

const codeString = `function map(f, a) {
  var result = [], // Create a new Array
      i;
  for (i = 0; i != a.length; i++)
    result[i] = f(a[i]);
  return result;
};`

Passing the snippet to the component.

<Code
  codeString={example1} 
  language="javascript" 
 />

Props

CodeString

Required prop. Need to be the string of code that you want to pretify and highlight.

language

Optional prop. You don't need to specify the language since it will automatically guess. Still you can specify a language by passing it in this props.

What's Next ?

• Need support for HTML snippets. - Issue 1
• Need support for more themes - Issue 2

Thanks

• Thanks to the contributors of code-prettify and Google.
• Thanks to Alex Milanov for npm fork of code-prettify.
• Thanks to Max Stoiber for styled-components 💅