a way to use react-virtualized to render lines of code for react-syntax-highlighter
Clone or download
Latest commit 9a166ec Jan 4, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src make rowHeight configurable, closes #1 Mar 22, 2017
.babelrc init commit Mar 21, 2017
.gitignore init commit Mar 21, 2017
.npmignore init commit Mar 21, 2017
README.md match style path with v6 Jan 4, 2018
package.json 1.1.0 Mar 22, 2017

README.md

React Syntax Highlighter Virtualized Renderer

React Syntax Highlighter allows for the use of custom renderers to change the behavior of the way the syntax highlighted code is rendered. This module utilizes React Virtualized to virtualize rendering of non visible code nodes to allow for better performance when syntax highlighting large blocks. See an example: here

Use

npm install react-syntax-highlighter --save
npm install react-syntax-highlighter-virtualized-renderer --save
import SyntaxHighlighter from 'react-syntax-highlighter';
import virtualizedRenderer from 'react-syntax-highlighter-virtualized-renderer'; 
import { docco } from 'react-syntax-highlighter/styles/hljs';
const Component = () => {
  const codeString = '(num) => num + 1';
  return (
	<SyntaxHighlighter 
	  language='javascript' 
	  style={docco}
	  renderer={virtualizedRenderer()}
  	>
  		{codeString}
  	</SyntaxHighlighter> 
  );
}

Optional Options Argument

  • overscanRowCount - number of rows to render ahead of what is currently visible. (defaults to 10)
  • rowHeight - if you use different fonts / line height styles, you made need to adjust the row height (defaults to 15)