Syntax Highlighter
 

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

1. Download latest version of Syntax Highlighter from syntaxhighlighter - Google Code
2. Extract the folder and upload js files to a folder named js within your forum root.
3. Edit class_bbcode.php
   Search for
   
   Code:

   ---

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

   ---

           /**
        * 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
   
   Code:

   ---

                           $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
   
   Code:

   ---

                           //[ 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
                        );

   ---

4. Add the following bottom of Footer template
   
   Code:

   ---

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

   ---

5. Add the following 4 template
   1. bbcode_high
      
      Code:

      ---

      <pre name="code" class="$option">$code</pre>

      ---

   2. bbcode_high1
      
      Code:

      ---

      <pre name="code" class="Xml">$code</pre>

      ---

   3. bbcode_high_printable
      
      Code:

      ---

      <pre name="code" class="$option">$code</pre>

      ---

   4. bbcode_high1_printable
      
      Code:

      ---

      <pre name="code" class="Xml">$code</pre>

      ---

6. Add the following to your Additional CSS settings
   
   Code:

   ---

   .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
replace with
search for
replace with
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

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

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

This is awesome for coder forums :)
Good job !

[high=language]code[/high] or [high]code[/high]

great mod . installed

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

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

thanks

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.

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.

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

thank you lizard king!
all the best
beduino

Great! Just what we needed.

EDIT: Fixed, had to enable legacy support:

http://alexgorbatchev.com/wiki/Synta...hter:Upgrading

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

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.

Can anyone please confirm if this works with vBulletin 3.8.4?

Thanks.

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

Thanks.

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

[high]test[/high]

[high1=php]//php code[/high1]

anybody alive around here ? this thing does NOT work