File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change @@ -4,11 +4,23 @@ See the demo [here](http://bvaughn.github.io/react-highlight.js/).
44
55# Installation
66
7- Install this component using NPM like so :
7+ Install react-highlight.js using NPM:
88``` bash
99npm install react-highlight.js --save
1010```
1111
12+ Choose a highlight.js theme and make sure it's included in your index file.
13+ ``` html
14+ <link rel =' stylesheet' href =' https://highlightjs.org/static/demo/styles/railscasts.css' />
15+ ```
16+
17+ And then use react-highlight.js to display your text like so:
18+ ``` html
19+ <Highlight language ={language} >
20+ {content}
21+ </Highlight >
22+ ```
23+
1224# License
1325
1426* react-highlight.js* is available under the MIT License.
Original file line number Diff line number Diff line change @@ -18,10 +18,21 @@ export default class Application extends React.Component {
1818 </ p >
1919 < h2 > Demo</ h2 >
2020 < HighlightDemo />
21- < h2 > Installation</ h2 >
21+ < h2 > Usage</ h2 >
22+ < p > Install react-highlight.js using NPM</ p >
2223 < Highlight language = 'bash' >
2324 npm install react-highlight.js --save
2425 </ Highlight >
26+ < p > Choose a highlight.js theme and make sure it's included in your index file.</ p >
27+ < Highlight language = 'html' >
28+ { `<link rel='stylesheet' href='https://highlightjs.org/static/demo/styles/railscasts.css'/>` }
29+ </ Highlight >
30+ < p > And then use react-highlight.js to display your text like so:</ p >
31+ < Highlight language = 'html' >
32+ { `<Highlight language={language}>
33+ {content}
34+ </Highlight>` }
35+ </ Highlight >
2536 < h2 > License</ h2 >
2637 < p > react-highlight.js is available under the MIT License.</ p >
2738 </ div >
You can’t perform that action at this time.
0 commit comments