diff --git a/.github/actions/setup/action.yml b/.github/actions/setup/action.yml new file mode 100644 index 0000000..058e21e --- /dev/null +++ b/.github/actions/setup/action.yml @@ -0,0 +1,23 @@ +name: Setup +description: Setup Build Step +inputs: + node-version: + required: true + default: '18.x' + +runs: + using: "composite" + steps: + - uses: pnpm/action-setup@v3 + with: + version: 8.2.0 + + - name: Use Node.js + uses: actions/setup-node@v4 + with: + node-version: ${{ inputs.node-version }} + cache: 'pnpm' + + - name: Install dependencies + shell: bash + run: pnpm install diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 73c5145..9148a71 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -1,4 +1,4 @@ -name: Prism React Renderer Release Workflow +name: Release Workflow on: push: @@ -18,26 +18,8 @@ jobs: pull-requests: write steps: - - uses: actions/checkout@v2 - - uses: actions/setup-node@v3 - with: - node-version: 18 - - - uses: pnpm/action-setup@v2 - with: - version: 8.2.0 - - name: Get pnpm store directory - id: pnpm-cache - shell: bash - run: echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT - - uses: actions/cache@v3 - name: Setup pnpm cache - with: - path: ${{ steps.pnpm-cache.outputs.STORE_PATH }} - key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} - restore-keys: ${{ runner.os }}-pnpm-store- - - name: Install dependencies - run: pnpm install + - uses: actions/checkout@v4 + - uses: ./.github/actions/setup - name: Build packages run: pnpm run build diff --git a/.github/workflows/static-analysis.yml b/.github/workflows/static-analysis.yml index df01631..cc8179b 100644 --- a/.github/workflows/static-analysis.yml +++ b/.github/workflows/static-analysis.yml @@ -5,37 +5,29 @@ on: branches: - master pull_request: - workflow_dispatch: + branches: + - master jobs: static-analysis: name: 'Lint and Type-check' runs-on: ubuntu-latest + steps: - - uses: actions/checkout@v2 - - uses: actions/setup-node@v3 - with: - node-version: 18 - - - uses: pnpm/action-setup@v2 - with: - version: 8.2.0 - - name: Get pnpm store directory - id: pnpm-cache - shell: bash - run: echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT - - uses: actions/cache@v3 - name: Setup pnpm cache - with: - path: ${{ steps.pnpm-cache.outputs.STORE_PATH }} - key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} - restore-keys: ${{ runner.os }}-pnpm-store- - - name: Install dependencies - run: pnpm install + - uses: actions/checkout@v4 + - uses: ./.github/actions/setup - name: Build library run: pnpm run build + - name: Type Check run: pnpm run typecheck + - name: Lint run: pnpm run lint + + - name: Generate language definitions + run: pnpm run build:languages + + - name: Unit Test + run: pnpm run test diff --git a/.github/workflows/unit-test.yml b/.github/workflows/unit-test.yml deleted file mode 100644 index 8284cee..0000000 --- a/.github/workflows/unit-test.yml +++ /dev/null @@ -1,44 +0,0 @@ -name: Unit Test - -on: - push: - branches: - - master - pull_request: - workflow_dispatch: - -jobs: - matrix: - name: 'Node ${{ matrix.node }}' - runs-on: ubuntu-latest - strategy: - matrix: - node: [16, 18] - steps: - - uses: actions/checkout@v2 - - uses: actions/setup-node@v3 - with: - node-version: ${{ matrix.node }} - - - uses: pnpm/action-setup@v2 - with: - version: 8.2.0 - - name: Get pnpm store directory - id: pnpm-cache - shell: bash - run: echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT - - uses: actions/cache@v3 - name: Setup pnpm cache - with: - path: ${{ steps.pnpm-cache.outputs.STORE_PATH }} - key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} - restore-keys: ${{ runner.os }}-pnpm-store- - - name: Install dependencies - run: pnpm install - - - name: Generate language definitions - run: pnpm run build:languages - - - name: Unit Test - run: pnpm run test - diff --git a/LICENSE b/LICENSE index 0d5e37e..8915d38 100755 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2018 Formidable +Copyright (c) 2018 Nearform Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 6b82f49..1eb3bf4 100644 --- a/README.md +++ b/README.md @@ -1,23 +1,26 @@ - - Prism React Renderer — Formidable, We build the modern web + + Prism React Renderer

- A lean Prism highlighter component for React
- Comes with everything to render Prismjs highlighted code directly to React (Native) elements, global-pollution-free! + A lean Prism highlighter component for React

-[![Maintenance Status][maintenance-image]](#maintenance-status) -## Why? +

+ + + + Maintenance Status + +

-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? +

+ Comes with everything to render Prismjs syntax highlighted code directly in React & React Native! +

-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. This library tokenises code using Prism and provides a small render-props-driven component to quickly render it out into React. This is why it even works with @@ -58,6 +61,7 @@ _(If you just want to use your Prism CSS-file themes, that's also no problem)_ - [`normalizeTokens`](#normalizetokens) - [`useTokenize`](#usetokenize) - [Theming](#theming) +- [Upgrading from v1 to v2](#upgrade) - [LICENSE](#license) - [Maintenance Status](#maintenance-status) @@ -121,14 +125,18 @@ export const App = () => ( ) -ReactDOM.createRoot(document.getElementById("root") as HTMLElement) - .render() - +ReactDOM + .createRoot(document.getElementById("root") as HTMLElement) + .render() ``` ### Custom Language Support -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 import { Highlight, Prism } from "prism-react-renderer"; @@ -256,7 +264,7 @@ advisable. #### `getLineProps` 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`. This getter will return you props to spread onto your line elements (typically `
s`). @@ -269,7 +277,7 @@ The `className` will always contain `.token-line`. #### `getTokenProps` 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`. This getter will return you props to spread onto your token elements (typically `s`). @@ -360,13 +368,64 @@ property limits styles to highlighted languages. When converting a Prism CSS theme it's mostly just necessary to use classes as `types` and convert the declarations to object-style-syntax and put them on `style`. +## 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 = ( +- ++ +``` + +### 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 MIT ## Maintenance Status -**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 - diff --git a/packages/demo/index.html b/packages/demo/index.html index d42d119..c20c08d 100644 --- a/packages/demo/index.html +++ b/packages/demo/index.html @@ -2,10 +2,10 @@ - + - Formidable – Prism React Renderer Demo + Prism React Renderer Demo
diff --git a/packages/demo/public/formidable-icon.svg b/packages/demo/public/formidable-icon.svg deleted file mode 100644 index b1beef1..0000000 --- a/packages/demo/public/formidable-icon.svg +++ /dev/null @@ -1,37 +0,0 @@ - - - - - - - - - - - - diff --git a/packages/demo/public/formidable-wordmark.svg b/packages/demo/public/formidable-wordmark.svg deleted file mode 100644 index 8c81362..0000000 --- a/packages/demo/public/formidable-wordmark.svg +++ /dev/null @@ -1,54 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/demo/public/nearform-icon.svg b/packages/demo/public/nearform-icon.svg new file mode 100644 index 0000000..4e95a02 --- /dev/null +++ b/packages/demo/public/nearform-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/demo/public/nearform-logo-white.svg b/packages/demo/public/nearform-logo-white.svg new file mode 100644 index 0000000..cd49ab3 --- /dev/null +++ b/packages/demo/public/nearform-logo-white.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/demo/src/App.tsx b/packages/demo/src/App.tsx index 957fb9e..372ccec 100644 --- a/packages/demo/src/App.tsx +++ b/packages/demo/src/App.tsx @@ -26,9 +26,9 @@ function App() {
Formidable - Formidable + Nearform @@ -206,4 +206,31 @@ impl GroceryItem { } `, }, + ["JSON"]: { + language: "json", + code: ` + { + "id": 1, + "name": "John Doe", + "email": "johndoe@example.com", + "address": { + "street": "123 Main St", + "city": "San Diego", + "state": "CA", + "zip": "12345" + }, + "phoneNumbers": [ + { + "type": "home", + "number": "555-123-4567" + }, + { + "type": "work", + "number": "555-901-2345" + } + ], + "interests": ["reading", "hiking", "coding"] + } + `, + }, } diff --git a/packages/generate-prism-languages/index.ts b/packages/generate-prism-languages/index.ts index 977114a..ca3b883 100644 --- a/packages/generate-prism-languages/index.ts +++ b/packages/generate-prism-languages/index.ts @@ -22,6 +22,7 @@ export const languagesToBundle = [ "cpp", "markdown", "python", + "json", ] /** @@ -89,10 +90,7 @@ const main = async () => { await addLanguageToOutput(language) } - console.info( - pc.bold(pc.bgYellow(pc.black("Formidable Prism React Renderer"))), - "\n" - ) + console.info(pc.bold(pc.bgYellow(pc.black("Prism React Renderer"))), "\n") console.info( pc.bgBlue(`Generated TypeScript output at:`), pc.cyan(outputPath) diff --git a/packages/prism-react-renderer/CHANGELOG.md b/packages/prism-react-renderer/CHANGELOG.md index e57810b..c71e54c 100644 --- a/packages/prism-react-renderer/CHANGELOG.md +++ b/packages/prism-react-renderer/CHANGELOG.md @@ -1,5 +1,12 @@ # prism-react-renderer +## 2.4.0 + +### Minor Changes + +- 'Add JSON as default supported language' + ([#247](https://github.com/FormidableLabs/prism-react-renderer/pull/247)) + ## 2.3.1 ### Patch Changes diff --git a/packages/prism-react-renderer/package.json b/packages/prism-react-renderer/package.json index 974c801..17eccbb 100755 --- a/packages/prism-react-renderer/package.json +++ b/packages/prism-react-renderer/package.json @@ -1,6 +1,6 @@ { "name": "prism-react-renderer", - "version": "2.3.1", + "version": "2.4.0", "description": "Renders highlighted Prism output using React", "sideEffects": true, "main": "dist/index.js", diff --git a/packages/prism-react-renderer/src/themes/gruvboxMaterialDark.ts b/packages/prism-react-renderer/src/themes/gruvboxMaterialDark.ts new file mode 100644 index 0000000..64d120f --- /dev/null +++ b/packages/prism-react-renderer/src/themes/gruvboxMaterialDark.ts @@ -0,0 +1,79 @@ +// Gruvbox Material (dark) +// Author: Sainnhe Park (https://github.com/sainnhe) +// https://github.com/sainnhe/gruvbox-material +import type { PrismTheme } from "../types" +const theme: PrismTheme = { + plain: { + color: "#ebdbb2", + backgroundColor: "#292828", + }, + styles: [ + { + types: [ + "imports", + "class-name", + "maybe-class-name", + "constant", + "doctype", + "builtin", + "function", + ], + style: { + color: "#d8a657", + }, + }, + { + types: ["property-access"], + style: { + color: "#7daea3", + }, + }, + { + types: ["tag"], + style: { + color: "#e78a4e", + }, + }, + { + types: ["attr-name", "char", "url", "regex"], + style: { + color: "#a9b665", + }, + }, + { + types: ["attr-value", "string"], + style: { + color: "#89b482", + }, + }, + { + types: ["comment", "prolog", "cdata", "operator", "inserted"], + style: { + color: "#a89984", + }, + }, + { + types: [ + "delimiter", + "boolean", + "keyword", + "selector", + "important", + "atrule", + "property", + "variable", + "deleted", + ], + style: { + color: "#ea6962", + }, + }, + { + types: ["entity", "number", "symbol"], + style: { + color: "#d3869b", + }, + }, + ], +} +export default theme diff --git a/packages/prism-react-renderer/src/themes/gruvboxMaterialLight.ts b/packages/prism-react-renderer/src/themes/gruvboxMaterialLight.ts new file mode 100644 index 0000000..ae544f6 --- /dev/null +++ b/packages/prism-react-renderer/src/themes/gruvboxMaterialLight.ts @@ -0,0 +1,78 @@ +// Gruvbox Material (light) +// Author: Sainnhe Park (https://github.com/sainnhe) +// https://github.com/sainnhe/gruvbox-material +import type { PrismTheme } from "../types" +const theme: PrismTheme = { + plain: { + color: "#654735", + backgroundColor: "#f9f5d7", + }, + styles: [ + { + types: [ + "delimiter", + "boolean", + "keyword", + "selector", + "important", + "atrule", + "property", + "variable", + "deleted", + ], + style: { + color: "#af2528", + }, + }, + { + types: [ + "imports", + "class-name", + "maybe-class-name", + "constant", + "doctype", + "builtin", + ], + style: { + color: "#b4730e", + }, + }, + { + types: ["string", "attr-value"], + style: { + color: "#477a5b", + }, + }, + { + types: ["property-access"], + style: { + color: "#266b79", + }, + }, + { + types: ["function", "attr-name", "char", "url"], + style: { + color: "#72761e", + }, + }, + { + types: ["tag"], + style: { + color: "#b94c07", + }, + }, + { + types: ["comment", "prolog", "cdata", "operator", "inserted"], + style: { + color: "#a89984", + }, + }, + { + types: ["entity", "number", "symbol"], + style: { + color: "#924f79", + }, + }, + ], +} +export default theme diff --git a/packages/prism-react-renderer/src/themes/index.ts b/packages/prism-react-renderer/src/themes/index.ts index 827549e..e94ef1f 100644 --- a/packages/prism-react-renderer/src/themes/index.ts +++ b/packages/prism-react-renderer/src/themes/index.ts @@ -16,3 +16,5 @@ export { default as jettwaveDark } from "./jettwaveDark" export { default as jettwaveLight } from "./jettwaveLight" export { default as oneDark } from "./oneDark" export { default as oneLight } from "./oneLight" +export { default as gruvboxMaterialDark } from "./gruvboxMaterialDark" +export { default as gruvboxMaterialLight } from "./gruvboxMaterialLight"