How to Style Code Blocks with Pre Tags in HTML

In the world of web development, presenting code snippets in a readable and aesthetically pleasing manner is crucial. Whether you are writing a technical blog post, creating documentation, or sharing code on a forum, properly styled code blocks can make a significant difference. In this article, we will explore how to style code blocks with pre tags in HTML, ensuring that your code is both readable and visually appealing.

Understanding the Concept

The pre tag in HTML stands for "preformatted text." It is used to display text exactly as it is written in the HTML file, preserving both spaces and line breaks. This makes it an ideal choice for displaying code snippets, as it maintains the formatting and indentation that are crucial for readability.

By default, the pre tag renders text in a monospaced font, which is commonly used for code. However, to enhance the appearance and readability of code blocks, additional styling with CSS is often necessary. This includes setting background colors, padding, borders, and syntax highlighting.

Practical Implementation

Ask your specific question in Mate AI

In Mate you can connect your project, ask questions about your repository, and use AI Agent to solve programming tasks

Let's dive into a step-by-step guide on how to style code blocks with pre tags in HTML and CSS.

1. Basic HTML Structure

First, we need to create a basic HTML structure that includes a pre tag to hold our code snippet:

<!DOCTYPE html>
<html>
<head>
    <title>Code Block Styling</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <pre><code>
    // Your code goes here
    </code></pre>
</body>
</html>

2. Adding Basic CSS Styles

Next, we will add some basic CSS styles to improve the appearance of our code block. Create a file named styles.css and add the following styles:

pre {
    background-color: #f5f5f5;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow-x: auto;
}

code {
    font-family: 'Courier New', Courier, monospace;
    color: #333;
}

These styles set a light gray background color, add padding for spacing, and apply a border with rounded corners. The overflow-x: auto property ensures that long lines of code are scrollable horizontally.

3. Syntax Highlighting

To further enhance the readability of our code blocks, we can add syntax highlighting. One popular library for this purpose is Prism.js. First, include the Prism.js library in your HTML file:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"></script>

Next, modify your pre tag to include the appropriate language class:

<pre class="language-javascript"><code>
// Your JavaScript code goes here
</code></pre>

Prism.js will automatically apply syntax highlighting based on the specified language class.

Common Pitfalls and Best Practices

When styling code blocks with pre tags in HTML, there are a few common pitfalls to be aware of:

Overusing inline styles: While inline styles can be convenient, they can make your HTML cluttered and harder to maintain. It's best to use external CSS files for styling.
Ignoring accessibility: Ensure that your code blocks are accessible to all users, including those using screen readers. Use semantic HTML and consider adding ARIA labels if necessary.
Neglecting mobile responsiveness: Code blocks can be challenging to read on smaller screens. Use responsive design techniques to ensure your code blocks are readable on all devices.

Here are some best practices to follow:

Consistent formatting: Ensure that your code snippets follow consistent formatting and indentation rules.
Readable colors: Choose color schemes that provide good contrast and are easy on the eyes.
Minimalistic design: Avoid excessive styling that can distract from the code itself.

Advanced Usage

For more advanced usage, you can explore additional features and customizations:

1. Line Numbers

Adding line numbers can make it easier to reference specific lines of code. Prism.js provides a plugin for this purpose. Include the plugin in your HTML file:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/line-numbers/prism-line-numbers.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/line-numbers/prism-line-numbers.min.js"></script>

Then, add the line-numbers class to your pre tag:

<pre class="line-numbers language-javascript"><code>
// Your JavaScript code goes here
</code></pre>

2. Custom Themes

You can create custom themes to match your website's design. Modify the CSS styles in your styles.css file to create a unique look for your code blocks.

3. Copy to Clipboard

Adding a "Copy to Clipboard" button can enhance the user experience. Prism.js provides a plugin for this as well. Include the plugin in your HTML file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/toolbar/prism-toolbar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>

Prism.js will automatically add a "Copy" button to your code blocks.

Conclusion

Styling code blocks with pre tags in HTML is an essential skill for web developers, technical writers, and anyone who needs to present code in a readable and visually appealing manner. By understanding the basics of the pre tag, adding CSS styles, and leveraging libraries like Prism.js, you can create beautifully styled code blocks that enhance the readability and user experience of your content.

Remember to follow best practices, avoid common pitfalls, and explore advanced features to take your code block styling to the next level. Happy coding!

AI agent for developers

Boost your productivity with Mate: easily connect your project, generate code, and debug smarter - all powered by AI.

Do you want to solve problems like this faster? Download now for free.