```js
import ReactMarkdown from 'react-markdown'
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
import {oneDark} from 'react-syntax-highlighter/dist/cjs/styles/prism'

const Code = ({ slice }) => {

  const text = slice.primary.code[0].text;

  return (
    (
      <section>
        <ReactMarkdown 
        components={{
          code({node, inline, className, children, ...props}) {
            const match = /language-(\w+)/.exec(className || '')
            return !inline && match ? (
              <SyntaxHighlighter
              style={oneDark}
              customStyle={{margin: 'none', borderTopLeftRadius: '0'}}
              language={match[1]}
              PreTag="div"
                {...props}
              > 
              {String(children).replace(/\n$/, '')}
              </SyntaxHighlighter>
              </Box>
            ) : (
              <SyntaxHighlighter>
              {children}
            </SyntaxHighlighter>
            )
          }
        }}
        >
          {text}
        </ReactMarkdown>

    )
  )

}

export default Code
```

~~~markdown
```js
console.log("This is a markdown")
```

~~~

How to Create a Code Slice with Prismic CMS and Next.js

```jsx
import React from 'react'
import { PrismicRichText } from '@prismicio/react'

/**
 * @typedef {import("@prismicio/client").Content.TextBlockSlice} TextBlockSlice
 * @typedef {import("@prismicio/react").SliceComponentProps<TextBlockSlice>} TextBlockProps
 * @param { TextBlockProps }
 */
const TextBlock = ({ slice }) => (
  <section>
    <span className="title">
      {
        slice.primary.title ?
        <PrismicRichText field={slice.primary.title}/>
        : <h2>Template slice, update me!</h2>
      }
    </span>
    {
      slice.primary.description ?
      <PrismicRichText field={slice.primary.description}/>
      : <p>start by editing this slice from inside Slice Machine!</p>
    }
    <style jsx>{`
        section {
          max-width: 600px;
          margin: 4em auto;
          text-align: center;
        }
        .title {
          color: #8592e0;
        }
    `}</style>
  </section>
)

export default TextBlock
```

```jsx
import React from 'react'
import { PrismicRichText } from '@prismicio/react'

/**
 * @typedef {import("@prismicio/client").Content.TextBlockSlice} TextBlockSlice
 * @typedef {import("@prismicio/react").SliceComponentProps<TextBlockSlice>} TextBlockProps
 * @param { TextBlockProps }
 */
const Text = ({ slice }) => (
  <section>
    {
      slice?.items?.map((item, i) =>
        <PrismicRichText field={item.text} key={i} />
      )
    }

    <style jsx>{`
        section {
          max-width: 600px;
          margin: 4em auto;
          text-align: center;
        }
        .title {
          color: #8592e0;
        }
    `}</style>
  </section>
)

export default Text
```

```jsx
import React from 'react'
import { PrismicRichText } from '@prismicio/react'
import { PrismicNextImage } from '@prismicio/next'

/**
 * @typedef {import("@prismicio/client").Content.ImageSlice} ImageSlice
 * @typedef {import("@prismicio/react").SliceComponentProps<ImageSlice>} ImageProps
 * @param { ImageProps }
 */
const Image = ({ slice }) => (
  <section>

    {
      slice.primary.image ?
      <PrismicNextImage field={slice.primary.image} />
      : <p>Image</p>
    }
    {
      slice.primary.caption ?
      <PrismicRichText field={slice.primary.caption}/>
      : <p>No Caption</p>
    }

    <style jsx>{`
        section {
          max-width: 600px;
          margin: 4em auto;
          text-align: center;
        }
        .title {
          color: #8592e0;
        }
    `}</style>
  </section>
)

export default Image
```

How to configure Prismic CMS Slices with Next.js