When using the Code Snippet add-on, the code snippets in the CKEditor look great.  However, once we view the content on our web page, all of the styling has been removed, and we are left with just a plain ugly monospace font type.  CKEditor places the code snippets inside of a PRE tag.  This page has a great deep dive on how to style the PRE tags in CSS: https://perishablepress.com/perfect-pre-tags/.  Of course, you could read through this article, and really understand what is happening here.  However, if you are just in need of a quick test to see if this will meet your needs, you can use the code provided near the bottom of the article.

code, samp, kbd {
	font-family: "Courier New", Courier, monospace, sans-serif;
	text-align: left;
	color: #555;
	}
pre code {
	line-height: 1.6em;
	font-size: 11px;
	}
pre {
	padding: 0.1em 0.5em 0.3em 0.7em;
	border-left: 11px solid #ccc;
        border-right: 5px solid #ccc;
	margin: 1.7em 0 1.7em 0.3em;
	overflow: auto;	width: 93%;
        background-color: #F5F5F5;
	}
/* target IE7 and IE6 */
*:first-child+html pre {
	padding-bottom: 2em;
	overflow-y: hidden;
	overflow: visible;
	overflow-x: auto;
 	}
* html pre {
 	padding-bottom: 2em;
	overflow: visible;
	overflow-x: auto;
	}