Build a Simple React Component for a Dynamic Code Snippet Display

Written by

javascriptfundamentals

in

In the digital age, sharing and understanding code snippets is a fundamental skill for developers. Whether you’re collaborating with colleagues, teaching a coding class, or contributing to open-source projects, the ability to present code clearly and effectively is crucial. Imagine trying to explain a complex algorithm through a wall of text, or struggling to maintain code formatting across different platforms. The challenges are real: readability suffers, errors creep in, and the learning curve steepens. This is where a dynamic code snippet display component in React can become an invaluable tool.

Why Build a Dynamic Code Snippet Display?

A well-designed code snippet display solves several problems:

  • Improved Readability: Syntax highlighting, line numbers, and proper indentation make code easier to scan and understand.
  • Enhanced Learning: Code becomes more accessible, facilitating learning and comprehension, especially for beginners.
  • Simplified Sharing: Easily share code snippets across various platforms without losing formatting.
  • Reduced Errors: Clear formatting helps in identifying and preventing errors.

Setting Up Your React Project

Before diving into the code, make sure you have Node.js and npm (or yarn) installed on your system. If you don’t have these, you can download them from the official Node.js website. Then, create a new React app using Create React App:

npx create-react-app code-snippet-display
cd code-snippet-display

This command sets up a basic React project with all the necessary dependencies. Now, let’s install a library for syntax highlighting. There are several options available; for this tutorial, we’ll use ‘prismjs’. Run the following command:

npm install prismjs react-prism --save

Or, if you prefer yarn:

yarn add prismjs react-prism

‘prismjs’ is a lightweight library that provides syntax highlighting for a wide range of programming languages. ‘react-prism’ is a React component that simplifies the integration of prismjs into your React application.

Creating the CodeSnippet Component

Inside your ‘src’ directory, create a new file named ‘CodeSnippet.js’. This will be our component. Let’s start with the basic structure:

import React from 'react';
import Prism from 'react-prism';

function CodeSnippet(props) {
  return (
    <div className="code-snippet-container">
      <pre className="language-javascript">
        <code>
          {props.code}
        </code>
      </pre>
    </div>
  );
}

export default CodeSnippet;

In this basic structure, we import ‘react’ and ‘react-prism’. We create a functional component ‘CodeSnippet’ that receives a ‘code’ prop. This prop will hold the code snippet we want to display. We render this code inside a ‘pre’ tag with the class ‘language-javascript’ (you can change this to match the language of your code) and the ‘code’ tag to render the code. The ‘code-snippet-container’ div is used for styling purposes. Make sure you import Prism from ‘react-prism’.

Adding Styling

To make the code snippet look good, we need to add some CSS. Create a file named ‘CodeSnippet.css’ in the same directory and add the following styles:

.code-snippet-container {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: auto;
  margin-bottom: 1em;
}

.code-snippet-container pre {
  padding: 1em;
  margin: 0;
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  font-size: 14px;
  line-height: 1.4;
}

.code-snippet-container code {
  display: block;
  padding: 0;
}

These styles provide a basic appearance for the code snippet container, including background color, border, padding, and a monospace font for better readability. Import this CSS file into your ‘CodeSnippet.js’ file:

import React from 'react';
import Prism from 'react-prism';
import './CodeSnippet.css'; // Import the CSS file

function CodeSnippet(props) {
  return (
    <div className="code-snippet-container">
      <pre className="language-javascript">
        <code>
          {props.code}
        </code>
      </pre>
    </div>
  );
}

export default CodeSnippet;

Using the CodeSnippet Component

Now, let’s use the ‘CodeSnippet’ component in your ‘App.js’ file. Replace the existing content with the following:

import React from 'react';
import CodeSnippet from './CodeSnippet';

function App() {
  const code = `function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("World");`;

  return (
    <div className="App">
      <h2>Code Snippet Example</h2>
      <CodeSnippet code={code} />
    </div>
  );
}

export default App;

Here, we import the ‘CodeSnippet’ component and define a ‘code’ variable containing a JavaScript code snippet. We pass this code as a prop to the ‘CodeSnippet’ component. When you run your application (npm start or yarn start), you should see the code snippet rendered with syntax highlighting.

Advanced Features and Customization

Syntax Highlighting

The core of the component is the syntax highlighting. Prism.js automatically detects the language based on the class name of the ‘pre’ tag (e.g., ‘language-javascript’). You can easily support other languages by changing this class name. For example, for Python, you would use ‘language-python’.

Line Numbers

To add line numbers, you can use a Prism.js plugin. First, install the plugin:

npm install prismjs --save

Then, import the plugin in your ‘CodeSnippet.js’ file and apply it.

import React from 'react';
import Prism from 'react-prism';
import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
import './CodeSnippet.css';

function CodeSnippet(props) {
  return (
    <div className="code-snippet-container">
      <pre className="language-javascript line-numbers">
        <code>
          {props.code}
        </code>
      </pre>
    </div>
  );
}

export default CodeSnippet;

Add the class ‘line-numbers’ to the ‘pre’ tag. This will enable line numbering. Also, import the CSS and JS files for the line numbers plugin. This will add line numbers to your code snippets.

Dynamic Language Selection

Instead of hardcoding the language, you can make it dynamic by accepting a ‘language’ prop. Modify your ‘CodeSnippet.js’ file:

import React from 'react';
import Prism from 'react-prism';
import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
import './CodeSnippet.css';

function CodeSnippet(props) {
  const { code, language } = props;
  return (
    <div className="code-snippet-container">
      <pre className={`language-${language} line-numbers`}>
        <code>
          {code}
        </code>
      </pre>
    </div>
  );
}

export default CodeSnippet;

Update your ‘App.js’ file to use the ‘language’ prop:

import React from 'react';
import CodeSnippet from './CodeSnippet';

function App() {
  const javascriptCode = `function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("World");`;

  const pythonCode = `def greet(name):
  print(f"Hello, {name}!")

greet("World")`;

  return (
    <div className="App">
      <h2>JavaScript Example</h2>
      <CodeSnippet code={javascriptCode} language="javascript" />
      <h2>Python Example</h2>
      <CodeSnippet code={pythonCode} language="python" />
    </div>
  );
}

export default App;

Now, you can specify the language for each code snippet. This makes the component more versatile.

Collapsible Code Snippets

To make the code snippets collapsible, you can add a button that toggles the visibility of the code. Modify your ‘CodeSnippet.js’ file:

import React, { useState } from 'react';
import Prism from 'react-prism';
import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
import './CodeSnippet.css';

function CodeSnippet(props) {
  const { code, language } = props;
  const [isCollapsed, setIsCollapsed] = useState(false);

  return (
    <div className="code-snippet-container">
      <button onClick={() => setIsCollapsed(!isCollapsed)}>
        <span>{isCollapsed ? 'Show' : 'Hide'} Code</span>
      </button>
      {!isCollapsed && (
        <pre className={`language-${language} line-numbers`}>
          <code>
            {code}
          </code>
        </pre>
      )}
    </div>
  );
}

export default CodeSnippet;

In this updated version, we use the useState hook to manage the collapsed state. We add a button that toggles the isCollapsed state. The code snippet is only displayed if isCollapsed is false.

Copy to Clipboard Functionality

A common feature is the ability to copy the code snippet to the clipboard. This can be implemented using the navigator.clipboard.writeText() API. Modify your ‘CodeSnippet.js’ file:

import React, { useState } from 'react';
import Prism from 'react-prism';
import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
import './CodeSnippet.css';

function CodeSnippet(props) {
  const { code, language } = props;
  const [isCollapsed, setIsCollapsed] = useState(false);
  const [isCopied, setIsCopied] = useState(false);

  const copyToClipboard = () => {
    navigator.clipboard.writeText(code)
      .then(() => {
        setIsCopied(true);
        setTimeout(() => setIsCopied(false), 2000);
      })
      .catch(err => console.error('Could not copy text: ', err));
  };

  return (
    <div className="code-snippet-container">
      <button onClick={() => setIsCollapsed(!isCollapsed)}>
        <span>{isCollapsed ? 'Show' : 'Hide'} Code</span>
      </button>
      <button onClick={copyToClipboard} style={{ marginLeft: '10px' }}>
        <span>{isCopied ? 'Copied!' : 'Copy'}</span>
      </button>
      {!isCollapsed && (
        <pre className={`language-${language} line-numbers`}>
          <code>
            {code}
          </code>
        </pre>
      )}
    </div>
  );
}

export default CodeSnippet;

We add a new state variable isCopied to indicate whether the code has been copied. The copyToClipboard function uses navigator.clipboard.writeText() to copy the code to the clipboard. We display a “Copied!” message briefly after copying the code.

Error Handling

While this component is relatively simple, you might want to add error handling. For example, if the code prop is missing or invalid, you could display an error message. You can add a check at the beginning of the component:

import React, { useState } from 'react';
import Prism from 'react-prism';
import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
import './CodeSnippet.css';

function CodeSnippet(props) {
  const { code, language } = props;
  const [isCollapsed, setIsCollapsed] = useState(false);
  const [isCopied, setIsCopied] = useState(false);

  const copyToClipboard = () => {
    navigator.clipboard.writeText(code)
      .then(() => {
        setIsCopied(true);
        setTimeout(() => setIsCopied(false), 2000);
      })
      .catch(err => console.error('Could not copy text: ', err));
  };

  if (!code) {
    return <div className="code-snippet-container">Error: No code provided</div>;
  }

  return (
    <div className="code-snippet-container">
      <button onClick={() => setIsCollapsed(!isCollapsed)}>
        <span>{isCollapsed ? 'Show' : 'Hide'} Code</span>
      </button>
      <button onClick={copyToClipboard} style={{ marginLeft: '10px' }}>
        <span>{isCopied ? 'Copied!' : 'Copy'}</span>
      </button>
      {!isCollapsed && (
        <pre className={`language-${language} line-numbers`}>
          <code>
            {code}
          </code>
        </pre>
      )}
    </div>
  );
}

export default CodeSnippet;

Common Mistakes and How to Fix Them

Incorrect Language Class

One common mistake is using the wrong language class in the ‘pre’ tag. For example, if you’re displaying Python code but use ‘language-javascript’, the syntax highlighting won’t work correctly. Ensure the class matches the language of your code.

Fix: Double-check the language class in the ‘pre’ tag (e.g., ‘language-python’, ‘language-javascript’, ‘language-java’) to match the code’s language.

Missing Dependencies

If syntax highlighting isn’t working, you might have forgotten to install and import the necessary dependencies, such as ‘prismjs’ and ‘react-prism’.

Fix: Run npm install prismjs react-prism --save and make sure you have imported them correctly at the top of your ‘CodeSnippet.js’ file.

CSS Conflicts

Sometimes, CSS styles from other parts of your application can interfere with the appearance of the code snippet. This can lead to unexpected formatting issues.

Fix: Use more specific CSS selectors to target the code snippet styles. You can also consider using CSS-in-JS solutions or scoping your CSS to the component to avoid conflicts.

Incorrect Prop Usage

Make sure you pass the code snippet as a prop correctly. If you’re using the ‘language’ prop, ensure it is passed correctly.

Fix: Verify that the ‘code’ and ‘language’ props are correctly passed to the ‘CodeSnippet’ component in your ‘App.js’ or the parent component.

SEO Best Practices

To ensure your code snippet display component ranks well on search engines, follow these SEO best practices:

  • Use Descriptive Titles: The article title should accurately reflect the content.
  • Optimize Meta Descriptions: Write a concise meta description (around 150-160 characters) that summarizes the article.
  • Use Keywords Naturally: Integrate relevant keywords (e.g., “React code snippet,” “syntax highlighting,” “code display”) naturally throughout the content.
  • Use Headings (H2, H3, H4): Structure your content with headings and subheadings to improve readability and help search engines understand the topic.
  • Use Alt Text for Images: If you include images, use descriptive alt text.
  • Ensure Mobile-Friendliness: Make sure your code snippet display component is responsive and works well on mobile devices.
  • Improve Page Speed: Optimize your code and images to ensure fast loading times.

Summary / Key Takeaways

  • We’ve built a dynamic code snippet display component in React using ‘prismjs’ for syntax highlighting.
  • The component can be customized with features like line numbers, collapsible sections, and copy-to-clipboard functionality.
  • We covered common mistakes and how to fix them, as well as SEO best practices.
  • This component significantly improves the readability and usability of code snippets in your web applications.

FAQ

1. Can I use this component with different programming languages?

Yes, you can. The core of the component is the syntax highlighting provided by Prism.js. You can support different languages by changing the class name in the ‘pre’ tag (e.g., ‘language-python’, ‘language-java’). You may need to include Prism.js plugins for specific languages if they are not included by default.

2. How can I customize the appearance of the code snippets?

You can customize the appearance by modifying the CSS styles in the ‘CodeSnippet.css’ file. You can change the font, background color, border, padding, and other styling properties to match your design preferences.

3. How do I add line numbers to the code snippets?

To add line numbers, install the Prism.js line numbers plugin (npm install prismjs --save), import the necessary CSS and JavaScript files, and add the ‘line-numbers’ class to the ‘pre’ tag. This activates the line numbering feature.

4. Can I make the code snippets collapsible?

Yes, you can use the useState hook to manage a collapsed state. Add a button that toggles the visibility of the code based on this state. This provides a clean way to hide or show the code snippets.

5. How can I copy the code to the clipboard?

You can use the navigator.clipboard.writeText() API to copy the code to the clipboard. Implement a function that calls this API when a button is clicked. You can then provide visual feedback to the user (e.g., a “Copied!” message).

The creation of a dynamic code snippet display component in React provides a powerful solution for presenting code effectively. By following the steps and incorporating the features we’ve discussed, you can significantly improve the clarity and usability of code snippets in your projects. From syntax highlighting to collapsible sections and copy-to-clipboard functionality, this component empowers developers, educators, and content creators to share and understand code with ease. The ability to customize the appearance and behavior further enhances its versatility, making it a valuable asset for any web application dealing with code. The ability to display code clearly is essential in modern development. Whether you’re building a tutorial, documenting an API, or simply sharing code with a colleague, a well-designed code snippet display can make all the difference in readability, comprehension, and overall user experience. This component is more than just a tool; it’s a gateway to clearer communication and more effective learning in the world of code.

” ,
“aigenerated_tags”: “React, Code Snippet, Syntax Highlighting, PrismJS, Component, Tutorial, JavaScript, Web Development

More posts