Build a React.js Source Code Viewer to Highlight Source Code Using react-syntax-highlighter in JS

App.jsx

import React, { useState } from "react";
import { Container, Form, Button, Row, Col } from "react-bootstrap";
import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
import { docco, solarizedDark, github, monokai, shadesOfPurple } from "react-syntax-highlighter/dist/esm/styles/hljs";
import "bootstrap/dist/css/bootstrap.min.css";

// Example source code for demonstration
const exampleCode = {
  javascript: `const greet = (name) => console.log("Hello, " + name);`,
  python: `def greet(name):\n    print(f"Hello, {name}")`,
  java: `public class Main {\n    public static void main(String[] args) {\n        System.out.println("Hello, World!");\n    }\n}`,
  ruby: `def greet(name)\n  puts "Hello, #{name}"\nend`,
  c: `#include <stdio.h>\nint main() {\n  printf("Hello, World!\\n");\n  return 0;\n}`,
  html: `<!DOCTYPE html>\n<html>\n<head>\n  <title>Hello World</title>\n</head>\n<body>\n  <h1>Hello, World!</h1>\n</body>\n</html>`,
};

const themes = [
  { label: "Light (Docco)", value: docco },
  { label: "Dark (Solarized)", value: solarizedDark },
  { label: "GitHub", value: github },
  { label: "Monokai", value: monokai },
  { label: "Shades of Purple", value: shadesOfPurple },
];

const languages = [
  "javascript",
  "python",
  "java",
  "ruby",
  "c",
  "html",
  "css",
  "php",
  "typescript",
  "json",
  "bash",
  "sql",
  "xml",
];

const App = () => {
  const [language, setLanguage] = useState("javascript");
  const [theme, setTheme] = useState(docco);
  const [code, setCode] = useState(exampleCode.javascript);

  const handleLanguageChange = (e) => {
    setLanguage(e.target.value);
    setCode(exampleCode[e.target.value]);
  };

  const handleThemeChange = (e) => setTheme(themes.find(t => t.label === e.target.value).value);

  const handleCodeChange = (e) => setCode(e.target.value);

  return (
    <Container className="my-4">
      <h1 className="text-center">Source Code Viewer</h1>

      <Row>
        <Col md={6}>
          {/* Language Selection */}
          <Form.Group controlId="language" className="my-3">
            <Form.Label>Select Programming Language</Form.Label>
            <Form.Control as="select" value={language} onChange={handleLanguageChange}>
              {languages.map((lang) => (
                <option key={lang} value={lang}>
                  {lang.charAt(0).toUpperCase() + lang.slice(1)}
                </option>
              ))}
            </Form.Control>
          </Form.Group>
        </Col>

        <Col md={6}>
          {/* Theme Selection */}
          <Form.Group controlId="theme" className="my-3">
            <Form.Label>Select Theme</Form.Label>
            <Form.Control as="select" onChange={handleThemeChange}>
              {themes.map((t) => (
                <option key={t.label} value={t.label}>
                  {t.label}
                </option>
              ))}
            </Form.Control>
          </Form.Group>
        </Col>
      </Row>

      {/* Code Input Textarea */}
      <Form.Group controlId="code" className="my-3">
        <Form.Label>Enter Code</Form.Label>
        <Form.Control
          as="textarea"
          rows={6}
          value={code}
          onChange={handleCodeChange}
        />
      </Form.Group>

      {/* Display Syntax Highlighted Code */}
      <div className="mt-4">
        <h5>Highlighted Code:</h5>
        <SyntaxHighlighter
          language={language}
          style={theme}
          showLineNumbers
        >
          {code}
        </SyntaxHighlighter>
      </div>
    </Container>
  );
};

export default App;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

import React, { useState } from "react";

import { Container, Form, Button, Row, Col } from "react-bootstrap";

import { Light as SyntaxHighlighter } from "react-syntax-highlighter";

import { docco, solarizedDark, github, monokai, shadesOfPurple } from "react-syntax-highlighter/dist/esm/styles/hljs";

import "bootstrap/dist/css/bootstrap.min.css";

// Example source code for demonstration

const exampleCode = {

javascript: `const greet = (name) => console.log("Hello, " + name);`,

python: `def greet(name):\n print(f"Hello, {name}")`,

java: `public class Main {\n public static void main(String[] args) {\n System.out.println("Hello, World!");\n }\n}`,

ruby: `def greet(name)\n puts "Hello, #{name}"\nend`,

c: `#include <stdio.h>\nint main() {\n printf("Hello, World!\\n");\n return 0;\n}`,

html: `<!DOCTYPE html>\n<html>\n<head>\n <title>Hello World</title>\n</head>\n<body>\n <h1>Hello, World!</h1>\n</body>\n</html>`,

};

const themes = [

{ label: "Light (Docco)", value: docco },

{ label: "Dark (Solarized)", value: solarizedDark },

{ label: "GitHub", value: github },

{ label: "Monokai", value: monokai },

{ label: "Shades of Purple", value: shadesOfPurple },

];

const languages = [

"javascript",

"python",

"java",

"ruby",

"c",

"html",

"css",

"php",

"typescript",

"json",

"bash",

"sql",

"xml",

];

const App = () => {

const [language, setLanguage] = useState("javascript");

const [theme, setTheme] = useState(docco);

const [code, setCode] = useState(exampleCode.javascript);

const handleLanguageChange = (e) => {

setLanguage(e.target.value);

setCode(exampleCode[e.target.value]);

};

const handleThemeChange = (e) => setTheme(themes.find(t => t.label === e.target.value).value);

const handleCodeChange = (e) => setCode(e.target.value);

return (

<h1 className="text-center">Source Code Viewer</h1>

<Row>

{/* Language Selection */}

<Form.Group controlId="language" className="my-3">

<Form.Label>Select Programming Language</Form.Label>

<Form.Control as="select" value={language} onChange={handleLanguageChange}>

{languages.map((lang) => (

{lang.charAt(0).toUpperCase() + lang.slice(1)}

</option>

))}

</Form.Control>

</Form.Group>

</Col>

{/* Theme Selection */}

<Form.Group controlId="theme" className="my-3">

<Form.Label>Select Theme</Form.Label>

<Form.Control as="select" onChange={handleThemeChange}>

{themes.map((t) => (

{t.label}

</option>

))}

</Form.Control>

</Form.Group>

</Col>

</Row>

{/* Code Input Textarea */}

<Form.Group controlId="code" className="my-3">

<Form.Label>Enter Code</Form.Label>

<Form.Control

as="textarea"

rows={6}

value={code}

onChange={handleCodeChange}

</Form.Group>

{/* Display Syntax Highlighted Code */}

<h5>Highlighted Code:</h5>

<SyntaxHighlighter

language={language}

style={theme}

showLineNumbers

{code}

</SyntaxHighlighter>

</div>

</Container>

);

};

export default App;

Build a React.js Source Code Viewer to Highlight Source Code Using react-syntax-highlighter in JS

Comments

Leave a Reply Cancel reply

Archives