` tag that is the direct parent of the highlighted code elements. Useful for styling/assigning classNames.
+- `useInlineStyles` - if this prop is passed in as false, react syntax highlighter will not add style objects to elements, and will instead append classNames. You can then style the code block by using one of the CSS files provided by highlight.js.
+- `showLineNumbers` - if this is enabled line numbers will be shown next to the code block.
+- `startingLineNumber` - if `showLineNumbers` is enabled the line numbering will start from here.
+- `lineNumberContainerStyle` - the line numbers container default to appearing to the left with 10px of right padding. You can use this to override those styles.
+- `lineNumberStyle` - inline style to be passed to the span wrapping each number. Can be either an object or a function that recieves current line number as argument and returns style object.
+- `wrapLines` - a boolean value that determines whether or not each line of code should be wrapped in a parent element. defaults to false, when false one can not take action on an element on the line level. You can see an example of what this enables here
+- `lineProps` - props to be passed to the span wrapping each line if wrapLines is true. Can be either an object or a function that recieves current line number as argument and returns props object.
+- `renderer` - an optional custom renderer for rendering lines of code. See here for an example.
+- `PreTag` - the element or custom react component to use in place of the default pre tag, the outermost tag of the component (useful for custom renderer not targeting DOM).
+- `CodeTag` - the element or custom react component to use in place of the default code tag, the second tag of the component tree (useful for custom renderer not targeting DOM).
+- `spread props` pass arbitrary props to pre tag wrapping code.
```js
import SyntaxHighlighter from 'react-syntax-highlighter';
-import { docco } from 'react-syntax-highlighter/dist/styles/hljs';
+import { docco } from 'react-syntax-highlighter/styles/hljs';
const Component = () => {
const codeString = '(num) => num + 1';
- return {codeString} ;
-}
+ return (
+
+ {codeString}
+
+ );
+};
```
### Prism
@@ -58,55 +64,64 @@ Using refractor we can use an
```js
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { dark } from 'react-syntax-highlighter/dist/styles/prism';
+import { dark } from 'react-syntax-highlighter/styles/prism';
const Component = () => {
const codeString = '(num) => num + 1';
- return {codeString} ;
-}
+ return (
+
+ {codeString}
+
+ );
+};
```
### Light Build
-React Syntax Highlighter used in the way described above can have a fairly large footprint. For those that desire more control over what exactly they need, there is an option to import a light build. If you choose to use this you will need to specifically import desired languages and register them using the registerLanguage export from the light build. There is also no default style provided.
+React Syntax Highlighter used in the way described above can have a fairly large footprint. For those that desire more control over what exactly they need, there is an option to import a light build. If you choose to use this you will need to specifically import desired languages and register them using the registerLanguage export from the light build. There is also no default style provided.
```js
-import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
-import js from 'react-syntax-highlighter/dist/languages/hljs/javascript';
-import docco from 'react-syntax-highlighter/dist/styles/hljs/docco';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import js from 'react-syntax-highlighter/languages/hljs/javascript';
+import docco from 'react-syntax-highlighter/styles/hljs/docco';
SyntaxHighlighter.registerLanguage('javascript', js);
```
-You can require `react-syntax-highlighter/prism-light` to use the prism light build instead of the standard light build.
+You can require `react-syntax-highlighter/prism-light` to use the prism light build instead of the standard light build.
+
```jsx
-import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter/prism-light";
-import jsx from 'react-syntax-highlighter/dist/languages/prism/jsx';
-import prism from 'react-syntax-highlighter/dist/styles/prism/prism';
+import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter/prism-light';
+import jsx from 'react-syntax-highlighter/languages/prism/jsx';
+import prism from 'react-syntax-highlighter/styles/prism/prism';
SyntaxHighlighter.registerLanguage('jsx', jsx);
```
### Async Build
-For optimal bundle size for rendering ASAP, there's a async version of prism light & light.
+For optimal bundle size for rendering ASAP, there's a async version of prism light & light.
This versions requires you to use a bundler that supports the dynamic import syntax, like webpack.
This will defer loading of refractor (17kb gzipped) & the languages, while code splits are loaded the code will show with line numbers
but without highlighting.
Prism version:
+
```js
-import { PrismAsyncLight as SyntaxHighlighter } from "react-syntax-highlighter";
+import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
```
Highlight version
+
```js
-import { LightAsync as SyntaxHighlighter } from "react-syntax-highlighter";
+import { LightAsync as SyntaxHighlighter } from 'react-syntax-highlighter';
```
#### Supported languages
+
Access via the `supportedLanguages` static field.
+
```js
-SyntaxHighlighter.supportedLanguages
+SyntaxHighlighter.supportedLanguages;
```
### Built with React Syntax Highlighter
@@ -115,7 +130,7 @@ SyntaxHighlighter.supportedLanguages
- [DBGlass](https://github.com/web-pal/DBGlass) - PostgreSQL client built with Electron.
- [Spectacle Editor](https://github.com/FormidableLabs/spectacle-editor) - An Electron based app for creating, editing, saving, and publishing Spectacle presentations. With integrated Plotly support.
- [Superset](https://github.com/airbnb/superset) - Superset is a data exploration platform designed to be visual, intuitive, and interactive.
-- [Daydream](https://github.com/segmentio/daydream) - A chrome extension to record your actions into a [nightmare](https://github.com/segmentio/nightmare) script
+- [Daydream](https://github.com/segmentio/daydream) - A chrome extension to record your actions into a [nightmare](https://github.com/segmentio/nightmare) script
- [CodeDoc](https://github.com/B1naryStudio/CodeDoc) - Electron based application build with React for creating project documentations
- [React Component Demo](https://github.com/conorhastings/react-component-demo) - A React Component To make live editable demos of other React Components.
- [Redux Test Recorder](https://github.com/conorhastings/redux-test-recorder) - a redux middleware to automatically generate tests for reducers through ui interaction. Syntax highlighter used by react plugin.
diff --git a/babel.config.js b/babel.config.js
index 11fae3aa8..09def1d73 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,27 +1,19 @@
module.exports = {
plugins: [
- '@babel/plugin-proposal-class-properties',
- '@babel/plugin-proposal-object-rest-spread',
- '@babel/syntax-dynamic-import',
- '@babel/transform-runtime'
+ ['@babel/plugin-proposal-class-properties', { loose: true }],
+ ['@babel/plugin-proposal-object-rest-spread', { loose: true }],
+ ['@babel/syntax-dynamic-import', { loose: true }],
+ ['@babel/transform-runtime', { loose: true }]
],
presets: ['@babel/react', '@babel/env'],
env: {
cjs: {
- plugins: ['@babel/transform-runtime', 'transform-dynamic-import'],
+ plugins: [
+ ['@babel/transform-runtime', { loose: true }],
+ ['transform-dynamic-import', { loose: true }]
+ ],
presets: [['@babel/env']]
},
- esm: {
- plugins: ['@babel/transform-runtime'],
- presets: [
- [
- '@babel/env',
- {
- modules: false
- }
- ]
- ]
- },
test: {
presets: [['@babel/env', { targets: { node: true } }]],
// There is no @babel/ scoped transform for this plugin
diff --git a/demo/diff.js b/demo/diff.js
index e2675eced..fae8b7e1a 100644
--- a/demo/diff.js
+++ b/demo/diff.js
@@ -1,7 +1,7 @@
import React from 'react';
import { render } from 'react-dom';
-import SyntaxHighlighter from '../src/index';
-import docco from '../styles/hljs/docco';
+import SyntaxHighlighter from '../';
+import docco from '../src/styles/hljs/docco';
import ExamplesLinks from './examples-links';
const CODE = `const woah = fun => fun + 1;
diff --git a/demo/index.js b/demo/index.js
index bd72363d1..b84623300 100644
--- a/demo/index.js
+++ b/demo/index.js
@@ -1,6 +1,6 @@
import React from 'react';
import { render } from 'react-dom';
-import SyntaxHighlighter from '../src/index';
+import SyntaxHighlighter from '../';
import ExamplesLinks from './examples-links';
const availableStyles = [
@@ -119,7 +119,7 @@ function createElement({ node, style, useInlineStyles, key }) {
`;
this.state = {
selected: 'tomorrow-night-eighties',
- style: require('../styles/hljs/tomorrow-night-eighties').default,
+ style: require('../src/styles/hljs/tomorrow-night-eighties').default,
code: initialCodeString,
showLineNumbers: false
};
@@ -143,7 +143,7 @@ function createElement({ node, style, useInlineStyles, key }) {
value={this.state.selected}
onChange={e =>
this.setState({
- style: require(`../styles/hljs/${e.target.value}`).default,
+ style: require(`../src/styles/hljs/${e.target.value}`).default,
selected: e.target.value
})
}
diff --git a/demo/prism-async-light.js b/demo/prism-async-light.js
index cd98ff260..697a14247 100644
--- a/demo/prism-async-light.js
+++ b/demo/prism-async-light.js
@@ -1,9 +1,9 @@
import React from 'react';
import { render } from 'react-dom';
-import SyntaxHighlighter from '../src/prism-async-light';
-import clike from '../languages/prism/clike';
-import markup from '../languages/prism/markup';
-import markupTemplating from '../languages/prism/markup-templating';
+import { PrismAsyncLight as SyntaxHighlighter } from '../';
+import clike from '../src/languages/prism/clike';
+import markup from '../src/languages/prism/markup';
+import markupTemplating from '../src/languages/prism/markup-templating';
import ExamplesLinks from './examples-links';
SyntaxHighlighter.registerLanguage('markup', markup);
@@ -63,7 +63,7 @@ function createElement({ node, style, useInlineStyles, key }) {
`;
this.state = {
selected: 'atom-dark',
- style: require('../styles/prism/atom-dark').default,
+ style: require('../src/styles/prism/atom-dark').default,
code: initialCodeString,
showLineNumbers: false,
language: 'javascript'
@@ -90,14 +90,18 @@ function createElement({ node, style, useInlineStyles, key }) {
onChange={(e) => this.setState({style: require(`../styles/prism/${e.target.value}`).default, selected: e.target.value})}
>
{availableStyles.map(s => {s} )}
-
+ */}
Change Language
this.setState({language: e.target.value})}
+ onChange={e => this.setState({ language: e.target.value })}
>
- {availableLanguages.map(s => {s} )}
- */}
+ {availableLanguages.map(s => (
+
+ {s}
+
+ ))}
+
Show Line Numbers: