react-code-highlight v1.0.1
react-code-highlight
This react component allows you to highlight your code and make it look prettier wherever you want.
This component makes use of highlight.js plugin.
Created this following https://www.dhruvkumarjha.com/articles/introduction-to-creating-react-components-and-publishing-them-to-npm
Installation
To install this Component, run yarn add react-code-highlight
or npm install react-code-highlight
., Don't forget to install highlight.js by running yarn add highlight.js
.
Usage
To use the component, In your react Application just do
import React from 'react';
import CodeHighlight from 'react-code-highlight';
// import all the styles
import "react-syntax-highlight/lib/style.css";
import "highlight.js/styles/xcode.css";
const MyComponent = (props) => {
return (
<CodeHighlight
language="javascript"
title="Hello World in Javascript"
description="This code will log hello world in the console."
>
{`
console.log("Hello World");
`}
</CodeHighlight>
)
}
export default MyComponent;
You can also provide additional configuration like
<CodeHighlight
language="" // default: javascript
title="" // if any
description="" // if any
tab="" // what do you want the tab in your code to be replaced with?, default: 4 spaces
classes={{
title: '', // class name for the title
description: '', // class name for description
pre: '', // class name for pre tag
code: '', // class name for code tag
}}
className="" // if specified this will replace the default class name and its styles.
>
</CodeHighlight>
You can view all the themes/styles for syntax highlighting here https://highlightjs.org/static/demo/ Just import the stylesheet of your choice.
If your webpack configuration doesn't support importing of css stylesheets
, Either Google on how to support it or Copy the contents of these stylesheets manually into your css file.