@11ty/eleventy-plugin-syntaxhighlight - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

package.json

 {
   "name": "@11ty/eleventy-plugin-syntaxhighlight",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A pack of Eleventy plugins for syntax highlighting using the Liquid templating engine.",
@@ -30,5 +30,5 @@ "main": ".eleventy.js",
   "dependencies": {
-    "@11ty/eleventy": "^0.2.13",
-    "prismjs": "^1.10.0"
+    "@11ty/eleventy": "^0.2.15",
+    "prismjs": "^1.13.0"
   }
 }

README.md

 # eleventy-plugin-syntaxhighlight
 
-A pack of Eleventy plugins for syntax highlighting using the Liquid templating engine.
+A pack of [Eleventy](https://github.com/11ty/eleventy) plugins for syntax highlighting using the Liquid templating engine. No runtime JavaScript here, these highlight transformations are all done at build-time.
 
+## Installation
+
+Available on [npm](https://www.npmjs.com/package/@11ty/eleventy-plugin-syntaxhighlight).
+
+```
+npm install @11ty/eleventy-plugin-syntaxhighlight --save
+```
+
+Open up your Eleventy config file (probably `.eleventy.js`) and use `addPlugin`:
+
+```
+const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
+module.exports = function(eleventyConfig) {
+  eleventyConfig.addPlugin(syntaxHighlight);
+};
+```
+
+If you use the Prism version, you are responsible for including [your favorite theme CSS](https://github.com/PrismJS/prism-themes)!
+
+[Read more about Eleventy plugins.](https://github.com/11ty/eleventy/blob/master/docs/plugins.md)
+
 ## Usage
 
+### Supplies: Two Liquid Tags
+
+* `{% highlight %}`: syntax highlights a block of code using PrismJS.
+* `{% highlight-plain %}`: adds `<pre><code>` around a block of code and offers the line-highlighting feature set as `highlight`.
+
 ### Prism Syntax Highlighter
 
+* [List of supported PrismJS languages](http://prismjs.com/#languages-list)
+
 ```
@@ -10,0 +38,0 @@ {% highlight js %}

src/syntaxHighlightPrism.js

@@ -8,2 +8,5 @@ const Prism = require('prismjs');
   highlight.addHook(function(language, htmlStr, lines) {
+    if (! Prism.languages[ language ]) {
+      require(`prismjs/components/prism-${language}`);      
+    }
     return Prism.highlight(htmlStr, Prism.languages[ language ]);
@@ -13,2 +16,2 @@ });
   return highlight.getObject();
-};
+};

New alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

8777

increased by15.9%

Lines of code

127

increased by3.25%

Number of lines in readme file

83

increased by50.91%

Worsened metrics

Number of low supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@11ty/eleventy@^0.2.15

• Updatedprismjs@^1.13.0