SyntaxHighlighter for ExpressionEngine with Port Ruby Blue theme

February 4th, 2009 in ExpressionEngine | Tutorials | add comments

Background

Syntax highlighting is a must have for anyone who's working with code. Having used Notepad++ with Port Ruby Blue theme for quite some time, I am used to dark coding environment. Below image shows how it looks on editor.

SyntaxHighlighter for ExpressionEngine with Port Ruby Blue theme

When it came to implement syntax highlighting for Webunder I did a quick research and found SyntaxHighlighter. Highlighter itself is easy to customise to suit any theme. I thought if I could make it look like the editor it would be a nice match.

So, here is a quick tutorial on how to join ExpressionEngine and SyntaxHighlighter together.

Setup

Download SyntaxHighlighter and place unzipped files on your server. Location depends on you, I usually put all javascript into "scripts" folder.

Create a new css file called "shPortRubyBlue.css" containing below code and put it into "styles" folder.

/************************************
* Interface elements.
************************************/

.syntaxhighlighter
{
/* background-color: #112435 !important; */
background-color: transparent !important;
overflow:hidden;
}

/* Gutter line numbers */
.syntaxhighlighter .line .number
{
color: #FFF !important;
}

/* Add border to the lines */
.syntaxhighlighter .line .content
{
border-left: 3px solid #3476A3 !important;
color: #B9BDB6 !important;
}

.syntaxhighlighter.printing .line .content
{
border: 0 !important;
}

/* First line */
.syntaxhighlighter .line.alt1 .content
{
/* background-color: #112435 !important; */
background-color: transparent !important;
}

/* Second line */
.syntaxhighlighter .line.alt2 .content
{
/* background-color: #112435 !important; */
background-color: transparent !important;
}

.syntaxhighlighter .line .content .block
{
/* background: url(wrapping.png) 0 1.1em no-repeat !important; */
}

/* Highlighed line number */
.syntaxhighlighter .line.highlighted .number
{
background-color: #253E5A !important;
color: #fff !important;
}

/* Highlighed line */
.syntaxhighlighter .line.highlighted.alt1 .content,
.syntaxhighlighter .line.highlighted.alt2 .content
{
background-color: #112435 !important;
}

.syntaxhighlighter .ruler
{
color: #38566F !important;
background-color: #0F192A !important;
border-left: 3px solid #435A5F !important;
}

.syntaxhighlighter.nogutter .ruler
{
border: 0 !important;
}

.syntaxhighlighter .toolbar
{
/* background-color: #1F4661 !important; */
background-color: transparent !important;
}

.syntaxhighlighter .toolbar a
{
color: #38566F !important;
}

.syntaxhighlighter .toolbar a:hover
{
color: #8AA6C1 !important;
}

/************************************
* Actual syntax highlighter colors.
************************************/
.syntaxhighlighter .plain,
.syntaxhighlighter .plain a
{
color: #D1EDFF !important;
}

.syntaxhighlighter .comments,
.syntaxhighlighter .comments a
{
color: #368BDA !important;
}

.syntaxhighlighter .string,
.syntaxhighlighter .string a
{
color: #8DB0D3 !important;
}

.syntaxhighlighter .keyword
{
color: #7BD827 !important;
}

.syntaxhighlighter .preprocessor
{
color: #8AA6C1 !important;
}

.syntaxhighlighter .variable
{
color: #FFAA3E !important;
}

.syntaxhighlighter .value
{
color: #F7E741 !important;
}

.syntaxhighlighter .functions
{
color: #FFAA3E !important;
}

.syntaxhighlighter .constants
{
color: #E0E8FF !important;
}

.syntaxhighlighter .script
{
background-color: #404040 !important;
}

.syntaxhighlighter .color1,
.syntaxhighlighter .color1 a
{
color: #F0804F !important;
}

.syntaxhighlighter .color2,
.syntaxhighlighter .color2 a
{
color: #FFFFFF !important;
}

.syntaxhighlighter .color3,
.syntaxhighlighter .color3 a
{
color: #FFAA3E !important;
}

Change "shCore.css" file in "styles" folder with below code.

.syntaxhighlighter,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter span
{
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
text-align: left !important;
float: none !important;
vertical-align: baseline !important;
position: static !important;
left: auto !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
height: auto !important;
width: auto !important;
line-height: 1.1em !important;
font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 1em !important;
}

.syntaxhighlighter
{
width: 100% !important;
margin: 1em 0 1em 0 !important;
padding: 24px 0 10px !important; /* adds a little border on top and bottom */
position: relative !important;
}

.syntaxhighlighter .bold {
font-weight: bold !important;
}

.syntaxhighlighter .italic {
font-style: italic !important;
}

.syntaxhighlighter .line .number
{
float: left !important;
width: 3em !important;
padding-right: .3em !important;
text-align: right !important;
display: block !important;
}

/* Disable numbers when no gutter option is set */
.syntaxhighlighter.nogutter .line .number
{
display: none !important;
}

.syntaxhighlighter .line .content
{
margin-left: 3.3em !important;
padding-left: .5em !important;
display: block !important;
}

.syntaxhighlighter .line .content .block
{
display: block !important;
padding-left: 1.5em !important;
text-indent: -1.5em !important;
}

.syntaxhighlighter .line .content .spaces
{
display: none !important;
}

/* Disable border and margin on the lines when no gutter option is set */
.syntaxhighlighter.nogutter .line .content
{
margin-left: 0 !important;
border-left: none !important;
}

.syntaxhighlighter .bar
{
}

.syntaxhighlighter.collapsed .bar
{

}

.syntaxhighlighter.nogutter .ruler
{
margin-left: 0 !important;
padding-left: 0 !important;
}

.syntaxhighlighter .ruler
{
padding: 0 0 .5em .5em !important;
margin-left: 3.3em !important;
overflow: hidden !important;
}

/* Adjust some properties when collapsed */

.syntaxhighlighter.collapsed .lines,
.syntaxhighlighter.collapsed .ruler
{
display: none !important;
}

/* Styles for the toolbar */

.syntaxhighlighter .toolbar
{
position: absolute !important;
right: 0px !important;
top: 0px !important;
font-size: 1px !important;
padding: 4px 4px 4px 0 !important; /* in px because images don't scale with ems */
}

.syntaxhighlighter.collapsed .toolbar
{
font-size: 80% !important;
padding: .5em 0 .5em .5em !important;
position: static !important;
background-color: #06080C !important;
border: 1px solid #171A1F !important;
margin-top: -24px !important;
}

.syntaxhighlighter .toolbar a.item,
.syntaxhighlighter .toolbar .item
{
display: block !important;
float: left !important;
margin-left: 8px !important;
background-repeat: no-repeat !important;
overflow: hidden !important;
text-indent: -5000px !important;
}

.syntaxhighlighter.collapsed .toolbar .item
{
display: none !important;
}

.syntaxhighlighter.collapsed .toolbar .item.expandSource
{
background-image: url(magnifier.png) !important;
display: inline !important;
text-indent: 0 !important;
width: auto !important;
float: none !important;
height: 16px !important;
padding-left: 20px !important;
}

.syntaxhighlighter .toolbar .item.viewSource
{
background-image: url(page_white_code.png) !important;
}

.syntaxhighlighter .toolbar .item.printSource
{
background-image: url(printer.png) !important;
}

.syntaxhighlighter .toolbar .item.copyToClipboard
{
text-indent: 0 !important;
background: none !important;
overflow: visible !important;
}

.syntaxhighlighter .toolbar .item.about
{
background-image: url(help.png) !important;
}

/**
* Print view.
* Colors are based on the default theme without background.
*/

.syntaxhighlighter.printing,
.syntaxhighlighter.printing .line.alt1 .content,
.syntaxhighlighter.printing .line.alt2 .content,
.syntaxhighlighter.printing .line.highlighted .number,
.syntaxhighlighter.printing .line.highlighted.alt1 .content,
.syntaxhighlighter.printing .line.highlighted.alt2 .content,
.syntaxhighlighter.printing .line .content .block
{
background: none !important;
}

/* Gutter line numbers */
.syntaxhighlighter.printing .line .number
{
color: #bbb !important;
}

/* Add border to the lines */
.syntaxhighlighter.printing .line .content
{
color: #000 !important;
}

/* Toolbar when visible */
.syntaxhighlighter.printing .toolbar,
.syntaxhighlighter.printing .ruler
{
display: none !important;
}

.syntaxhighlighter.printing a
{
text-decoration: none !important;
}

.syntaxhighlighter.printing .plain,
.syntaxhighlighter.printing .plain a
{
color: #000 !important;
}

.syntaxhighlighter.printing .comments,
.syntaxhighlighter.printing .comments a
{
color: #008200 !important;
}

.syntaxhighlighter.printing .string,
.syntaxhighlighter.printing .string a
{
color: blue !important;
}

.syntaxhighlighter.printing .keyword
{
color: #069 !important;
font-weight: bold !important;
}

.syntaxhighlighter.printing .preprocessor
{
color: gray !important;
}

.syntaxhighlighter.printing .variable
{
color: #a70 !important;
}

.syntaxhighlighter.printing .value
{
color: #090 !important;
}

.syntaxhighlighter.printing .functions
{
color: #ff1493 !important;
}

.syntaxhighlighter.printing .constants
{
color: #0066CC !important;
}

.syntaxhighlighter.printing .script
{
font-weight: bold !important;
}

.syntaxhighlighter.printing .color1,
.syntaxhighlighter.printing .color1 a
{
color: #808080 !important;
}

.syntaxhighlighter.printing .color2,
.syntaxhighlighter.printing .color2 a
{
color: #ff1493 !important;
}

.syntaxhighlighter.printing .color3,
.syntaxhighlighter.printing .color3 a
{
color: red !important;
}

Make sure required files are selected and pointing with correct paths.

<link type="text/css" rel="stylesheet" href="/scripts/syntaxhighlighter/styles/shCore.css" /> 
<link type="text/css" rel="stylesheet" href="/scripts/syntaxhighlighter/styles/shPortRubyBlue.css" />

<script type="text/javascript" src="/scripts/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/scripts/syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="/scripts/syntaxhighlighter/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="/scripts/syntaxhighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="/scripts/syntaxhighlighter/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="/scripts/syntaxhighlighter/scripts/shBrushSql.js"></script>
<script type="text/javascript">
SyntaxHighlighter.all();
SyntaxHighlighter.config.clipboardSwf = '/scripts/syntaxhighlighter/scripts/clipboard.swf';
SyntaxHighlighter.config.bloggerMode = true;
</script>

Wrap your code with pre tag and define language, options etc.
e.g. <pre class="brush: css; collapse:true;">your code</pre>

Result

Below is what you get. I think it's reasonably similar to actual editor.

SyntaxHighlighter for ExpressionEngine with Port Ruby Blue theme

Or if you like me you can replace background colours with transparency and achive the result used on this page.

Picture of Cem Meric

email | follow | peak

Cem Meric

Cem runs a creative web design and development studio called Webunder, specialising in ExpressionEngine CMS and he is an active member of the ExpressionEngine forums.

When he's not working, he enjoys being a hero with friends.

 

Commenting is not available in this entry.