Skip to content

Commit b0b1efd

Browse files
authored
Update to Vue 3 and add Typescript definitions (#3)
1 parent 30aa26b commit b0b1efd

File tree

15 files changed

+895
-137
lines changed

15 files changed

+895
-137
lines changed

README.md

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,15 @@
77
[![slack](https://badgen.net/badge/icon/slack?icon=slack&label&color=pink)](https://join.slack.com/t/highlightjs/shared_invite/zt-mj0utgqp-TNFf4VQICnDnPg4zMHChFw)
88

99

10-
This plugin provides a `highlightjs` component for use
11-
in your Vue.js applications:
10+
This plugin provides a `highlightjs` component for use in your Vue.js 3 applications:
1211

1312
```html
14-
<div id="app">
13+
<div id="app">
1514
<!-- bind to a data property named `code` -->
1615
<highlightjs autodetect :code="code" />
1716
<!-- or literal code works as well -->
1817
<highlightjs language='javascript' code="var x = 5;" />
19-
</div>
18+
</div>
2019
```
2120

2221
## Using the pre-built libraries
@@ -30,7 +29,8 @@ in your Vue.js applications:
3029
Then simply register the plugin with Vue:
3130

3231
```js
33-
Vue.use(hljsVuePlugin);
32+
const app = createApp(App)
33+
app.use(hljsVuePlugin)
3434
```
3535

3636

@@ -39,11 +39,13 @@ Vue.use(hljsVuePlugin);
3939
```js
4040
import hljs from 'highlight.js/lib/core';
4141
import javascript from 'highlight.js/lib/languages/javascript';
42-
import vuePlugin from "@highlightjs/vue-plugin";
42+
import hljsVuePlugin from "@highlightjs/vue-plugin";
4343

4444
hljs.registerLanguage('javascript', javascript);
4545

46-
Vue.use(vuePlugin);
46+
const app = createApp(App)
47+
app.use(hljsVuePlugin)
48+
app.mount('#app')
4749
```
4850

4951
Note: The plugin imports `highlight.js/lib/core` internally (but no languages). Thanks to the magic of ES6 modules you can import Highlight.js anywhere to register languages or configure the library. Any import of Highlight.js refers to the same singleton instance of the library, so configuring the library anywhere configures it everywhere.
@@ -52,8 +54,11 @@ You can also simply load all "common" languages at once (as of v11):
5254

5355
```js
5456
import hljs from 'highlight.js/lib/common';
55-
import vuePlugin from "@highlightjs/vue-plugin";
56-
Vue.use(vuePlugin);
57+
import hljsVuePlugin from "@highlightjs/vue-plugin";
58+
59+
const app = createApp(App)
60+
app.use(hljsVuePlugin)
61+
app.mount('#app')
5762
```
5863

5964
## Building the pre-built library from source
@@ -62,4 +67,4 @@ We use rollup to build the `dist` distributable.
6267

6368
```
6469
npm run build
65-
```
70+
```

dist/highlightjs-vue.esm.min.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/highlightjs-vue.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/lib/utils.d.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export declare function escapeHtml(value: string): string;
2+
//# sourceMappingURL=utils.d.ts.map

dist/lib/utils.d.ts.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/vue.d.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { Plugin } from 'vue';
2+
declare const plugin: Plugin;
3+
export default plugin;
4+
//# sourceMappingURL=vue.d.ts.map

dist/vue.d.ts.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)