react-syntax-highlighter-virtualized-renderer

KO | EN

gitlite — search

#python #hacktoberfest #go #android #machine-learning #linux #nodejs #windows #kubernetes #awesome-list #vue #ios #mcp #openai

react-syntax-highlighter-virtualized-renderer

(★ 32)

a way to use react-virtualized to render lines of code for react-syntax-highlighter

react-syntax-highlighter-virtualized-renderer 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## React Syntax Highlighter Virtualized Renderer

<a href='https://github.com/conorhastings/react-syntax-highlighter'>React Syntax Highlighter</a> allows for the use of custom renderers to change the behavior of the way the syntax highlighted code is rendered. This module utilizes <a href="https://github.com/bvaughn/react-virtualized">React Virtualized</a> to virtualize rendering of non visible code nodes to allow for better performance when syntax highlighting large blocks. See an example: <a href="http://conor.rodeo/react-syntax-highlighter/demo/virtualized.html">here</a>

### Use

```shell
npm install react-syntax-highlighter --save
npm install react-syntax-highlighter-virtualized-renderer --save
```

```js
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)

react-syntax-highlighter-virtualized-renderer

react-syntax-highlighter-virtualized-renderer 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

react-syntax-highlighter-virtualized-renderer

react-syntax-highlighter-virtualized-renderer 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README