Skip to content

Commit ef52945

Browse files
committed
(docs) do not use node_modules in examples
1 parent 57c31d6 commit ef52945

File tree

1 file changed

+13
-9
lines changed

1 file changed

+13
-9
lines changed

README.md

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -292,42 +292,46 @@ import 'highlight.js/styles/github.css';
292292

293293
### Browser ES6 Modules
294294

295-
*Note: You need to install `@highlightjs/cdn-assets` package instead of `highlight.js`. See [Download prebuilt CDN assets](#download-prebuilt-cdn-assets)*
295+
*Note: For now you'll want to install `@highlightjs/cdn-assets` package instead of `highlight.js`.
296+
See [Download prebuilt CDN assets](#download-prebuilt-cdn-assets)*
296297

297298
To import the library and register only those languages that you need:
298299

299300
```js
300-
import hljs from './node_modules/@highlightjs/cdn-assets/es/core.js';
301-
import javascript from './node_modules/@highlightjs/cdn-assets/es/languages/javascript.min.js';
301+
import hljs from './assets/js/@highlightjs/cdn-assets/es/core.js';
302+
import javascript from './assets/js/@highlightjs/cdn-assets/es/languages/javascript.min.js';
302303

303304
hljs.registerLanguage('javascript', javascript);
304305
```
305306

306307
To import the library and register all languages:
307308

308309
```js
309-
import hljs from './node_modules/@highlightjs/cdn-assets/es/highlight.js';
310+
import hljs from './assets/js/@highlightjs/cdn-assets/es/highlight.js';
310311
```
311312

312-
*Note: The above code works only when the file containing the JavaScript code and the `node_modules` folder are inside same folder. If that is not the case, you have to modify the path in import statement accordingly.*
313+
*Note: The path to these files will depend on how your individiaul project is configured,
314+
the path `./assets/js` above is only an example. You'll likely need to modify the path
315+
for your own unmique setup.*
313316

314317
You can also use [`importmap`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) to import in similar way as Node:
315318

316319
```html
317320
<script type="importmap">
318321
{
319322
"imports": {
320-
"@highlightjs/cdn-assets/": "./node_modules/@highlightjs/cdn-assets/"
323+
"@highlightjs": "./assets/js/@highlightjs/cdn-assets/es/"
321324
}
322325
}
323326
</script>
324327
```
325328

326-
Use the above code in HTML file. After that, your JavaScript code looks like this:
329+
Use the above code in your HTML. After that, your JavaScript can import using the named key from
330+
your `importmap`, for example `@highlightjs` in this case:
327331

328332
```js
329-
import hljs from '@highlightjs/cdn-assets/es/core.js';
330-
import javascript from '@highlightjs/cdn-assets/es/languages/javascript.min.js';
333+
import hljs from '@highlightjs/core.js';
334+
import javascript from '@highlightjs/languages/javascript.min.js';
331335

332336
hljs.registerLanguage('javascript', javascript);
333337
```

0 commit comments

Comments
 (0)