FreeKB - CKEditor Style the pre tags CSS
CKEditor - Style the pre tags CSS

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:  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;


Add a Comment

We will never share your name or email with anyone. Enter your email if you would like to be notified when we respond to your comment.

Please enter c1612 in the box below so that we can be sure you are a human.


Web design by yours truely - me, myself, and I   |   |