include usage of highlight.js as ES Module in browser

README.md

@@ -41,8 +41,9 @@ detection.
   - [Using with Vue.js](#using-with-vuejs)
   - [Using Web Workers](#using-web-workers)
 - [Importing the Library](#importing-the-library)
-  - [Node.js / `require`](#nodejs--require)
-  - [ES6 Modules / `import`](#es6-modules--import)
+  - [Node.js CommonJS Modules / `require`](#nodejs-commonjs-modules--require)
+  - [Node.js ES6 Modules / `import`](#nodejs-es6-modules--import)
+  - [Browser ES6 Modules](#browser-es6-modules)
 - [Getting the Library](#getting-the-library)
   - [Fetch via CDN](#fetch-via-cdn)
     - [cdnjs (link)](#cdnjs-link)
@@ -240,7 +241,7 @@ onmessage = (event) => {
 First, you'll likely be installing the library via `npm` or `yarn` -- see [Getting the Library](#getting-the-library).
 
 
-### Node.js / `require`
+### Node.js CommonJS Modules / `require`
 
 Requiring the top-level library will load all languages:
 
@@ -266,10 +267,7 @@ const highlightedCode = hljs.highlight('<span>Hello World!</span>', {language: '
 ```
 
 
-### ES6 Modules / `import`
-
-*Note: You can also import directly from fully static URLs, such as our very own pre-built
-ES6 Module CDN resources. See [Fetch via CDN](#fetch-via-cdn) for specific examples.*
+### Node.js ES6 Modules / `import`
 
 The default import will register all languages:
 
@@ -292,6 +290,50 @@ import hljs from 'highlight.js';
 import 'highlight.js/styles/github.css';
 ```
 
+### Browser ES6 Modules
+
+*Note: You need to install `@highlightjs/cdn-assets` package instead of `highlight.js`. See [Download prebuilt CDN assets](#download-prebuilt-cdn-assets)*
+
+To import the library and register only those languages that you need:
+
+```js
+import hljs from './node_modules/@highlightjs/cdn-assets/es/core.js';
+import javascript from './node_modules/@highlightjs/cdn-assets/es/languages/javascript.min.js';
+
+hljs.registerLanguage('javascript', javascript);
+```
+
+To import the library and register all languages:
+
+```js
+import hljs from './node_modules/@highlightjs/cdn-assets/es/highlight.js';
+```
+
+*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.*
+
+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:
+
+```html
+<script type="importmap">
+{
+	"imports": {
+		"@highlightjs/cdn-assets/": "./node_modules/@highlightjs/cdn-assets/"
+	}
+}
+</script>
+```
+
+Use the above code in HTML file. After that, your JavaScript code looks like this:
+
+```js
+import hljs from '@highlightjs/cdn-assets/es/core.js';
+import javascript from '@highlightjs/cdn-assets/es/languages/javascript.min.js';
+
+hljs.registerLanguage('javascript', javascript);
+```
+
+*Note: You can also import directly from fully static URLs, such as our very own pre-built ES6 Module CDN resources. See [Fetch via CDN](#fetch-via-cdn) for specific examples.*
+
 
 ## Getting the Library
 
@@ -418,6 +460,14 @@ npm install highlight.js
 yarn add highlight.js
 ```
 
+There is also another npm package [@highlightjs/cdn-assets](https://www.npmjs.com/package/@highlightjs/cdn-assets) that contains prebuilt CDN assets including [ES6 Modules that can be imported in browser](#browser-es6-modules):
+
+```bash
+npm install @highlightjs/cdn-assets
+# or
+yarn add @highlightjs/cdn-assets
+```
+
 Alternatively, you can build the NPM package from source.