Technology

The Lightest Code Highlighter Library Prism.js

0

Code highlighter libraries are essential tools for improving readability and visually distinguishing various programming languages. Among them, Prism.js is popular among developers for its lightweight performance and ease of use. This article details the main features of Prism.js, how to install it, and how to use it in React applications.

Main Features of Prism.js

  • Lightweight: Prism.js has a very small library size, so it hardly affects web page loading speed.
  • Extensibility: You can extend the functionality through the plugin system. For example, you can add features like line numbering and code copy buttons.
  • Customizable: It supports various themes and allows you to create your own themes.
  • Supports multiple languages: It supports over 200 programming languages and markup languages.
  • Easy to use: Installation and usage are very simple, requiring only a few lines of code in an HTML file.

Representative Language Classes

Prism.js supports various programming languages and uses specific classes to apply syntax highlighting for each language. Here are some representative language classes:

  • HTML: `language-html`
  • CSS: `language-css`
  • JavaScript: `language-javascript`
  • Python: `language-python`
  • Java: `language-java`
  • C++: `language-cpp`
  • Ruby: `language-ruby`
  • PHP: `language-php`
  • SQL: `language-sql`
  • Bash: `language-bash`
  • JSON: `language-json`
  • Markdown: `language-markdown`

In addition, Prism.js supports over 200 different languages, making it easy to add the languages you need for your project.

Installing and Using Prism.js

Using Prism.js requires only a few simple settings. The example below shows how to use Prism.js in an HTML file.

1. Including CSS and JS Files

Include the styles and scripts of Prism.js.

<!DOCTYPE html>
    <html>
    <head>
      <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css" rel="stylesheet" />
    </head>
    <body>
      <pre><code class="language-javascript">
      // JavaScript example
      function helloWorld() {
        console.log("Hello, world!");
      }
      </code></pre>
      
      <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
    </body>
    </html>

2. Specifying Language Classes

Specify the language class in the `<code>` tag to apply syntax highlighting. In the above example, the JavaScript language class is used.

Using Prism.js in React Applications

Prism.js can also be easily used in React applications. The steps to apply Prism.js in React are as follows.

1. Installing Prism.js

Install Prism.js using npm.

npm install prismjs

2. Importing CSS Files

Import the CSS file of Prism.js. For example, add it to the `src/index.css` or `src/App.css` file.

/* src/index.css or src/App.css */
    @import 'prismjs/themes/prism.css';

3. Using Prism.js

You can use Prism.js to highlight code blocks in a React component. Use the `useEffect` hook to apply the highlight after the component mounts.

// src/App.js
    import React, { useEffect } from 'react';
    import Prism from 'prismjs';
    import 'prismjs/components/prism-jsx'; // Module for JSX highlighting
    
    const code = `
    import React from 'react';

    const App = () => {
      return (
        <div>
          <h1>Hello, world!</h1>
        </div>
      );
    };

    export default App;
    `;

    const App = () => {
      useEffect(() => {
        Prism.highlightAll();
      }, []);

      return (
        <div className="App">
          <pre>
            <code className="language-jsx">
              {code}
            </code>
          </pre>
        </div>
      );
    };

    export default App;

This makes it easy to implement code highlighting within React components using Prism.js. The `Prism.highlightAll()` method applies highlighting to all code blocks in the DOM. To specify the language of the code block, assign an appropriate language class to the `className` attribute.

Conclusion

Prism.js is a lightweight, feature-rich code highlighter library that supports various programming languages such as HTML, CSS, and JavaScript. It is easy to install and use, and can be easily applied in frameworks like React, making it popular among developers. If you want to improve code readability and create more professional websites, Prism.js is highly recommended.

Leave a Reply