prism-react-renderer#Language TypeScript Examples

The following examples show how to use prism-react-renderer#Language. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: utils.ts From css-to-js with MIT License

7 votes

/**
 * Finds a transformer with the specified languages.
 * Both arguments can be omitted to weaken the constraints.
 */
export function findTransformerByLanguage(
  from?: Language,
  to?: Language
): Transformer | undefined {
  return Object.values(transformers).find((tf) => {
    if (from !== undefined && to !== undefined) {
      return tf.from === from && tf.to === to;
    } else if (from !== undefined) {
      return tf.from === from;
    } else if (to !== undefined) {
      return tf.to === to;
    }
    return true;
  });
}

Example #2

Source File: Code.tsx From 1loc with MIT License

6 votes

Code = (props) => {
    const {
        children,
        className,
        inline,
    }: {
        children: string | string[];
        className?: string;
        inline: boolean;
    } = props;

    const lang = className ? className.split('-').pop() : 'js';
    const code = Array.isArray(children) ? children[0].trim() : children.trim();

    return inline ? (
        <code className="block-markdown__code">{code}</code>
    ) : (
        <Highlight {...defaultProps} theme={theme} code={code} language={lang as Language}>
            {({ className, style, tokens, getLineProps, getTokenProps }) => (
                <pre className={`block-markdown__pre ${className}`} style={{ ...style }}>
                    {tokens.map((line, i) => (
                        <div key={i} {...getLineProps({ line, key: i })}>
                            {line.map((token, key) => (
                                <span key={key} {...getTokenProps({ token, key })} />
                            ))}
                        </div>
                    ))}
                </pre>
            )}
        </Highlight>
    );
}

Example #3

Source File: Code.tsx From this-vs-that with MIT License

6 votes

Code = (props) => {
    const {
        children,
        className,
        inline,
    }: {
        children: string[];
        className?: string;
        inline: boolean;
    } = props;

    const lang = className ? className.split('-').pop() : 'js';
    const code = children[0].trim();

    return inline ? (
        <code className="block-markdown__code">{code}</code>
    ) : (
        <Highlight {...defaultProps} theme={theme} code={code} language={lang as Language}>
            {({ className, style, tokens, getLineProps, getTokenProps }) => (
                <pre className={`block-markdown__pre ${className}`} style={{ ...style }}>
                    {tokens.map((line, i) => (
                        <div key={i} {...getLineProps({ line, key: i })}>
                            {line.map((token, key) => (
                                <span key={key} {...getTokenProps({ token, key })} />
                            ))}
                        </div>
                    ))}
                </pre>
            )}
        </Highlight>
    );
}

Example #4

Source File: utils.ts From css-to-js with MIT License

6 votes

/**
 * Finds a formatter with the specified language.
 */
export function findFormatterByLanguage(
  language: Language
): Formatter | undefined {
  return Object.values(formatters).find((fm) => fm.language === language);
}

Example #5

Source File: code-block.tsx From platyplus with MIT License

6 votes

CodeBlock: React.FC<{ code: string; language: Language }> = ({
  code,
  language
}) => (
  <Highlight {...defaultProps} code={code} language={language}>
    {({ className, style, tokens, getLineProps, getTokenProps }) => (
      <pre className={className} style={style}>
        {tokens.map((line, i) => (
          <div {...getLineProps({ line, key: i })}>
            {line.map((token, key) => (
              <span {...getTokenProps({ token, key })} />
            ))}
          </div>
        ))}
      </pre>
    )}
  </Highlight>
)