Use prismjs for syntax highlights

components/layout/MarkdownContent.tsx

@@ -4,8 +4,7 @@ import rehypeRaw from 'rehype-raw'
 // Need this to render tables
 import remarkGfm from 'remark-gfm'
 
-import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'
-import CodeStyle from '../styles/Code'
+import { Prism } from '../styles/Prism'
 
 import LinkSvg from '../../public/svg/link.svg'
 import styled from 'styled-components'
@@ -20,24 +19,6 @@ interface MarkdownContentProps {
   skipHtml?: boolean
 }
 
-// export function WithCodeStyles({ language: tags, value, ...props }) {
-//   const [language, ...other] = tags?.split(',') || []
-//   const copy = other.includes('copy') || language === 'copy'
-//   return (
-//     <CodeWrapper>
-//       <SyntaxHighlighter
-//         {...props}
-//         language={language}
-//         style={CodeStyle}
-//         PreTag="div"
-//       >
-//         {String(value).replace(/\n$/, '')}
-//       </SyntaxHighlighter>
-//       {copy ? <CopyCodeButton value={value} /> : null}
-//     </CodeWrapper>
-//   )
-// }
-
 export const copyToClipboard = (text: string) => {
   const el = document.createElement('textarea')
   el.value = text
@@ -180,9 +161,11 @@ export function MarkdownContent({
           const match = /language-(\w+)/.exec(className || '') || props.lang
           return !inline && match ? (
             <CodeWrapper>
-              <SyntaxHighlighter style={CodeStyle} language={match[1]}>
-                {String(children).replace(/\n$/, '')}
-              </SyntaxHighlighter>
+              <Prism
+                lang={match[1]}
+                theme="nightOwl"
+                value={String(children).replace(/\n$/, '')}
+              />
             </CodeWrapper>
           ) : (
             <code className={className} {...props}>

components/styles/DocsRichText.tsx

@@ -262,7 +262,6 @@ const DocsRichText = css`
   pre {
     background-color: var(--color-light);
     border: 1px solid var(--color-light-dark);
-    text-shadow: white 0px 1px;
     font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
     text-align: left;
     word-spacing: normal;

components/styles/Prism.tsx

@@ -1,5 +1,12 @@
 import React from 'react'
-import { Highlight, themes } from 'prism-react-renderer'
+import { Highlight, themes, Prism as rootPrism } from 'prism-react-renderer'
+
+//import 'prismjs/components/prism-bash'
+;(typeof global !== 'undefined' ? global : window).Prism = rootPrism
+require('prismjs/components/prism-bash')
+require('prismjs/components/prism-diff')
+require('prismjs/components/prism-css')
+require('prismjs/components/prism-json')
 
 export const Prism = (props: {
   value: string

content/blog/using-the-power-of-mdx-with-tina.md

@@ -13,7 +13,7 @@ Tina allows content teams and developers to work at a fast pace and removes the
 
 Step 1: Create a project with tailwind
 
-```bash,copy
+```bash
 npx create-next-app -e with-tailwindcss tina-demo
 cd tina-demo
 ```
@@ -22,7 +22,7 @@ Step 2: Add Tina to the project
 
 Use the following command inside of the project to add all the Tina dependencies and wrap the application, ready to be used.
 
-```bash,copy
+```bash
 npx @tinacms/cli@latest init
 ```
 
@@ -39,7 +39,7 @@ To first use an MDX component we need to use Tina's rich editor, this will allow
 
 Open up the `.tina/schema.ts` file and edit the body section from the following
 
-```typescript,copy
+```typescript
 {
   type: "string",
   label: "Blog Post Body",
@@ -53,7 +53,7 @@ Open up the `.tina/schema.ts` file and edit the body section from the following
 
 to
 
-```typescript,copy
+```typescript
   {
     type: 'rich-text',
     label: "Blog Post Body",
@@ -94,7 +94,7 @@ Now that you have removed the first part of the unused code, we can import `Tina
 
 At the top of the file your import section should now look like:
 
-```javascript,copy
+```javascript
 import { staticRequest, gql, getStaticPropsForTina } from 'tinacms'
 import { TinaMarkdown } from 'tinacms/dist/rich-text'
 import { createGlobalStyle } from 'styled-components'
@@ -133,7 +133,7 @@ Adding components to Tina requires the following:
 
 For this blog post, let's create a customized callout that changes based on the selection. We can have a "default", "warning", "error". To save time I have created the component for you, go ahead and create a new folder called `components` on the root of the project and create a file called `Callout.js` and paste in the following code:
 
-```javascript,copy
+```javascript
 const backgroundColor = {
   warning: 'bg-yellow-200',
   error: 'bg-red-600',
@@ -170,7 +170,7 @@ The important thing to note is the name needs to match our component name, so ou
 
 To make the experience more enjoyable, we are going to add a UI object that holds the defaults. When someone adds our Callout it will automatically have content. Below goes in our templates array.
 
-```typescript,copy
+```typescript
 {
   name: "Callout",
   label: "Callout",
@@ -200,23 +200,23 @@ To make the experience more enjoyable, we are going to add a UI object that hold
 
 The piece is to register the component with our `TinaMarkdown` . Open up the `[filename].js` file again. First, we need to import our component so add the following to the top of the file:
 
-```javascript,copy
+```javascript
 import Callout from '../../../components/Callout'
 ```
 
 For code clarity, we can create an object that contains all the different Tina-powered components. We are going to pass the props through to our components so we can define that here.
 
-```javascript,copy
+```javascript
 const components = {
-  Callout: props => {
+  Callout: (props) => {
     return <Callout callout={props} />
   },
 }
 ```
 
 Finally, we can update your `TinaMarkdown` component to pass the components for our users to use.
 
-```javascript,copy
+```javascript
 <TinaMarkdown content={content} components={components} />
 ```
 

content/blog/using-tinacms-with-nextjs.md

@@ -58,7 +58,7 @@ The `npx @tinacms/cli@latest init` command does a few things in your Next.js app
 
 Now that you have a basic Tina setup you can launch your application using the following command:
 
-```bash,copy
+```bash
 yarn dev
 ```
 
@@ -165,7 +165,7 @@ You have only replaced a single line so far, which is to update the `path` to th
 
 Now you need to handle each field for your posts frontmatter, below is the finished file:
 
-```js,copy
+```js
 import { defineSchema } from 'tinacms'
 
 export default defineSchema({
@@ -225,7 +225,7 @@ The `getStaticPaths` query is going to need to know where all of your markdown f
 
 So based upon the `postConnection` you will want to query the `sys` which is the filesystem and retrieve the `filename`, which will return all the filenames without the extension.
 
-```graphql,copy
+```graphql
 query {
   postConnection {
     edges {
@@ -241,7 +241,7 @@ query {
 
 If you run this query in the GraphQL client you will see the following returned:
 
-```json,copy
+```json
 {
   "data": {
     "postConnection": {
@@ -308,7 +308,7 @@ staticRequest({
 
 You can use the `postConnection` query from earlier to build your dynamic routes:
 
-```js,copy
+```js
 export async function getStaticPaths() {
   const postsListData = await staticRequest({
     query: `
@@ -327,7 +327,7 @@ export async function getStaticPaths() {
     variables: {},
   })
   return {
-    paths: postsListData.postConnection.edges.map(edge => ({
+    paths: postsListData.postConnection.edges.map((edge) => ({
       params: { slug: edge.node._sys.filename },
     })),
     fallback: false,
@@ -399,7 +399,7 @@ import { useTina } from 'tinacms/dist/edit-state'
 
 You can now use your query that you created as a variable, this variable will be used both in your `getStaticProps` and in your `useTina` hook.
 
-```javascript,copy
+```javascript
 const query = `query BlogPostQuery($relativePath: String!) {
   post(relativePath: $relativePath) {
     title

content/docs/cli-overview.md

@@ -61,12 +61,12 @@ This command compiles and validates the schema and generates the client and type
 
 This command takes all the common [options](#common-options) as well as a few others:
 
-| Argument                 | Description                                                                                                                     |
-| ------------------------ |---------------------------------------------------------------------------------------------------------------------------------|
-| `--tina-graphql-version` | Specify the version of `@tinacms/graphql` that the backend will use. (Only needed in advanced cases)                            |
+| Argument                 | Description                                                                                                                    |
+| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------ |
+| `--tina-graphql-version` | Specify the version of `@tinacms/graphql` that the backend will use. (Only needed in advanced cases)                           |
 | `--local`                | Will start the local Graphql server and generate the local client. This is useful for static builds but will not work with SSR |
-| `--skip-cloud-checks`    | Skip the tina cloud checks (dangerous and not recommended)                                                                      |
-| `--skip-search-indexing` | Skip the search indexing                                                                                                        |
+| `--skip-cloud-checks`    | Skip the tina cloud checks (dangerous and not recommended)                                                                     |
+| `--skip-search-indexing` | Skip the search indexing                                                                                                       |
 
 #### Examples:
 
@@ -90,26 +90,26 @@ tinacms build --local -c "next build"
 
 This will
 
-* Start the local graphql server
-* Generate the local TinaCMS client that will query the local file system
-* Produce local image paths
-* build production SPA
-* run Next build
+- Start the local graphql server
+- Generate the local TinaCMS client that will query the local file system
+- Produce local image paths
+- build production SPA
+- run Next build
 
 ### "npx @tinacms/cli@latest init"
 
 > The init command must be run inside of an existing project (E.g a NextJS project, Hugo, Jekyll, etc).
 
-```bash,copy
+```bash
 npx @tinacms/cli init
 ```
 
 This will:
 
-* Install all required dependencies for Tina.
-* Define a basic content schema in the `tina` directory.
-* Create example content in the demo directory.
-* Edit the `package.json` to have the `dev`, `build`, and `start` scripts run the tina GraphQL API.
+- Install all required dependencies for Tina.
+- Define a basic content schema in the `tina` directory.
+- Create example content in the demo directory.
+- Edit the `package.json` to have the `dev`, `build`, and `start` scripts run the tina GraphQL API.
 
 #### Options
 
@@ -121,8 +121,8 @@ This will:
 
 The `audit` command is used for checking for errors in your in your files. It currently does two things.
 
-* Checks to see if the files have the correct extension
-* Submits each file as a Graphql mutation and checks for Graphql errors
+- Checks to see if the files have the correct extension
+- Submits each file as a Graphql mutation and checks for Graphql errors
 
 By default the mutation will not change the content of the files.
 

content/docs/graphql/cli.md

@@ -9,7 +9,7 @@ The _TinaCMS CLI_ can be used to set up your project with a TinaCMS schema confi
 
 The `@tinacms/cli` package will be installed as a dev dependency with the [tina init](/docs/setup-overview/#manual-setup-on-an-existing-site) command.
 
-```bash,copy
+```bash
 npx @tinacms/cli init
 ```
 
@@ -21,7 +21,7 @@ This will setup a dummy `tina/config.{js,ts}` in your site, and install any requ
 
 This command also takes an argument (`-c`) that allows you to run a command as a child process. This is very helpful for running a dev server and building your next.js app. The scripts portion of your package.json should look like this.
 
-```json,copy
+```json
 "scripts": {
   "dev": "tinacms dev -c \"next dev\"",
   "build": "tinacms build && next build",
@@ -37,13 +37,13 @@ The reason we want to run the GraphQL API with our site is so that:
 
 Now if you run the updated `dev` script with:
 
-```bash,copy
+```bash
 npm run dev
 ```
 
 or
 
-```bash,copy
+```bash
 yarn dev
 ```
 

content/docs/introduction/tina-init.md

@@ -11,7 +11,7 @@ next: '/docs/using-tina-editor'
 
 We created a quick way to bootstrap a Tina application to show the power of visual editing; from your terminal, enter the following command:
 
-```bash,copy
+```bash
 npx @tinacms/cli@latest init
 ```
 
@@ -53,7 +53,7 @@ These should be applied manually if they haven't been set by the CLI.
 
 Now that we have a basic Tina boilerplate setup, you can launch your application using the following command:
 
-```bash,copy
+```bash
 yarn dev
 ```
 

content/docs/introduction/using-starter.md

@@ -7,7 +7,7 @@ next: '/docs/using-tina-editor'
 
 To quickly setup a new Tina starter, from the command line:
 
-```bash,copy
+```bash
 npx create-tina-app@latest
 ```
 
@@ -18,7 +18,7 @@ From there, you will be prompted a few quick setup questions:
 Once your local starter has been created, to run the starter:
 `cd <your-starter-name>` into its new directory & run:
 
-```bash,copy
+```bash
 yarn dev
 ```
 

package.json

@@ -76,6 +76,7 @@
     "polished": "^3.4.4",
     "postcss": "^8.4.18",
     "prism-react-renderer": "^2.0.6",
+    "prismjs": "^1.29.0",
     "prop-types": "^15.7.2",
     "qs": "^6.9.1",
     "raw-loader": "^4.0.0",
@@ -93,7 +94,6 @@
     "react-intersection-observer": "^9.4.0",
     "react-live": "^2.3.0",
     "react-markdown": "^8.0.3",
-    "react-syntax-highlighter": "^15.5.0",
     "react-textarea-autosize": "^7.1.2",
     "react-tinacms-editor": "^0.53.26",
     "react-use-size": "^3.0.1",