Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update readme and cleanup build tooling #242

Merged
merged 2 commits into from
Apr 11, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions .github/actions/setup/action.yml
Original file line number Diff line number Diff line change
@@ -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
22 changes: 2 additions & 20 deletions .github/workflows/release.yml
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
name: Prism React Renderer Release Workflow
name: Release Workflow

on:
push:
Expand All @@ -19,25 +19,7 @@ jobs:

steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 18

- uses: pnpm/action-setup@v3
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@v4
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: ./.github/actions/setup

- name: Build packages
run: pnpm run build
Expand Down
31 changes: 11 additions & 20 deletions .github/workflows/static-analysis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ on:
branches:
- master
pull_request:
workflow_dispatch:
branches:
- master

jobs:
static-analysis:
Expand All @@ -14,29 +15,19 @@ jobs:

steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 18

- uses: pnpm/action-setup@v3
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@v4
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: ./.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
42 changes: 0 additions & 42 deletions .github/workflows/unit-test.yml

This file was deleted.

2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -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
Expand Down
95 changes: 77 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,23 +1,26 @@
<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.

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
Expand Down Expand Up @@ -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)

Expand Down Expand Up @@ -121,14 +125,18 @@ export const App = () => (
</Highlight>
)

ReactDOM.createRoot(document.getElementById("root") as HTMLElement)
.render(<App />)

ReactDOM
.createRoot(document.getElementById("root") as HTMLElement)
.render(<App />)
```

### 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";
Expand Down Expand Up @@ -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 = (
- <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

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

4 changes: 2 additions & 2 deletions packages/demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/formidable-icon.svg" />
<link rel="icon" type="image/svg+xml" href="/nearform-icon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">
<title>Formidable – Prism React Renderer Demo</title>
<title>Prism React Renderer Demo</title>
</head>
<body>
<div id="root"></div>
Expand Down
37 changes: 0 additions & 37 deletions packages/demo/public/formidable-icon.svg

This file was deleted.

54 changes: 0 additions & 54 deletions packages/demo/public/formidable-wordmark.svg

This file was deleted.

Loading