How to use the react-syntax-highlighter/dist/esm/light.default 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.

github OfficeDev / office-ui-fabric-react / packages / example-app-base / src / components / templates / TypeScriptSnippet.tsx View on Github external
import * as React from 'react';
import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';

// tslint:disable no-any
const SyntaxHighlighter = require('react-syntax-highlighter/dist/esm/light').default;
const ts = require('react-syntax-highlighter/dist/esm/languages/hljs/typescript').default;
const style = require('react-syntax-highlighter/dist/styles/hljs/vs2015').default;
// tslint:enable no-any

SyntaxHighlighter.registerLanguage('typescript', ts);

export const rootClass = mergeStyles({
  overflowY: 'auto',
  maxHeight: '400px',
  display: 'flex',
  selectors: {
    code: {
      fontFamily: 'Monaco, Menlo, Consolas, "Droid Sans Mono", "Inconsolata", "Courier New", monospace',
      lineHeight: '1.6'
    }
  }
github OfficeDev / office-ui-fabric-react / packages / example-app-base / src / components / CodeSnippet / CodeSnippet.tsx View on Github external
import * as React from 'react';
import { IStyleFunctionOrObject, ITheme, IStyle, styled, classNamesFunction, IRawStyle } from 'office-ui-fabric-react';
import { NeutralColors } from '@uifabric/fluent-theme';
import { baseCodeStyle, getStyles } from './CodeSnippet.styles';

// tslint:disable no-any
const SyntaxHighlighter = require('react-syntax-highlighter/dist/esm/light').default;

// Import languages from SyntaxHighlighter
const ts = require('react-syntax-highlighter/dist/esm/languages/hljs/typescript').default;
const scss = require('react-syntax-highlighter/dist/esm/languages/hljs/scss').default;
const md = require('react-syntax-highlighter/dist/esm/languages/hljs/markdown').default;
const bash = require('react-syntax-highlighter/dist/esm/languages/hljs/bash').default;
const xml = require('react-syntax-highlighter/dist/esm/languages/hljs/xml').default;
// tslint:enable no-any

// Import SyntaxHighlighter styles
const style: { [key: string]: IRawStyle } = require('react-syntax-highlighter/dist/styles/hljs/github').default;

// Register languages
SyntaxHighlighter.registerLanguage('typescript', ts);
SyntaxHighlighter.registerLanguage('scss', scss);
SyntaxHighlighter.registerLanguage('markdown', md);