Quick Answer

To make your HTML code tags more responsive and stop them overflowing off the side of the page, wrap them in <pre></pre> tags and apply white-space: pre-wrap; to them like this:


<pre style="white-space: pre-wrap;">
  <code>
    .my-example-code {
      color: deepskyblue;
      margin: 5px 10px;
    }
  </code>
</pre>
White space pre wrap browser compatibility
white-space: pre-wrap; browser compatibility

The white-space:pre-wrap; CSS property is supported by most browsers giving you 93% global compatibility.

If you want to spice your HTML Code blocks up a bit try adding the highlight.js library. It automatically detects which language you are using and come with loads of built in styles like this Monokai style:

.my-example-code {
  color: deepskyblue;
  margin: 5px 10px;
}

.more-example-code caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #6c757d;
  text-align: left;
  caption-side: bottom;
}

Sources

White-space property - Mozilla MDN Web Docs
Browser compatibility - CanIUse.com
Code Block Styles - highlight.js

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *