CSS Examples
Creating a styled code block with CSS for displaying code snippets
HTML Structure:
Start with a basic HTML structure to contain your code block. Use the <pre> element for preserving whitespace and the <code> element for marking up the code. You can also include a <div> for additional styling if needed.
/*HTML*/
<div class="codebox">
<pre>
<code>
/*your code goes here*/
</code>
</pre>
</div>
CSS Styling:
Create CSS rules to style your code block. You can customize the font, background color, text color, borders, and padding to achieve the desired appearance. Here's a simple example:
/*CSS*/
div.codebox
{
min-height: 50px;
max-height: 100%;
/*set max-height to px if you want the box to scroll*/
padding: 1em;
margin: 1em 0;
line-height: 2em;
letter-spacing: 0.12em;
font-size: 90%;
overflow: auto;
color: #26C9FF;
background-color: #1e2129;
border: 1px solid #0B6FB9;
border-radius: 8px;
scrollbar-color: #0B6FB9 #fff;
scrollbar-width: thin;
transition: 0.4s;
}
div.codebox:hover
{
filter: brightness(150%);
}
div.codebox pre
{
white-space: break-spaces;
font-family: "Courier New", monospace;
font-size: 14px;
}
div.code-box styles the container div for the code block. The black box you see here.
div.code-box pre styles the code content within the tags Syntax.
Optionally you can set the font and font size for the code, most browsers have default font and font size for pre and code tags.
Syntax Highlighting (Optional):
For more advanced code styling, consider using a syntax highlighting library like Prism.js or highlight.js. These libraries can automatically highlight syntax in various programming languages.
While using libraries for syntax highlighting in web development can be convenient and straightforward, it's important to be aware that they can increase the size of your HTML files and require additional time to load your web pages. Additionally, they often highlight code on the fly.
In my case, I opted to create my own PHP Syntax Highlighting program. This custom solution comes into play when I update the content of my pages through the Content Management System, which I designed myself. If you're interested in this PHP Syntax Highlighting program, you can find it in the PHP section of this site. Feel free to check it out."
Include CSS and JavaScript Libraries (if using syntax highlighting):
If you choose to implement syntax highlighting, you'll need to include the necessary CSS and JavaScript files for the library you're using.
For example, for Prism.js:
/*HTML*/
<link rel="stylesheet" href="path/to/prism.css">
<script src="path/to/prism.js"></script>
Apply Styles:
Finally, apply the styles by linking your CSS file in the <head> section of your HTML document:
/*HTML*/
<link rel="stylesheet" href="styles.css">
Ensure that the styles.css file contains the CSS styles you defined earlier.
With these steps, you can create and style a code block box using HTML and CSS. You can further customize the styling to match the look and feel of your website or application.