Unlock the Power of Customizable Code Editors

What is Syntax Highlighting?

Syntax highlighting is a feature built into text and code editors, as well as Integrated Development Environments (IDEs), to style a rendered block of code according to the linting rules and conventions of the programming language.

The Benefits of Syntax Highlighting

Syntax highlighting significantly enhances the developer experience (DX) obtained from coding in a specific language. By highlighting code blocks, developers can:

• Improve code readability
• Detect errors more efficiently
• Navigate code visually

Advantages of Creating a Custom Code Editor

While the HTML code element recognizes and displays computer code using a monospace font, it doesn’t do much to highlight code syntax. By creating a custom code editor, developers can tailor the user experience to meet the needs of their users through customized user interfaces.

Comparing Libraries for Syntax Highlighting

To simplify the process of highlighting code within an editor, open-source packages like Prism.js and Highlight.js have been made available to developers.

Prism.js

Prism.js is a lightweight and performant syntax highlighter library with an 18.8KB minified bundle size. It supports a wide variety of programming and markup languages and provides a large collection of themes and styles for developers to customize the look and feel of the highlighted code.

Highlight.js

Highlight.js is similar to Prism.js, supporting a broad range of programming and markup languages, alongside configuration files. However, at a 910.9KB minified bundle size, Highlight.js is not as lightweight as Prism.js. It provides advanced features such as automatic language detection from the code syntax and compatibility with old browsers.

Wireframing the React Code Editor and Syntax Highlighter

Let’s create a simple wireframe to design the layout of the components:

// App
// ControlsBox
//   Dropdown (select input language)
//   Dropdown (select theme)
// PanelsBox
//   Editor
//   Highlighter

Setting Up the React Code Editor Project

To create a project boilerplate, we’ll use Create React App, which will set up a fully configured React project in no time.

Creating the Base of Our Project

We’ll create the base structure of our project to build upon. Let’s start with the index.js file, which will render our app.

import React from 'eact';
import ReactDOM from 'eact-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Setting the States in React with useState Hook

We’ll use React’s built-in useState Hook to store the input language, theme, and user input in state variables.

import { useState } from 'eact';

function App() {
  const [inputLanguage, setInputLanguage] = useState('javascript');
  const [theme, setTheme] = useState('default');
  const [userInput, setUserInput] = useState('');

  //...
}

Creating the App Components

We’ll create separate components for Dropdown, Editor, and Highlighter to divide the building blocks of the app from the app logic.

// Dropdown.js
import React from 'eact';

const Dropdown = ({ options, value, onChange }) => {
  //...
};

export default Dropdown;

// Editor.js
import React from 'eact';

const Editor = ({ userInput, onChange }) => {
  //...
};

export default Editor;

// Highlighter.js
import React from 'eact';
import { highlight } from 'eact-syntax-highlighter';

const Highlighter = ({ code, language, theme }) => {
  //...
};

export default Highlighter;

Adding the react-syntax-highlighter Package

To highlight the code blocks, we’ll use the react-syntax-highlighter package.

npm install react-syntax-highlighter

Creating the App Logic

In this final phase, we’ll put everything together, making the app functional. We’ll import the Dropdown, Editor, and Highlighter components, set the default language and theme, and pass in the data prop to generate the dropdown options list.

import React from 'eact';
import Dropdown from './Dropdown';
import Editor from './Editor';
import Highlighter from './Highlighter';

function App() {
  //...

  return (
    <div>
      <ControlsBox>
        <Dropdown
          options={languages}
          value={inputLanguage}
          onChange={handleLanguageChange}
        />
        <Dropdown
          options={themes}
          value={theme}
          onChange={handleThemeChange}
        />
      </ControlsBox>
      <PanelsBox>
        <Editor
          userInput={userInput}
          onChange={handleUserInput}
        />
        <Highlighter
          code={userInput}
          language={inputLanguage}
          theme={theme}
        />
      </PanelsBox>
    </div>
  );
}

The Final Result

With our code editor and syntax highlighter complete, users can now type in their code and see it come alive with syntax highlighting. They can also switch between multiple languages and themes, creating a seamless coding experience.

Take Your Coding Experience to the Next Level