How to style the pre tags CSS in CKEditor

Home > Search > How-to
  by

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

 



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 in the box below so that we can be sure you are a human.




Comments