improve rendering of code on the index page

- style highlighted code blocks with darker background and border
- fix whitespace problems / invalid html on code blocks on the homepage
- update readme to remove warning about issues

README.md

@@ -66,6 +66,3 @@ for more information about adding dates and tags to each article.
 	```
 
 1. (Optional) Rename the blog to something other than the default Heroku name. You can do this via the Heroku console after you log in.
-
-Note: The styling of code highlighting is a bit broken when the code shows up on the homepage. If you would like to embed code in your
-blog posts, let an instructor know.

source/index.html.haml

@@ -7,11 +7,11 @@ per_page: 10
   .twelve.columns
     - page_articles.each_with_index do |article, i|
       .panel
-        %p
-          %h3
-            = link_to article.title, article
-            %span= article.date.strftime('%b %e')
-          %p= article.summary
+        %h3
+          = link_to article.title, article
+          %span= article.date.strftime('%b %e')
+        = find_and_preserve do
+          = article.summary
 
 .row
   .six.columns

source/stylesheets/app.css.scss

@@ -52,4 +52,11 @@
 /* This beautiful CSS-File has been crafted with LESS (lesscss.org) and compiled by simpLESS (wearekiss.com/simpless) */
 @import url(http://fonts.googleapis.com/css?family=PT+Sans:700);
 
-@import url(http://fonts.googleapis.com/css?family=Lustria:400);
+@import url(http://fonts.googleapis.com/css?family=Lustria:400);
+
+pre.highlight {
+  border: 1px solid #ccc;
+  padding: 1em;
+  background: #ddd;
+  margin: 1em 0;
+}