SyntaxHighlighter for ExpressionEngine with Port Ruby Blue theme
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.
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.
Or if you like me you can replace background colours with transparency and achive the result used on this page.
