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

To help you get started, we’ve selected a few prism-react-renderer examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github ChristopherBiscardi / christopherbiscardi.github.com / packages / typography / code.js View on Github external
{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>
github LekoArts / gatsby-starter-minimal-blog / src / components / Code.js View on Github external
/* 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 }) =&gt; {
  if (props['react-live']) {
    return (
      
        
        
        
      
    )
  }
  return (
github wilsson / papyrum / packages / papyrum-ui-docs / src / components / Playground / Playground.tsx View on Github external
export const Playground = ({ code: initialCode, scope }) =&gt; {
  const [ code, setCode ] = useState(initialCode);
  const [ clip, setClip ] = useState(false);
  const { db: { config } } = useContext(contextDB as any);
  const stylesPlain = (config.prism &amp;&amp; config.prism.theme.plain) || dracula.plain;
  const handleClipboard = () =&gt; {
    copy(code);
    setClip(true);
    setTimeout(() =&gt; setClip(false), 500);
  };

  const highlight = code =&gt; (
    
      {({ className, style, tokens, getLineProps, getTokenProps }) =&gt; (
        
          {tokens.map((line, i) =&gt; (
github wilsson / papyrum / packages / papyrum-ui / src / components / Highlight / Highlight.tsx View on Github external
export const Highlight: React.FC = ({ code }) =&gt; {
  const [ clip, setClip ] = useState(false);
  const { db: { config } } = useContext(contextDB as any);
  const stylesPlain = (config.prism &amp;&amp; config.prism.theme.plain) || dracula.plain;

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

  return(
    
      {({ tokens, getLineProps, getTokenProps, style, className }) =&gt; {
        return(
github pomber / code-surfer / fixtures / react-ssr / src / app.js View on Github external
const App = () =&gt; (
  <div style="{{">
    <div style="{{">
    
    <div style="{{">
    </div></div></div>
github pomber / code-surfer / fixtures / react-ssr / src / app.js View on Github external
const App = () =&gt; (
  <div style="{{">
    <div style="{{">
    
    <div style="{{">
    </div></div></div>
github siriwatknp / mui-treasury / website / src / components / molecules / Prism.js View on Github external
const Prism = ({ code, className }) =&gt; {
  const classes = useStyles();
  return (
    
      {({ className: cls, style, tokens, getLineProps, getTokenProps }) =&gt; (
        <pre style="{style}">          {tokens.map((line, i) =&gt; (
            <div>
              {line.map((token, key) =&gt; (
                <span>
              ))}
            </span></div>
          ))}
        </pre>
      )}

prism-react-renderer

Renders highlighted Prism output using React

MIT
Latest version published 2 months ago

Package Health Score

86 / 100
Full package analysis

Similar packages