Syntax Highlighter

[Lizard King]

I donot like the limitation of bbcodes with code , php and html. Thats why i decided to integrate syntaxhighlighter - Google Code (http://code.google.com/p/syntaxhighlighter/) with vBulletin. You can use different brushes such as SQL , Css , Xml , Pyhton etc... Here are the installation instructions

Download latest version of Syntax Highlighter from syntaxhighlighter - Google Code (http://code.google.com/p/syntaxhighlighter/downloads/list)
Extract the folder and upload js files to a folder named js within your forum root.
Edit class_bbcode.php
Search for
if ($this->printable)
{
$code = $this->emulate_pre_tag($code);
$template = 'bbcode_code_printable';
}
else
{
$blockheight = $this->fetch_block_height($code);
$template = 'bbcode_code';
}

eval('$html = "' . fetch_template($template) . '";');
return $html;
}
Add After
/**
* Handles a [ high ] tag. Displays a preformatted string.
*
* @param string The code to display
*
* @return string HTML representation of the tag.
*/
function handle_bbcode_high($code , $option)
{
global $vbulletin, $vbphrase, $stylevar, $show;

// remove unnecessary line breaks and escaped quotes
$code = str_replace(array('<br>', '<br />'), array('', ''), $code);

$code = $this->strip_front_back_whitespace($code, 1);

if ($this->printable)
{
$code = $this->emulate_pre_tag($code);
$template = 'bbcode_high_printable';
}
else
{
$blockheight = $this->fetch_block_height($code);
$template = 'bbcode_high';
}

eval('$html = "' . fetch_template($template) . '";');
return $html;
}

/**
* Handles a [ high ] tag. Displays a preformatted string.
*
* @param string The code to display
*
* @return string HTML representation of the tag.
*/
function handle_bbcode_high1($code)
{
global $vbulletin, $vbphrase, $stylevar, $show;

// remove unnecessary line breaks and escaped quotes
$code = str_replace(array('<br>', '<br />'), array('', ''), $code);

$code = $this->strip_front_back_whitespace($code, 1);

if ($this->printable)
{
$code = $this->emulate_pre_tag($code);
$template = 'bbcode_high1_printable';
}
else
{
$blockheight = $this->fetch_block_height($code);
$template = 'bbcode_high1';
}

eval('$html = "' . fetch_template($template) . '";');
return $html;
}

Search For

$tag_list['no_option']['code'] = array(
'callback' => 'handle_bbcode_code',
'strip_empty' => true,
'disable_smilies' => true,
'disable_wordwrap' => true,
'strip_space_after' => 2
);
}
Add After
//[ HIGH=XXX ]
$tag_list['option']['high'] = array(
'callback' => 'handle_bbcode_high',
'strip_empty' => true,
'disable_smilies' => true,
'disable_wordwrap' => true,
'strip_space_after' => 2
);
//[ HIGH ]
$tag_list['no_option']['high'] = array(
'callback' => 'handle_bbcode_high1',
'strip_empty' => true,
'disable_smilies' => true,
'disable_wordwrap' => true,
'strip_space_after' => 2
);
Add the following bottom of Footer template
<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="js/shBrushPhp.js"></script>
<script type="text/javascript" src="js/shBrushCSharp.js"></script>
<script type="text/javascript" src="js/shBrushCss.js"></script>
<script type="text/javascript" src="js/shBrushJScript.js"></script>
<script type="text/javascript" src="js/shBrushSql.js"></script>
<script type="text/javascript" src="js/shBrushVb.js"></script>
<script type="text/javascript" src="js/shBrushXml.js"></script>
<script type="text/javascript">
window.onload = function () {
dp.SyntaxHighlighter.ClipboardSwf = 'js/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code', true, true, false, 1, false);
}
</script>
Add the following 4 template

bbcode_high
<pre name="code" class="$option">$code</pre>
bbcode_high1
<pre name="code" class="Xml">$code</pre>
bbcode_high_printable
<pre name="code" class="$option">$code</pre>
bbcode_high1_printable
<pre name="code" class="Xml">$code</pre>

Add the following to your Additional CSS settings
.dp-highlighter
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span
{
font-weight: normal;
font-family: "Consolas", "Monaco", "Courier New", Courier, monospace !important;
font-size: 12px;
}

.dp-highlighter
{
background-color: #E7E5DC;
width: 620px;
overflow: auto;
margin: 0px 0 18px 0 !important;
padding-top: 0px; /* adds a little border on top when controls are hidden */
padding-right: 1px; /* adds a little border on top when controls are hidden */
}

/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span
{
margin: 0;
padding: 0;
border: none;
}

.dp-highlighter a,
.dp-highlighter a:hover
{
background: none;
border: none;
padding: 0;
margin: 0;
}

.dp-highlighter .bar
{
padding-left: 45px;
}

.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar
{
padding-left: 0px;
}

.dp-highlighter ol
{
list-style: decimal; /* for ie */
background-color: #fff;
margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
padding: 0px;
color: #5C5C5C;
}

.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li
{
list-style: none !important;
margin-left: 0px !important;
}

.dp-highlighter ol li,
.dp-highlighter .columns div
{
list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
list-style-position: outside !important;
border-left: 3px solid #6CE26C;
background-color: #F8F8F8;
color: #5C5C5C;
padding: 0 3px 0 10px !important;
margin: 0 !important;
line-height: 14px;
}

.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div
{
border: 0;
}

.dp-highlighter .columns
{
background-color: #F8F8F8;
color: gray;
overflow: hidden;
width: 80%;
}

.dp-highlighter .columns div
{
padding-bottom: 5px;
}

.dp-highlighter ol li.alt
{
background-color: #FFF;
color: inherit;
}

.dp-highlighter ol li span
{
color: black;
background-color: inherit;
}

/* Adjust some properties when collapsed */

.dp-highlighter.collapsed ol
{
margin: 0px;
}

.dp-highlighter.collapsed ol li
{
display: none;
}

/* Additional modifications when in print-view */

.dp-highlighter.printing
{
border: none;
}

.dp-highlighter.printing .tools
{
display: none !important;
}

.dp-highlighter.printing li
{
display: list-item !important;
}

/* Styles for the tools */

.dp-highlighter .tools
{
padding: 3px 8px 3px 10px;
font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: silver;
background-color: #f8f8f8;
padding-bottom: 10px;
border-left: 3px solid #6CE26C;
}

.dp-highlighter.nogutter .tools
{
border-left: 0;
}

.dp-highlighter.collapsed .tools
{
border-bottom: 0;
}

.dp-highlighter .tools a
{
font-size: 9px;
color: #a0a0a0;
background-color: inherit;
text-decoration: none;
margin-right: 10px;
}

.dp-highlighter .tools a:hover
{
color: red;
background-color: inherit;
text-decoration: underline;
}

/* About dialog styles */

.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table { width: 80%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }

/* Language specific styles */

.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
.dp-highlighter .preprocessor { color: gray; background-color: inherit; }


Fix for WYSIWYG missing tags
search for inside class_bbcode_alt.php
// make the "pre" tags use the correct handler
foreach (array('code', 'php', 'html') AS $pre_tag)
replace with
// make the "pre" tags use the correct handler
foreach (array('code', 'php', 'html', 'high') AS $pre_tag)
search for
'code' => false, // overridden
'html' => false, // overridden
'php' => false // overridden
replace with
'high' => false, // overridden
'code' => false, // overridden
'html' => false, // overridden
'php' => false // overridden

Update at 18.06.2008 : WYSIWYG missing tags bug has been corrected

If you want you can upload the js files to a different directory. Just donot forget to change the file path within footer template.

This mod is brought to you by vBTech (http://vbtech.net)

[nothing4me]

Brilliant job! This makes me want to start a coding forum! :p

[Quantnet]

I installed this per instruction. How do I use it?

[Magnumutz]

This is awesome for coder forums :)
Good job !

[Lizard King]

I installed this per instruction. How do I use it?
code or code

[snowlion]

great mod . installed

[Quantnet]

code or code
Many thanks.
is there any plan to modify the code tag button # to use this or create a new button for this bbcode?

Also, when i use this [high] to post something, when I go back to edit the post, the tag is not visible. I can't also edit posts in the past to use this tag, only new posts can use this.

P.S: what are the list of language option?

thanks

[Lizard King]

Also, when i use this [high] to post something, when I go back to edit the post, the tag is not visible. I can't also edit posts in the past to use this tag, only new posts can use this.

This is now fixed. The fix is inside the first post.

[rizelim]

thanks

[Quantnet]

This is now fixed. The fix is inside the first post.
Thanks you.

Not sure if this is a bug.
When I go back and edit old posts and replace code tags by the the new high tags, it only works after I click on Go Advance and Preview.
If i only edit and Save, it will not work. It seems like the Preview will invoke the script before it can be saved.

[TradeOfAllJacks]

Any chance for actionscript 2/3 support for this? I've been trying to find a good 3.7 syntax highlighter but to no avail.

[veenuisthebest]

This mod works good in 3.8.x, I have two questions please:-

1. Is there any chance of getting this done without file edits?

2. Any way of showing the old default vb's style of code, when javascript is disabled on the user's browser?

Thanks

[beduino]

thank you lizard king!
all the best
beduino

[sheppardzwc]

Great! Just what we needed.

[wo0kie]

EDIT: Fixed, had to enable legacy support:

http://alexgorbatchev.com/wiki/SyntaxHighlighter:Upgrading

Demo: http://www.joinuv.com/forums/showthread.php?t=17316

[stanleys]

Thanks. It would be great if you could package this is a mod, and make it so it overwrites the standard [code] tag.
SitePoint has a nice implementation with a code list dropdown, it would be great to have something like that.

[AshMagic]

Can anyone please confirm if this works with vBulletin 3.8.4?

Thanks.

[Mike09]

Works perfectly with vB 4.0.x with a minor modification in the first code block,



/**
* Handles a [ high ] tag. Displays a preformatted string.
*
* @param string The code to display
*
* @return string HTML representation of the tag.
*/
function handle_bbcode_high($code , $option)
{
global $vbulletin, $vbphrase, $stylevar, $show;

// remove unnecessary line breaks and escaped quotes
$code = str_replace(array('<br>', '<br />'), array('', ''), $code);

$code = $this->strip_front_back_whitespace($code, 1);

if ($this->printable)
{
$code = $this->emulate_pre_tag($code);
$template = 'bbcode_high_printable';
}
else
{
$blockheight = $this->fetch_block_height($code);
$template = 'bbcode_high';
}

// eval('$html = "' . fetch_template($template) . '";');
// return $html;

$templater = vB_Template::create($template);
$templater->register('blockheight', $blockheight);
$templater->register('code', $code);
$templater->register('option', $option);
return $templater->render();
}

/**
* Handles a [ high ] tag. Displays a preformatted string.
*
* @param string The code to display
*
* @return string HTML representation of the tag.
*/
function handle_bbcode_high1($code)
{
global $vbulletin, $vbphrase, $stylevar, $show;

// remove unnecessary line breaks and escaped quotes
$code = str_replace(array('<br>', '<br />'), array('', ''), $code);

$code = $this->strip_front_back_whitespace($code, 1);

if ($this->printable)
{
$code = $this->emulate_pre_tag($code);
$template = 'bbcode_high1_printable';
}
else
{
$blockheight = $this->fetch_block_height($code);
$template = 'bbcode_high1';
}

// eval('$html = "' . fetch_template($template) . '";');
// return $html;

$templater = vB_Template::create($template);
$templater->register('blockheight', $blockheight);
$templater->register('code', $code);
return $templater->render();


}



Thanks.

[Delphiprogrammi]

Works perfectly with vB 4.0.x with a minor modification in the first code block,



/**
* Handles a [ high ] tag. Displays a preformatted string.
*
* @param string The code to display
*
* @return string HTML representation of the tag.
*/
function handle_bbcode_high($code , $option)
{
global $vbulletin, $vbphrase, $stylevar, $show;

// remove unnecessary line breaks and escaped quotes
$code = str_replace(array('<br>', '<br />'), array('', ''), $code);

$code = $this->strip_front_back_whitespace($code, 1);

if ($this->printable)
{
$code = $this->emulate_pre_tag($code);
$template = 'bbcode_high_printable';
}
else
{
$blockheight = $this->fetch_block_height($code);
$template = 'bbcode_high';
}

// eval('$html = "' . fetch_template($template) . '";');
// return $html;

$templater = vB_Template::create($template);
$templater->register('blockheight', $blockheight);
$templater->register('code', $code);
$templater->register('option', $option);
return $templater->render();
}

/**
* Handles a [ high ] tag. Displays a preformatted string.
*
* @param string The code to display
*
* @return string HTML representation of the tag.
*/
function handle_bbcode_high1($code)
{
global $vbulletin, $vbphrase, $stylevar, $show;

// remove unnecessary line breaks and escaped quotes
$code = str_replace(array('<br>', '<br />'), array('', ''), $code);

$code = $this->strip_front_back_whitespace($code, 1);

if ($this->printable)
{
$code = $this->emulate_pre_tag($code);
$template = 'bbcode_high1_printable';
}
else
{
$blockheight = $this->fetch_block_height($code);
$template = 'bbcode_high1';
}

// eval('$html = "' . fetch_template($template) . '";');
// return $html;

$templater = vB_Template::create($template);
$templater->register('blockheight', $blockheight);
$templater->register('code', $code);
return $templater->render();


}



Thanks.

no it doesn't work on 4.0.7 it outputs plain text or is it me here ?

test

//php code

[Delphiprogrammi]

anybody alive around here ? this thing does NOT work