tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: adds more prismjs syntax highlighting options for code blocks (#961)

Browse Source
This commit is contained in:
Will Viles
2022-08-18 18:17:05 +01:00
committed by GitHub
parent 39586d3cdb
commit f45d5a0421
2 changed files with 20 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
docs/fields/code.mdx
View File

@@ -39,7 +39,19 @@ This field uses `prismjs` for syntax highlighting and `react-simple-code-editor`
In addition to the default [field admin config](/docs/fields/overview#admin-config), the Code field type also allows for the customization of a `language` property.
Currently, the `language` property only supports JavaScript syntax but more support will be added as requested.
The following `prismjs` plugins are imported, enabling the `language` property to accept the following values:
| Plugin | Language |
| ---------------------------- | ----------- |
| **`prism-css`** | `css` |
| **`prism-clike`** | `clike` |
| **`prism-markup`** | `markup`, `html`, `xml`, `svg`, `mathml`, `ssml`, `atom`, `rss` |
| **`prism-javascript`** | `javascript`, `js` |
| **`prism-json`** | `json` |
| **`prism-jsx`** | `jsx` |
| **`prism-typescript`** | `typescript`, `ts` |
| **`prism-tsx`** | `tsx` |
| **`prism-yaml`** | `yaml`, `yml` |
### Example

7
src/admin/components/forms/field-types/Code/Code.tsx
View File

@@ -2,7 +2,14 @@ import React, { useCallback, useState } from 'react';
import Editor from 'react-simple-code-editor';
import { highlight, languages } from 'prismjs/components/prism-core';
import 'prismjs/components/prism-clike';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-markup';
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-json';
import 'prismjs/components/prism-jsx';
import 'prismjs/components/prism-typescript';
import 'prismjs/components/prism-tsx';
import 'prismjs/components/prism-yaml';
import useField from '../../useField';
import withCondition from '../../withCondition';
import Label from '../../Label';