React components for rendering code snippets with syntax highlighting
- Background
- Install
- Usage
- Components
- Supported Themes
- Supported Languages
- Author
- Alternatives
- Todos
- Show your support
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!
I don't plan on keeping this updated unless people are looking to actually use it. So don't be shy! Feel free to post an issue or a pr.
✨ Demo
Install react-code-blocks
via yarn
or npm
yarn add react-code-blocks
npm i react-code-blocks
import { CopyBlock } from 'react-code-blocks'
function MyCodeComponent(props){
return (
<CopyBlock
text={props.code}
language={props.language}
showLineNumbers={props.showLineNumbers}
wrapLines
/>
)
}
A simple code block component
import { CodeBlock, dracula } from 'react-code-blocks'
function MyCoolCodeBlock({code, language, showLineNumbers}){
return (
<CodeBlock
text={code}
language={language}
showLineNumbers={showLineNumbers}
theme={dracula}
wrapLines
/>
)
}
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 |
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}){
<CopyBlock
text={code}
language={language}
showLineNumbers={showLineNumbers}
theme={dracula}
wrapLines
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 withprismjs
orhighlightjs
ast
using inline styles by @conorhastings.- It's actually used in this project as well! 😄
react-highlight.js
: A lightweight React wrapper around theHighlight.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- Original inspiration for this project kit for this project
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! 😄
- Add a better readme
- Highlighting line feature
- Supported Themes documentation
- Supported Languages documentation
- Add a License
- Docs for usage with GatsbyJS
- Docs for usage with
MDX
- Contributor guide for development
- Contributor guide for adding themes
- Contributor guide for adding languages
- Document props for
Code
component - Better demo
- A component with a terminal around it. because why not!? 🧐
Give a ⭐️ if this project helped you!
This README was generated with ❤️ by readme-md-generator
- Website: https://novvum.io
- Twitter: @rajinwonderland
- Github: @rajinwonderland