Skip to content

Commit 1d14980

Browse files
committed
README
1 parent c23f0b9 commit 1d14980

File tree

2 files changed

+58
-10
lines changed

2 files changed

+58
-10
lines changed

Diff for: README.md

+56-9
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,17 @@ The below screenshot was captured from a [demo webpage](demo/testcode.html) afte
1010

1111
## Usage
1212

13-
Simply include the Highlight.js library in your webpage, then load this module.
13+
Simply include the Highlight.js library in your webpage or Node app, then load this module.
1414

1515
### Static website or simple usage
1616

1717
Simply load this module after loading Highlight.js. You'll use the minified version found in the `dist` directory. This module is just a CDN build of the language, so it will register itself as the Javascript is loaded.
1818

1919
```html
2020
<script type="text/javascript" src="/path/to/highlight.min.js"></script>
21-
<script type="text/javascript" src="/path/to/highlightjs-apex/dist/apex.min.js"></script>
21+
<script type="text/javascript" src="/path/to/apex.min.js"></script>
2222
<!-- Use any stylesheet you'd like - though it's best to choose from those in highlightjs core repo -->
23-
<link rel="stylesheet" href="/path/to/highlightjs-apex/demo/highlight.css" />
23+
<link rel="stylesheet" href="https://unpkg.com/highlightjs/styles/vs.css" />
2424
<script type="text/javascript">
2525
hljs.highlightAll();
2626
</script>
@@ -36,27 +36,74 @@ This will find and highlight code inside of `<pre><code>` tags; it tries to dete
3636
</pre>
3737
```
3838

39-
For more details of the usage see [Highlight.js main page](https://github.com/highlightjs/highlight.js#highlightjs).
39+
For more details see [Highlight.js main page](https://github.com/highlightjs/highlight.js#highlightjs).
40+
41+
### Using directly from the UNPKG CDN
42+
43+
```html
44+
<script type="text/javascript"
45+
src="https://unpkg.com/highlightjs-apex/dist/apex.min.js"></script>
46+
```
47+
48+
- More info: <https://unpkg.com>
4049

4150
### With Node or another build system
4251

4352
If you're using Node / Webpack / Rollup / Browserify, etc, simply require the language module, then register it with Highlight.js.
4453

4554
```javascript
46-
var hljs = require('highlight.js');
47-
var hljsApexTxt = require('highlightjs-apex');
55+
var hljs = require('highlightjs');
56+
var hljsApex = require('highlightjs-apex');
4857

49-
hljs.registerLanguage('apex', hljsApexTxt);
58+
hljs.registerLanguage('apex', hljsApex);
5059
hljs.highlightAll();
5160
```
5261

62+
63+
### React
64+
65+
You need to import both Highlight.js and third-party language like Apex:
66+
67+
```js
68+
import React, {Component} from 'react'
69+
import 'highlight.js/scss/vs.scss' # your favourite theme
70+
import apex from './apex'
71+
import hljs from 'highlight.js'
72+
hljs.registerLanguage('apex', apex);
73+
74+
class Highlighter extends Component
75+
{
76+
constructor(props)
77+
{
78+
super(props);
79+
hljs.highlightAll();
80+
}
81+
82+
render()
83+
{
84+
let {children} = this.props;
85+
return
86+
{
87+
<pre ref={(node) => this.node = node}>
88+
<code className="language-apex">
89+
{children}
90+
</code>
91+
</pre>
92+
}
93+
}
94+
}
95+
96+
export default Highlighter;
97+
```
98+
5399
## License
54100

55-
Highlight.js is released under the BSD 3-Clause License. See [LICENSE](/LICENSE) file for details.
101+
Highlight.js is released under the BSD 3-Clause License. See [LICENSE](https://github.com/highlightjs/highlight.js/blob/main/LICENSE) file for details.
102+
Highlightjs-apex is released under the MIT License. See [LICENSE](/LICENSE.md) file for details.
56103

57104
## Author
58105

59-
[David Schach](https://github.com/dschach)
106+
David Schach [[David Schach](https://github.com/dschach)](https://github.com/dschach)
60107

61108
## Contribution
62109

Diff for: package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
"scripts": {
77
"test": "./node_modules/.bin/mocha --reporter spec",
88
"mocha": "mocha test/markup",
9-
"changelog": "auto-changelog --output HISTORY.md --hide-credit -p --commit-limit false"
9+
"changelog": "auto-changelog --output HISTORY.md --hide-credit -p --commit-limit false",
10+
"npm-readme": "npm version patch && npm publish"
1011
},
1112
"repository": {
1213
"type": "git",

0 commit comments

Comments
 (0)