Build a React.js PrismJS Syntax Highlighter With Different Themes and Languages in JSX

App.jsx

import React from 'react';
import Editor from 'react-simple-code-editor';
import { highlight, languages } from 'prismjs/components/prism-core';
import 'prismjs/components/prism-clike';
import 'prismjs/components/prism-javascript';
import 'prismjs/themes/prism-solarizedlight.css'; //Example style, you can use another

function App() {
  const [code, setCode] = React.useState(
    `function add(a, b) {\n  return a + b;\n}`
  );
  return (
    <Editor
      value={code}
      onValueChange={code => setCode(code)}
      highlight={code => highlight(code, languages.js)}
      padding={10}
      style={{
        fontFamily: '"Fira code", "Fira Mono", monospace',
        fontSize: 12,
      }}
    />
  );
}

export default App

import React from 'react';

import Editor from 'react-simple-code-editor';

import { highlight, languages } from 'prismjs/components/prism-core';

import 'prismjs/components/prism-clike';

import 'prismjs/components/prism-javascript';

import 'prismjs/themes/prism-solarizedlight.css'; //Example style, you can use another

function App() {

const [code, setCode] = React.useState(

`function add(a, b) {\n return a + b;\n}`

);

return (

<Editor

value={code}

onValueChange={code => setCode(code)}

highlight={code => highlight(code, languages.js)}

padding={10}

style={{

fontFamily: '"Fira code", "Fira Mono", monospace',

fontSize: 12,

}}

);

}

export default App

Build a React.js PrismJS Syntax Highlighter With Different Themes and Languages in JSX

Comments

Leave a Reply Cancel reply

Archives