@uiw/react-prismjs

React Component for prismjs. The current document website.

Install

npm i @uiw/react-prismjs

Basic Usage

import React from 'react';
import ReactPrismjs from '@uiw/react-prismjs';
import 'prismjs/components/prism-java';

const JAVAString =`import com.demo.util.MyType;
import com.demo.util.MyInterface;

public enum Enum {
  VAL1, VAL2, VAL3
}

public class Class<T, V> implements MyInterface {
  public static final MyType<T, V> member;
  
  @Override
  public MyType method() {
    return member;
  }

  public void method2(MyType<T, V> value) {
    method();
    value.method3();
    member = value;
  }
}
`;

export default function Demo() {
  return (
    <ReactPrismjs language="java" source={JAVAString} style={{ backgroundColor: '#f6f8fa', fontSize: 16 }} />
  )
}

Theme

Support prismjs theme setting

import ReactPrismjs from '@uiw/react-prismjs';
import 'prismjs/themes/prism-coy.css';

Options Props

interface ReactPrismjsProps {
  prefixCls?: string;
  language?: string;
  source?: string;
  className?: string;
}

• source - string The code string source to parse (required)
• language - string A language id in Prism.languages.
• className - string Class name of the container element.

Development

development

Runs the project in development mode.

# listen to the component compile and output the .js file and listen for compilation output type .d.ts file
npm run watch
# development mode, listen to compile preview website instance
npm run doc:dev

Contributors

As always, thanks to our amazing contributors!

Made with contributors.

License

Licensed under the MIT License.