View all react-syntax-highlighter analysis

How to use the react-syntax-highlighter.PrismLight.registerLanguage function in react-syntax-highlighter

To help you get started, we’ve selected a few react-syntax-highlighter 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.

Kozea / formol / stories / home.stories.jsx View on Github

/* eslint-disable react/no-multi-comp */
import './home.sass'

import { Block } from 'bemboo'
import React from 'react'
import { storiesOf } from '@storybook/react'
import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'
import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx'
import sass from 'react-syntax-highlighter/dist/esm/languages/prism/sass'
import prism from 'react-syntax-highlighter/dist/esm/styles/prism/prism'

import Formol, { Conditional, Field, Inliner } from '../src'
import pkg from '../package.json'

SyntaxHighlighter.registerLanguage('jsx', jsx)
SyntaxHighlighter.registerLanguage('sass', sass)

const dedent = (strs, ...values) =&gt; {
  const str = strs
    .reduce((s, part, i) =&gt; s + values[i - 1] + part)
    .replace(/^\n/, '')
  const level = str.length - str.replace(/^ +/, '').length
  return str
    .split('\n')
    .map(line =&gt; line.slice(level))
    .join('\n')
}

const Exemple1 = () =&gt; (

Kozea / formol / stories / home.stories.jsx View on Github

/* eslint-disable react/no-multi-comp */
import './home.sass'

import { Block } from 'bemboo'
import React from 'react'
import { storiesOf } from '@storybook/react'
import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'
import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx'
import sass from 'react-syntax-highlighter/dist/esm/languages/prism/sass'
import prism from 'react-syntax-highlighter/dist/esm/styles/prism/prism'

import Formol, { Conditional, Field, Inliner } from '../src'
import pkg from '../package.json'

SyntaxHighlighter.registerLanguage('jsx', jsx)
SyntaxHighlighter.registerLanguage('sass', sass)

const dedent = (strs, ...values) =&gt; {
  const str = strs
    .reduce((s, part, i) =&gt; s + values[i - 1] + part)
    .replace(/^\n/, '')
  const level = str.length - str.replace(/^ +/, '').length
  return str
    .split('\n')
    .map(line =&gt; line.slice(level))
    .join('\n')
}

const Exemple1 = () =&gt; (
  
      // eslint-disable-next-line no-alert

aliyun / alibabacloud-console-components / packages / gatsby-theme-console-doc / src / runtime / CodeBlock.tsx View on Github

import React from 'react'
import styled from 'styled-components'

import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'
import js from 'react-syntax-highlighter/dist/esm/languages/prism/javascript'
import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx'
import ts from 'react-syntax-highlighter/dist/esm/languages/prism/typescript'
import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx'
import prism from 'react-syntax-highlighter/dist/esm/styles/prism/prism'

SyntaxHighlighter.registerLanguage('js', js)
SyntaxHighlighter.registerLanguage('javascript', js)
SyntaxHighlighter.registerLanguage('jsx', jsx)
SyntaxHighlighter.registerLanguage('ts', ts)
SyntaxHighlighter.registerLanguage('typescript', ts)
SyntaxHighlighter.registerLanguage('tsx', tsx)

const CodeBlock: React.FC&lt;{
  language: 'js' | 'javascript' | 'jsx' | 'ts' | 'typescript' | 'tsx'
  style?: React.CSSProperties
  className?: string
}&gt; = ({ language, style, children, className }) =&gt; {
  let actualLanguage = language
  if (!actualLanguage &amp;&amp; typeof className === 'string') {
    // try to infer language from classname like: 'language-javascript'
    for (const classN of className.split(' ')) {
      const match = classN.match(/^language-(.*)$/)
      if (match) {
        actualLanguage = match[1] as any

aliyun / alibabacloud-console-components / site / gatsby-browser.js View on Github

export const onClientEntry = () => {
  SyntaxHighlighter.registerLanguage('scss', scss)
}

mxmzb / react-marquee-slider / example / src / components / Code.js View on Github

const Container = styled.div`
  margin: 0;
  width: 100%;
  max-width: 100%;

  @media (min-width: 42rem) {
    margin: 0 -16px;
  }

  span.token {
    white-space: pre-wrap !important;
    word-break: break-all !important;
  }
`;

SyntaxHighlighter.registerLanguage("jsx", jsx);

const Code = ({ children }) =&gt; (
  
    
      {children}
    
  
);

export default Code;

storybookjs / storybook / lib / components / src / syntaxhighlighter / syntaxhighlighter.tsx View on Github

import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash';
import css from 'react-syntax-highlighter/dist/esm/languages/prism/css';
import html from 'react-syntax-highlighter/dist/esm/languages/prism/markup';

import { PrismLight as ReactSyntaxHighlighter } from 'react-syntax-highlighter';

import { ActionBar } from '../ActionBar/ActionBar';
import { ScrollArea } from '../ScrollArea/ScrollArea';

import { formatter } from './formatter';

ReactSyntaxHighlighter.registerLanguage('jsx', jsx);
ReactSyntaxHighlighter.registerLanguage('bash', bash);
ReactSyntaxHighlighter.registerLanguage('css', css);
ReactSyntaxHighlighter.registerLanguage('html', html);

const themedSyntax = memoize(2)(theme =&gt;
  Object.entries(theme.code || {}).reduce((acc, [key, val]) =&gt; ({ ...acc, [`* .${key}`]: val }), {})
);

export interface WrapperProps {
  bordered?: boolean;
  padded?: boolean;
}

const Wrapper = styled.div(
  ({ theme }) =&gt; ({
    position: 'relative',
    overflow: 'hidden',
    color: theme.color.defaultText,

storybookjs / storybook / lib / components / src / syntaxhighlighter / syntaxhighlighter.tsx View on Github

import { document, window } from 'global';
import memoize from 'memoizerific';

import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash';
import css from 'react-syntax-highlighter/dist/esm/languages/prism/css';
import html from 'react-syntax-highlighter/dist/esm/languages/prism/markup';

import { PrismLight as ReactSyntaxHighlighter } from 'react-syntax-highlighter';

import { ActionBar } from '../ActionBar/ActionBar';
import { ScrollArea } from '../ScrollArea/ScrollArea';

import { formatter } from './formatter';

ReactSyntaxHighlighter.registerLanguage('jsx', jsx);
ReactSyntaxHighlighter.registerLanguage('bash', bash);
ReactSyntaxHighlighter.registerLanguage('css', css);
ReactSyntaxHighlighter.registerLanguage('html', html);

const themedSyntax = memoize(2)(theme =&gt;
  Object.entries(theme.code || {}).reduce((acc, [key, val]) =&gt; ({ ...acc, [`* .${key}`]: val }), {})
);

export interface WrapperProps {
  bordered?: boolean;
  padded?: boolean;
}

const Wrapper = styled.div(
  ({ theme }) =&gt; ({
    position: 'relative',

storybookjs / storybook / lib / components / src / syntaxhighlighter / syntaxhighlighter.tsx View on Github

import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash';
import css from 'react-syntax-highlighter/dist/esm/languages/prism/css';
import html from 'react-syntax-highlighter/dist/esm/languages/prism/markup';

import { PrismLight as ReactSyntaxHighlighter } from 'react-syntax-highlighter';

import { ActionBar } from '../ActionBar/ActionBar';
import { ScrollArea } from '../ScrollArea/ScrollArea';

import { formatter } from './formatter';

ReactSyntaxHighlighter.registerLanguage('jsx', jsx);
ReactSyntaxHighlighter.registerLanguage('bash', bash);
ReactSyntaxHighlighter.registerLanguage('css', css);
ReactSyntaxHighlighter.registerLanguage('html', html);

const themedSyntax = memoize(2)(theme =&gt;
  Object.entries(theme.code || {}).reduce((acc, [key, val]) =&gt; ({ ...acc, [`* .${key}`]: val }), {})
);

export interface WrapperProps {
  bordered?: boolean;
  padded?: boolean;
}

const Wrapper = styled.div(
  ({ theme }) =&gt; ({
    position: 'relative',
    overflow: 'hidden',
    color: theme.color.defaultText,
  }),

storybookjs / storybook / lib / components / src / syntaxhighlighter / syntaxhighlighter.tsx View on Github

import memoize from 'memoizerific';

import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash';
import css from 'react-syntax-highlighter/dist/esm/languages/prism/css';
import html from 'react-syntax-highlighter/dist/esm/languages/prism/markup';

import { PrismLight as ReactSyntaxHighlighter } from 'react-syntax-highlighter';

import { ActionBar } from '../ActionBar/ActionBar';
import { ScrollArea } from '../ScrollArea/ScrollArea';

import { formatter } from './formatter';

ReactSyntaxHighlighter.registerLanguage('jsx', jsx);
ReactSyntaxHighlighter.registerLanguage('bash', bash);
ReactSyntaxHighlighter.registerLanguage('css', css);
ReactSyntaxHighlighter.registerLanguage('html', html);

const themedSyntax = memoize(2)(theme =&gt;
  Object.entries(theme.code || {}).reduce((acc, [key, val]) =&gt; ({ ...acc, [`* .${key}`]: val }), {})
);

export interface WrapperProps {
  bordered?: boolean;
  padded?: boolean;
}

const Wrapper = styled.div(
  ({ theme }) =&gt; ({
    position: 'relative',
    overflow: 'hidden',

tannerlinsley / react-charts / www / src / components / SyntaxHighlighter.js View on Github

import React from 'react'
import { PrismLight } from 'react-syntax-highlighter'
import jsx from 'react-syntax-highlighter/dist/cjs/languages/prism/jsx'
import theme from 'react-syntax-highlighter/dist/cjs/styles/prism/tomorrow'

PrismLight.registerLanguage('javascript', jsx)

export default function SyntaxHighlighter({ code }) {
  return (
    
      {code}
    
  )
}

How to use the react-syntax-highlighter.PrismLight.registerLanguage function in react-syntax-highlighter

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

react-syntax-highlighter

Package Health Score

Popular react-syntax-highlighter functions

Similar packages