React components for rendering code snippets with syntax highlighting
BREAKING CHANGES:
VERSION >= ^0.1.0
has not been tested with Node 14 or lower
Initially, this started as a small project looking to modify Atlaskit's Code Block component to support more languages (i.e graphql
, reasonml
, etc). It then rapidly evolved into a never-ending rabbithole which ended up with support for themes (i.e railscast, darcula, monokai, etc), customizable styles, and copy functionality too. Contributions are welcome via PRs and issues.
Install react-code-blocks
npm i react-code-blocks
Updated usage instructions can be found here
import { CopyBlock } from "react-code-blocks";
function MyCodeComponent(props) {
const copyBlockProps = {
text: props.code,
language: props.language,
showLineNumbers: props.showLineNumbers,
startingLineNumber: props.startingLineNumber,
wrapLines: true,
};
return (
<CopyBlock
{...copyBlockProps}
/>
);
}
A simple code block component
import { CodeBlock, dracula } from "react-code-blocks";
function MyCoolCodeBlock({ code, language, showLineNumbers, startingLineNumber }) {
return (
<CodeBlock
text={code}
language={language}
showLineNumbers={showLineNumbers}
startingLineNumber={startingLineNumber}
theme={dracula}
/>
);
}
Note that
CodeBlock
&CopyBlock
share exactly the same props
name | type | default | description |
---|---|---|---|
text |
string |
required | The code to be formatted |
language |
string |
"text" | The language in which the code is written. See here for a list of supported languages |
showLineNumbers |
boolean |
true |
Indicates whether or not to show line numbers |
startingLineNumber |
number |
1 |
if showLineNumbers is enabled the line numbering will start from here. |
theme |
object |
dracula | A theme object for the code block. See here for a list of supported themes |
highlight |
string |
"" | Lines to highlight! For multiple lines, use a comma i.e highlight="1,6,7" . For a range of lines, use a - i.e highlight="1-5" for highlighting lines 1-5. |
more to come...
A code block component with a little copy button for copying a snippet.
import { CopyBlock, dracula } from "react-code-blocks";
function MyCoolCodeBlock({ code, language, showLineNumbers, startingLineNumber }) {
<CopyBlock
text={code}
language={language}
showLineNumbers={showLineNumbers}
startingLineNumber={startingLineNumber}
theme={dracula}
codeBlock
/>;
}
Same as the CodeBlock
's component with the exception of one!
name | type | default | description |
---|---|---|---|
codeBlock |
boolean |
false |
Indicates whether to render the CopyBlock as an inline Code component or a CodeBlock component |
For a list of supported themes, check out the list here
For a list of supported languages, check out the list here
If you're looking for some more maintained solutions, I'd suggest the following:
react-syntax-highlighter
: syntax highlighting component for react with prismjs
or highlightjs
ast
using inline styles by @conorhastings.
react-highlight.js
: A lightweight React wrapper around the Highlight.js
syntax highlighting library by @bvaughn.react-live
: A flexible playground for live editing React components by @FormidableLabs.@atlaskit/code
: Renders inline code snippets and code blocks
carbon-components-react
: Check out their <CodeSnippet>
component which supports multi-line, single-line, and inline snippets along with added copying functionality.Feel free to add any other alternative packages here! 😄
MDX
Code
componentGive a ⭐️ if this project helped you!
This README was generated with ❤️ by readme-md-generator
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!