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.