Skip to content

Commit 70f993f

Browse files
committed
Improved example and READMEg
1 parent e131833 commit 70f993f

2 files changed

Lines changed: 25 additions & 2 deletions

File tree

README.md

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff 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
99
npm 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.

website/Application.js

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff 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>

0 commit comments

Comments
 (0)