May 10, 2024
Implementing Code Block Design Style with Tailwind CSS and Shiki
In the realm of web development, presenting code snippets in an aesthetically pleasing and readable manner is essential for conveying information effectively. One popular approach to achieve this is by employing code block design styles. In this blog post, we'll explore how to implement a visually appealing code block design using Tailwind CSS for styling and Shiki for syntax highlighting.
Why Tailwind CSS and Shiki?
Tailwind CSS is a utility-first CSS framework that offers a vast array of pre-defined utility classes to style your elements. Its flexibility and ease of use make it a preferred choice for many developers. Shiki, on the other hand, is a high-performance syntax highlighting library that supports various programming languages and themes. By combining Tailwind CSS and Shiki, we can create stunning code block designs with syntax highlighting effortlessly.
Setting Up Your Project
Before diving into the implementation, ensure you have Node.js installed on your system. Then, create a new project directory and initialize it with npm.
mkdir code-block-design
cd code-block-design
npm init -y
Next, install Tailwind CSS and Shiki along with their dependencies.
npm install tailwindcss shiki
Now, let's set up Tailwind CSS. Create a tailwind.config.js file in your project directory.
npx tailwindcss init
This command will generate a tailwind.config.js file where you can customize Tailwind CSS according to your preferences.
Implementing the Code Block Design
First, let's create an HTML file index.html where we'll demonstrate our code block design.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Block Design</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container mx-auto">
<div class="bg-gray-800 rounded-lg p-6">
<pre class="code-block"><code class="language-javascript">
console.log("Hello, world!");
</code></pre>
</div>
</div>
</body>
</html>
In this HTML file, we've created a container with a rounded background and inserted a code block inside it. Notice the code-block class applied to the pre element. We'll define its styling in the CSS file.
Creating the CSS Styles
Now, let's create a styles.css file where we'll define our Tailwind CSS styles.
@tailwind base;
@tailwind components;
@tailwind utilities;
.code-block {
overflow-x: auto;
}
.code-block code {
display: block;
padding: 1em;
overflow-x: auto;
font-size: 14px;
}
In this CSS file, we've applied Tailwind CSS utilities along with custom styles for the code block. We ensure that the code block has horizontal scrolling when needed and provide padding to enhance readability.
Applying Syntax Highlighting with Shiki
To apply syntax highlighting using Shiki, we need to initialize it in our JavaScript file. Create a scripts.js file and include the following code:
const shiki = require('shiki');
shiki
.getHighlighter({
theme: 'nord' // Change the theme according to your preference
})
.then(highlighter => {
const codeBlocks = document.querySelectorAll('.code-block code');
codeBlocks.forEach(codeBlock => {
const code = codeBlock.textContent;
codeBlock.innerHTML = highlighter.codeToHtml(code, 'javascript');
});
});
This script fetches all code blocks with the code-block class, retrieves their content, and applies syntax highlighting using Shiki. Make sure to include this script in your HTML file before the closing </body> tag.
<script src="scripts.js"></script>
Conclusion
In this tutorial, we've demonstrated how to implement a stylish code block design using Tailwind CSS for styling and Shiki for syntax highlighting. By combining these powerful tools, you can enhance the readability and aesthetics of code snippets on your website or application. Experiment with different Tailwind CSS classes and Shiki themes to customize the design according to your preferences.
364 views