React code snippet component

Code written by programmer is like a unique signature. We can recognize the author by a few lines. Let's create our unique signature by creating a flexible component for code snippets.

1. Library choice

The most complicated part of the component will be code syntax highlighting. It is better to use a battle-tested library like . In our case, we will use the popular wrapper - .

The reason is simple - we can easily customize how the component works with . Below is an example of how you can display a piece of code.

The component injects the appropriate styles. We can customize the behavior and appearance to suit our needs.

2. Overwriting the theme

To override the theme we need an array in which we define styles for each element.

3. Creating Code component

We need a wrapper for our library. First, let's determine what the object will look like. We will define the interfaces in a separate file for better clarity.

Then the component itself.

We used to limit rerenders. Component will update only when code snippet changes. All that's left is to overwrite the styles we don't like.

4. Creating Snippet component

This component will be responsible for retrieving the content and deciding how to pass the parameters. It will use the previously created component. As before, let's start with the models.

The created models will be used to implement several components. Each of them will have a different role. Let's start with the component.

Pay attention to the exception that we . We did that because in the absence of and , our component will not work properly.

Also, the import of the interface from another file is noteworthy. Separation of interfaces from implementations can be helpful when we want to reuse models in other components. It also changes the way how developer thinks. It is a bit like approach. After all, is similar to one big test which checks our codebase in real time during compilation.

In this you can read more about .

5. Implementing StaticSnippet component

This one will just render code snippet passed as .

As before, we added implementation to the prepared model. In this case we just wrapped our component. We did this for the sake of transparency.

6. Creating SnippetContent component

This component adds the layout, header and description if they are passed.

Next are styles. Nothing fancy here. Just some css for and .

7. Creating DynamicSnippet component

We'll use presentation from and models that we created before.

What is going on here?

8. Generating ASCII art

We need to add some dummy characters when there are more lines in code snippet than in ASCII art to prevent content size change.

Also, when our snippet is smaller than height of ASCII art, we need to remove some lines from graphic. Reason is the same - .

9. Usage

Just pass correct props and you can customize what you need.

Right now you're able to render the code in a cool and fancy way. We've checked how separation of models can be useful to share type definitions between different files.

Maybe there is a place for improvements. Feel free to try and remember to share results on our .