Hello! I love Markdown code blocks but in default, we don't have Markdown code blocks in HTML. We'll do it with CSS.
1. Adding CSS
1.1. Using Another file for CSS
- Add this to your CSS:
<link rel="stylesheet" href="style.css"> - And put this code in style.css:
.code {
width: auto;
max-width: 80%;
background-color: #2d2d2d;
color: #ffffff;
border: 1px solid #444;
border-radius: 8px;
padding: 20px;
margin: 0 auto;
font-family: 'Courier New', Courier, monospace;
font-size: 14px;
line-height: 1.5;
overflow-x: auto;
white-space: pre-wrap;
word-wrap: break-word;
margin-bottom: 15px;
}
.code pre {
margin: 0;
}
.code code {
display: block;
}
1.2. Using <style> tag
- Add this in the style tag:
.code {
width: auto;
max-width: 80%;
background-color: #2d2d2d;
color: #ffffff;
border: 1px solid #444;
border-radius: 8px;
padding: 20px;
margin: 0 auto;
font-family: 'Courier New', Courier, monospace;
font-size: 14px;
line-height: 1.5;
overflow-x: auto;
white-space: pre-wrap;
word-wrap: break-word;
margin-bottom: 15px;
}
.code pre {
margin: 0;
}
.code code {
display: block;
}
2. Using It
<p class="code">
your text here
</p>
For example, I used it in my website: https://modvim.quitaxd.online/installation
If it isn't alive, I am giving a screenshot:
I changed background color manually.
Top comments (0)