HTML and CSS Code Box for your website and wordpress

Many website and forums have built in code boxes with which you can simply use a BBCode to create a code box. These boxes are formatted with smaller text and suited for reading code, and they sometimes have syntax highlighting and line numbering features, especially if the website is mainly targeted at coders.

If you want your own code boxes to use in your own website or wordpress site there are some solutions already available:

  • Prettify is a lightweight javascript and css toolkit that gives you a syntax highlighted code box with page numbering to use in your own website.
  • WordPress users can use Crayon Syntax Highlighter plugin to easily place syntax highlighted code boxes in posts using WordPress tools.

However sometimes you don’t need syntax highlighting and page numbering specially if your website isn’t targeted at programmers and your code boxes tend to be small. In these situations integrating a syntax highlighter might be overkill.

You can instead just use CSS to make a box with formatting suited for posting code. Here’s my implementation that works in both custom websites and in wordpress.
(If you’re using it with wordpress you need to add the CSS code at the bottom of your wordpress stylesheet (In Appearance->Editor))

CSS Code:
.code_container{
	border: 1px dashed black;
	background-color: #EEEEEE;
	display: inline-block;
	max-width: 640px;
	margin-bottom:1em;
}
.code_title{
	border-bottom: 1px dotted black;
	padding-left:5px;
	padding-right:5px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
}

.code_snippet{
	padding-left:10px;
	padding-right:10px;
}
/* You only need the following if you're using it with wordpress */
.entry-content .code_snippet pre{
	padding:0;
	border: none;
	color: black;
	font-family: Consolas,Monaco,Lucida Console,monospace;
	font-size: 0.857143rem;
	line-height: normal;
	margin: 0px;
	overflow: auto;
}
HTML Code:
<div class="code_container">
<div class="code_title">Code:</div>
<div class="code_snippet">
<pre>
CODE GOES HERE
</pre>
</div>
</div>

Note that if you’re trying to post HTML code into the code box you first need to decode it either manually, or using tools such as this and this, so your browser won’t interpret the html tags and leave them unchanged.

Leave a Reply

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