From 1e99e961ddb62c66f4a044f53dde6c202ae7b53a Mon Sep 17 00:00:00 2001 From: mAAdhaTTah Date: Sat, 26 May 2018 18:05:56 -0400 Subject: [PATCH] Update documentation for node & webpack usage Fix #1403 and #1409. --- index.html | 35 +++++++++++++++++++++++++---------- 1 file changed, 25 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index b8f254d5cf..194850e0c7 100644 --- a/index.html +++ b/index.html @@ -153,14 +153,28 @@

Basic usage

Example:

<script src="prism.js" data-manual></script>
-

If you want to use Prism on the server or through the command line, Prism can be used with Node.js as well. - This might be useful if you're trying to generate static HTML pages with highlighted code for environments that don't support browser-side JS, like AMP pages.

+

Usage with Webpack, Browserify, & Other Bundlers

-

You can install Prism for Node.js by running:

- 
$ npm install prismjs
+

If you want to use Prism with a bundler, install Prism with npm:

-

Example:

- 
var Prism = require('prismjs');
+	
$ npm install prismjs

+
+	
You can then import into your bundle:

+
+	
import Prism from 'prismjs';

+
+	
To make it easy to configure your Prism instance with only the languages and plugins you need, use the babel plugin,
+		babel-plugin-prismjs. This will allow you to load
+		the minimum number of languages and plugins to satisfy your needs.
+		See that plugin's documentation for configuration details.

+
+	
Usage with Node

+
+	
If you want to use Prism on the server or through the command line, Prism can be used with Node.js as well.
+	This might be useful if you're trying to generate static HTML pages with highlighted code for environments that don't support browser-side JS, like AMP pages.

+
+	
Example:

+	
var Prism = require('prismjs');
 
 // The code snippet you want to highlight, as a string
 var code = "var data = 1;";
@@ -169,13 +183,12 @@ 
Basic usage

 var html = Prism.highlight(code, Prism.languages.javascript, 'javascript');

 
 	
Requiring prismjs will load the default languages: markup, css,
-		clike and javascript. You can load more languages separately by requiring them
-		directly from the components folder. Or you can use the loadLanguages() utility, that
-		will automatically handle any required dependencies.

+		clike and javascript. You can load more languages with the
+		loadLanguages() utility, which will automatically handle any required dependencies.

 	
Example:

 
 	
var Prism = require('prismjs');
-var loadLanguages = require('prismjs/components/index.js');
+var loadLanguages = require('prismjs/components');
 loadLanguages(['haml']);
 
 // The code snippet you want to highlight, as a string
@@ -184,6 +197,8 @@ 
Basic usage

 // Returns a highlighted HTML string
 var html = Prism.highlight(code, Prism.languages.haml, 'haml');

 
+	
Note: Do not use loadLanguages() with Webpack or another bundler, as this will cause Webpack to include all languages and plugins. Use the babel plugin described above.

+