How to use prism-react-renderer - 7 common examples

{tokens.map((line, i) =>
              line.map((token, key) => (
                <span>
              ))
            )}
          
        )}
      
    );
  }

  // default to Block
  return (
    
      {({ className, style, tokens, getLineProps, getTokenProps }) =&gt; (
        <pre style="{style}">          {tokens.map((line, i) =&gt; (
            <div>
              {line.map((token, key) =&gt; (
                <span></span></div></pre></span>

/* eslint react/jsx-boolean-value: 0 */
/* eslint no-unused-vars: 0 */
/* eslint react/prop-types: 0 */
/* eslint react/destructuring-assignment: 0 */
import React from 'react'
import Highlight, { defaultProps } from 'prism-react-renderer'
import theme from 'prism-react-renderer/themes/vsDark'
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
import styled from 'styled-components'

const StyledEditor = styled(LiveEditor)`
  background: ${theme.plain.backgroundColor};
  border-radius: 5px;
  margin-bottom: 1rem;
`

const Code = ({ codeString, language, ...props }) => {
  if (props['react-live']) {
    return (
      
        
        
        
      
    )
  }
  return (

export const Playground = ({ code: initialCode, scope }) => {
  const [ code, setCode ] = useState(initialCode);
  const [ clip, setClip ] = useState(false);
  const { db: { config } } = useContext(contextDB as any);
  const stylesPlain = (config.prism && config.prism.theme.plain) || dracula.plain;
  const handleClipboard = () => {
    copy(code);
    setClip(true);
    setTimeout(() => setClip(false), 500);
  };

  const highlight = code => (
    
      {({ className, style, tokens, getLineProps, getTokenProps }) => (
        
          {tokens.map((line, i) => (

export const Highlight: React.FC = ({ code }) => {
  const [ clip, setClip ] = useState(false);
  const { db: { config } } = useContext(contextDB as any);
  const stylesPlain = (config.prism && config.prism.theme.plain) || dracula.plain;

  const handleClipboard = () => {
    copy(code);
    setClip(true);
    setTimeout(() => setClip(false), 400);
  };

  return(
    
      {({ tokens, getLineProps, getTokenProps, style, className }) => {
        return(

const App = () => (
  <div style="{{">
    <div style="{{">
    
    <div style="{{">
    </div></div></div>

const App = () => (
  <div style="{{">
    <div style="{{">
    
    <div style="{{">
    </div></div></div>

const Prism = ({ code, className }) => {
  const classes = useStyles();
  return (
    
      {({ className: cls, style, tokens, getLineProps, getTokenProps }) => (
        <pre style="{style}">          {tokens.map((line, i) =&gt; (
            <div>
              {line.map((token, key) =&gt; (
                <span>
              ))}
            </span></div>
          ))}
        </pre>
      )}