Thursday, November 8, 2012

Formatting code into blogs

When pasting code into a blog post, there are a few ways that the information can be displayed. I've really done a consistent job of making the code readable.  This post will detail out two different ways that this can be reliably done. In order to format code, you will need to switch to the HTML editor portion of the blog as the other visual editing mode won't allow this.

CODE STYLE 1: 
Doing this style is preferable in my opinion as it looks clean and allows the user to scroll over to the code in case there are long lines that would normally bleed off the page or do a word wrap.

Syntax:
<pre style="background-color: #eeeeee; border: 1px dashed #999999; color: black; font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"><code> INSERT CODE HERE </code></pre>

The code above would look like the below:
 INSERT CODE HERE 

Here is an example of it in action:

CODE STYLE 2:
The below is useful if you want to use CSS for formatting code across multiple posts. The class attribute (using 'code' name) is mostly used to point to a class in a style sheet. However, it can also be used by a JavaScript (via the HTML DOM) to make changes to HTML elements with a specified class.

Syntax:
<pre class="code"><span style="font-size: x-small;">INSERT CODE HERE </span></pre>

The code above would look like the below:
INSERT CODE HERE 


Here is an example of it in action:

No comments:

Post a Comment