シンタックスハイライト

1import React from 'react';
2import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
3import jsx from 'react-syntax-highlighter/dist/cjs/languages/prism/jsx';
4import tsx from 'react-syntax-highlighter/dist/cjs/languages/prism/tsx';
5import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
6
7SyntaxHighlighter.registerLanguage('jsx', jsx);
8SyntaxHighlighter.registerLanguage('tsx', tsx);
9
10const code = `const demo = 'コードがハイライトされていることを確認してください。';
11const getUser = () => demo;`;
12
13const CodeHighlight = () => {
14  return (
15    <SyntaxHighlighter
16      language="tsx"
17      style={vscDarkPlus}
18      showLineNumbers
19      wrapLines
20      showInlineLineNumbers
21      customStyle={{ margin: 0 }}
22    >
23      {code}
24    </SyntaxHighlighter>
25  );
26};
27
28export default CodeHighlight;