Code Box

I wanted a way to be able to display code and such in my blog entries. I'm not a fan of copying and pasting because the formatting often gets broken and it's hard to maintain.

I created a little Javascript and CSS solution that makes it easy to embed code into a blog entry or a regular HTML page. In your HTML page or blog entry you need to include jquery.js and codebox.js and include the stylesheet codebox.css. Then you just need to insert a <div> for each file you want to insert into the post!

Insert something like this in your HTML <head> section.
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="codebox.js"></script> <link rel="stylesheet" type="text/css" href="codebox.css" />

And stick this somewhere in the body. It's invisible but contains the localized string for the download link. I put this in the MoveableType "Header" template.
<div class="codeboxDownloadStr">Download Code</div>

The rest is just inserting a <div> whose id is the URL to the file you want to insert into a neat little box!
<div class="codebox" id="/tech/codebox.js"></div>

The Javascript:

The CSS:

And that's it!

Copyright 2012 Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

About this Entry

This page contains a single entry by Rick Kasguma published on March 4, 2012 8:32 PM.

Weather display was the previous entry in this blog.

Setting up a local testing MovableType server is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.