How to Style Your Code Snippets

When you write a blog post and need to add code snippets, they should stand out. You have two choices: use a Syntax Highlighter or style the code yourself.

Syntax Highlighter

A Syntax Highlighter is a tool styles the code snippet for you. You can use one of the following tools to style the syntax.

  • Prettify, a Javascript solution the highlights source code syntax.
  • Snippet, a jQuery Syntax Highlighter.
  • SyntaxHighlighter another Javascript Syntax Highlighter tool.
  • Prism, lightweight syntax highlighter that works with HTML5.

Style Your Code Snippets Yourself

If you want to handle the styling yourself, you’ll need to use HTML and CSS. You need to use  HTML tags like <pre> and <code>. For extra styling, you can place your code inside a div tag.

Write the HTML

  1. Wrap the code snippet in a div tag like <div id=”codeSnippet”>
  2. Add your code snippet between the <pre> and <code> tags. The pre tag displays the text exactly as type preserving spaces and tabs.

<div id="codeSnippet">
<pre><code><script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
</code>
</pre>
</div>

Write the CSS

In your CSS, add styles for pre, code, div and anything else that you need. In the following example, I created a style that mimics an old DOS computer screen. I used pre, code, a div and a class to achieve that look. Here is the simple CSS:


/* Code Styles */
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;}

code {
font-family: Courier, 'New Courier', monospace;
font-size: 12px;}

#codeStyler {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin: 1em 0;}

.computerGreen {
background-color: #000000;
color: green;}

When you view at your results in a browser, you get a code snippet that looks like this:CSS Code SnippetLine numbers can help to make the snippet more readable. If you want to add additional style to your numbers, try Styling ordered list numbers.

6 Chocolate Shops to Indulge and Inspire You

What better inspiration than chocolate? Chocolate Shops are fun to visit. You can usually find something to tempt you. From chocolate truffles to old fashioned candies, the following sites tempt you with their products and design.

Chocolate Shops

Indulgence Chocolatiers

They sell exceptional chocolates to the Milwaukee Area and beyond. Their site opens with a banner that shows their chocolate. Each page shows a different picture of chocolate in the header. Their minimal design uses a blue, gray and white color scheme.

Indulgence Chocolatiers

Sweets Chocolates

Sweet’s of Lake Forest sells chocolates, toffees, ladybugs and more. The site opens with a large photo of a Sweet’s gift tray as part of the background. It works with the blue, white and brown color scheme. It has a simple, modern design to help you focus on finding and buying the right chocolate selection.

Sweets

Victorian Chocolate Shoppe

Victorian Chocolate Shoppe is an old time candy shop. Their website has an old time feel. They use elements of vintage design like dark colors, a script font, antique scroll border and a victorian wallpaper like background.

Victorian Chocolate Shoppe

Ashley’s Confectionery

Ashley’s Confectionery makes creamy homemade fudge, finest hand-dipped chocolates, old-fashioned candies and more. The website has a fun, modern look. It uses bright colors like pink, green and blue. The site uses segued shapes to draw your eyes to the call to action.

Ashley's Confection

Gail Ambrosius

Gail Ambrosius makes fine chocolates by hand. Her shop is located in Madison, Wisconsin. The website has a simple, modern look. It uses different shades of browns to create the look and feel of chocolate. The home page shows you different pictures of their chocolate and store.

Gail Ambrosius

DB Infusion Chocolates

DB Infusion Chocolates sells hand crafted chocolates. Their website is like their chocolates is uses a blend of modern with classic elements. It uses vintage design elements like dark, muted colors, paper-like background and chocolate wallpaper for the site background. From modern design, they use contemporary elements like a modern, fun font and simple, yet attractive buttons.

DB Infusion Chocolates

Website Redesign: Moving From HTML to PHP

I updated Burlington Footwear‘s website. It was a static website built using HTML and CSS. I created this site when tables were the way to build sites. Over time, I changed the pages to use CSS for more of the layout. The site was becoming a chore to maintain. It was showing its age and needed to be changed. The goals for the web site redesign are update to HTML5, use CSS for layout (no tables) and move to PHP. I found a basic tutorial on how to make a PHP Website From Scratch.

Burlington Footwear

Website Redesign from scratch

I started from scratch with an HTML5 template. I rebuilt the page using CSS and HTML5. The home page is a simple two column design. I reused some of the CSS from the old site with slight modifications. It looks similar to the old site but better. I replaced the images used in the navigation with a CSS Navigation List. The site has less images to download which should help make it load a bit faster on all devices. As mentioned in Front End Performance for Web Designers and Front-End Developers, if you can do it in CSS you should.

Moving to PHP

The next step was changing the HTML page to PHP. The site has several elements that are use on every page. To make maintenance easier, I separated the common elements: Header and Footer into separate include files. I copied my original HTML file and changed it to PHP. I added the include files in the appropriate spots. I tested it on my web server. The page looks exactly like the HTML page.

For the rest of the site, I used the PHP file as my starting point. By using the tutorial as a guide, I was able to achieve the structural and programming goals for the redesign.