prism-react-renderer - npm Package Compare versions

Comparing version 2.3.1 to 2.4.0

dist/index.d.ts

@@ -87,2 +87,6 @@ import * as react from 'react';
 
+declare const theme$j: PrismTheme;
+
+declare const theme$i: PrismTheme;
+
 declare const theme$h: PrismTheme;
@@ -126,20 +130,22 @@
   export {
-    theme$h as dracula,
-    theme$g as duotoneDark,
-    theme$f as duotoneLight,
-    theme$e as github,
-    theme$3 as jettwaveDark,
-    theme$2 as jettwaveLight,
-    theme$d as nightOwl,
-    theme$c as nightOwlLight,
-    theme$b as oceanicNext,
-    theme$a as okaidia,
-    theme$1 as oneDark,
-    theme as oneLight,
-    theme$9 as palenight,
-    theme$8 as shadesOfPurple,
-    theme$7 as synthwave84,
-    theme$6 as ultramin,
-    theme$5 as vsDark,
-    theme$4 as vsLight,
+    theme$j as dracula,
+    theme$i as duotoneDark,
+    theme$h as duotoneLight,
+    theme$g as github,
+    theme$1 as gruvboxMaterialDark,
+    theme as gruvboxMaterialLight,
+    theme$5 as jettwaveDark,
+    theme$4 as jettwaveLight,
+    theme$f as nightOwl,
+    theme$e as nightOwlLight,
+    theme$d as oceanicNext,
+    theme$c as okaidia,
+    theme$3 as oneDark,
+    theme$2 as oneLight,
+    theme$b as palenight,
+    theme$a as shadesOfPurple,
+    theme$9 as synthwave84,
+    theme$8 as ultramin,
+    theme$7 as vsDark,
+    theme$6 as vsLight,
   };
@@ -146,0 +152,0 @@ }

package.json

 {
   "name": "prism-react-renderer",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "description": "Renders highlighted Prism output using React",
@@ -5,0 +5,0 @@ "sideEffects": true,

README.md

@@ -1,21 +0,24 @@
-<a href="https://formidable.com/open-source/" target="_blank">
-  <img alt="Prism React Renderer — Formidable, We build the modern web" src="https://raw.githubusercontent.com/FormidableLabs/prism-react-renderer/master/prism-react-renderer-Hero.png" />
+<a href="https://commerce.nearform.com/open-source/" target="_blank">
+  <img alt="Prism React Renderer" src="https://oss.nearform.com/api/banner.svg?text=prism+react+renderer" />
 </a>
 
 <p align="center" style="font-size: 1.2rem;">
-  A lean <a href="https://github.com/PrismJS/prism">Prism</a> highlighter component for React<br>
-  Comes with everything to render Prismjs highlighted code directly to React (Native) elements, global-pollution-free!
+  A lean <a href="https://github.com/PrismJS/prism">Prism</a> highlighter component for React
 </p>
 
-[![Maintenance Status][maintenance-image]](#maintenance-status)
-## Why?
+<p align="center">
+  <a href="https://npmjs.com/package/prism-react-renderer"><img src="https://img.shields.io/npm/dm/prism-react-renderer.svg"></a>
+  <a href="https://npmjs.com/package/prism-react-renderer"><img src="https://img.shields.io/npm/v/prism-react-renderer.svg"></a>
+  <a href="https://github.com/FormidableLabs/prism-react-renderer#maintenance-status">
+    <img alt="Maintenance Status" src="https://img.shields.io/badge/maintenance-active-green.svg" />
+  </a>
+</p>
 
-Maybe you need to render some extra UI with your Prismjs-highlighted code,
-or maybe you'd like to manipulate what Prism renders completely,
-or maybe you're just using Prism with React and are searching for an easier,
-global-pollution-free way?
+<p align="center">
+  Comes with everything to render Prismjs syntax highlighted code directly in React & React Native!
+</p>
 
-Then you're right where you want to be!
+## Introduction
 
-## How?
+Prism React Renderer powers syntax highlighting in the amazing [Docusaurus](https://docusaurus.io/) framework and many others.
 
@@ -61,2 +64,3 @@ This library tokenises code using Prism and provides a small render-props-driven
 - [Theming](#theming)
+- [Upgrading from v1 to v2](#upgrade)
 - [LICENSE](#license)
@@ -125,5 +129,5 @@ - [Maintenance Status](#maintenance-status)
 
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement)
-        .render(<App />)
-
+ReactDOM
+  .createRoot(document.getElementById("root") as HTMLElement)
+  .render(<App />)
 ```
@@ -133,4 +137,8 @@
 
-By default `prism-react-renderer` only includes a [base set of languages](https://github.com/FormidableLabs/prism-react-renderer/blob/c914fdea48625ba59c8022174bb3df1ed802ce4d/packages/generate-prism-languages/index.ts#L9-L23) that Prism supports. **Depending on your app's build system you may need to `await` the `import` or use `require` to ensure `window.Prism` exists before importing the custom languages.** You can add support for more by including their definitions from the main `prismjs` package:
+By default `prism-react-renderer` only includes a [base set of languages](https://github.com/FormidableLabs/prism-react-renderer/blob/c914fdea48625ba59c8022174bb3df1ed802ce4d/packages/generate-prism-languages/index.ts#L9-L23) that Prism supports. 
 
+> _Note_: Some languages (such as Javascript) are part of the bundle of other languages
+
+**Depending on your app's build system you may need to `await` the `import` or use `require` to ensure `window.Prism` exists before importing the custom languages.** You can add support for more by including their definitions from the main `prismjs` package:
+
 ```js
@@ -262,3 +270,3 @@ import { Highlight, Prism } from "prism-react-renderer";
 You need to add a `line` property (type: `Token[]`) to the object you're passing to
-`getLineProps`; It's also advisable to add a `key`.
+`getLineProps`.
 
@@ -276,3 +284,3 @@ This getter will return you props to spread onto your line elements (typically `<div>s`).
 You need to add a `token` property (type: `Token`) to the object you're passing to
-`getTokenProps`; It's also advisable to add a `key`.
+`getTokenProps`.
 
@@ -368,2 +376,54 @@ This getter will return you props to spread onto your token elements (typically `<span>s`).
 
+## Upgrade
+
+If you are migrating from v1.x to v2.x, follow these steps
+
+### Change module imports
+
+```diff
+- import Highlight, { defaultProps } from "prism-react-renderer";
++ import { Highlight } from "prism-react-renderer"
+
+const Content = (
+-  <Highlight {...defaultProps} code={exampleCode} language="jsx">
++  <Highlight code={exampleCode} language="jsx">
+```
+
+### Change theme imports
+
+```diff
+- const theme = require('prism-react-renderer/themes/github')
++ const theme = require('prism-react-renderer').themes.github
+```
+
+### Check language support
+
+> By default prism-react-renderer only includes a base set of languages that Prism supports. Depending on your app's build system you may need to await the import or use require to ensure window.Prism exists before importing the custom languages.
+
+See: https://github.com/FormidableLabs/prism-react-renderer#custom-language-support
+
+Install prismjs (if not available yet):
+
+```
+# npm
+npm install --save prismjs
+# yarn
+yarn add prismjs
+# pnpm
+pnpm add prismjs
+```
+
+### Add language component
+
+If the language is not already bundled in the above, you can add additional languages with the following code:
+
+```
+import { Highlight, Prism } from "prism-react-renderer";
+
+(typeof global !== "undefined" ? global : window).Prism = Prism
+await import("prismjs/components/prism-applescript")
+/** or **/
+require("prismjs/components/prism-applescript")
+```
+
 ## LICENSE
@@ -375,5 +435,4 @@
 
-**Active:** Formidable is actively working on this project, and we expect to continue for work for the foreseeable future. Bug reports, feature requests and pull requests are welcome.
+**Active:** Nearform is actively working on this project, and we expect to continue work for the foreseeable future. Bug reports, feature requests and pull requests are welcome.
 
 [maintenance-image]: https://img.shields.io/badge/maintenance-active-green.svg
-

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

738253

increased by2.89%

Lines of code

6772

increased by4.86%

Number of lines in readme file

432

increased by15.82%

No dependency changes