react-highlight-codeblock

syntax highlighting component for react-syntax-highlighter with highlightjs ast using inline styles

Usage no npm install needed!

<script type="module">
  import reactHighlightCodeblock from 'https://cdn.skypack.dev/react-highlight-codeblock';
</script>

README

React Highlight CodeBlock

Syntax highlighting component based on react-syntax-highlighter development.

Install

npm install react-highlight-codeblock --save

Usage

import CodeBlock from 'react-highlight-codeblock'

Syntax highlighting of single code snippet

<CodeBlock
    code={strCode}
    callback={code => console.log(code)}
    editer={true}
    language="html"
    style="monokai"
    showLineNumbers={false}
/>

props

code - code snippet presentation and editing.
editer - default to false, is it editable.
style - the style to highlight code in. Available options here for hljs.do not use the default style.
language - the language to highlight code in. Available options here for hljs .
callback is used with the editer attribute as a post-edit callback function.
showLineNumbers if this is enabled line numbers will be shown next to the code block.