Advanced Syntax Highlighting - BBCode [highlight]

Advanced Syntax Highlighting
This Hack provides a [highlight] BBCode to highlight a wide range of Languages such as XML, HTML, Java, Javascript, SQL and so on.
It uses GeSHi, which is included in this ZIP.

Details
1 Product XML with 2 Plugins and 2 Templates

Please only click Install if you actually have installed/are using this Hack, and click Uninstall whan you don't use it any longer!

[TheRayden]

Hey all,

I've run into a strange problem with this. As you can see on the attachement, the colored code continues after the highlight should end. Any idea what could be causing this?

[FleyerShaver]

Does this Addon work correctly with 3.7.2pl1?

[DevFuture.de]

Plugin works fine with 3.7.3.

But i am still figguring out how to get some buttons into the editor.

1) You cant use the build-in method to add the bbcode, because the 'normal' tag is just given out, no highlight will be made.

2) You cant just change the toolbar_on template within the buttonmenu, and add a new entry with _cmd_wrap0_BBCODENAME=language, because then it will be

[BBCODENAME=language][/BBCODENAME=language]

instead of



so we need to change the vbulletin_textedit.js file, because there the choise will be made what to happen with our string.

But i cant find a solution that work. Is there somebody who can help me?

Thank you very much.

Developed a Solution. Check next Post.

[DevFuture.de]

Alright, i found a solution for the Button-Problem.

Just follow the Tutorial, and you will be able to use the Highlighter with the latest vBulletin (3.7.3 i think). You maybe find other information on this, but thats the only code which works perfectly with the WYSIWYG-Editor AND the normal Codeeditor. It allows you to select already inserted Code and wraps your Selection between the Tags, instead of replacing your code.

Step 1) Download the uncompressed Javascript Package of your Customer Center

Step 2) Open the File /clientscript/vbulletin_textedit.js

Step 3) Edit the File

Search for

        /**
        * Insert Email Link
        */

(its around Line 1890, if you haven?t modified it)

after this function enter the following:

        /**
        * Insert Visual Basic .NET Quellcode [(c) 2008 Dennis Alexander Petrasch, EntwickelerGemein.de]
        */
        this.vbnet = function(e)
        {
            var selection = this.get_selection();
            return this.insert_text('[highlight=VB.net]' + selection + '[/highlight]');
        };

        /**
        *  Insert Visual C# Quellcode [(c) 2008 Dennis Alexander Petrasch, EntwickelerGemein.de]
        */
        this.csharp = function(e)
        {
            var selection = this.get_selection();
            return this.insert_text('[highlight=Csharp]' + selection + '[/highlight]');
        };

        /**
        * Insert XML Quellcode [(c) 2008 Dennis Alexander Petrasch, EntwickelerGemein.de]
        */
        this.xml = function(e)
        {
            var selection = this.get_selection();
            return this.insert_text('[highlight=XML]' + selection + '[/highlight]');
        };

You can replace the XML Csharp oder VB.net Statement, if you want to highlight another language.

Search for

case 'insertimage':

(its around Line 2633, if you already paste the content below)

Insert following Code, after the Case statement

        // (c) 2008 Dennis Alexander Petrasch [http://www.EntwickelerGemein.de]
        case 'vbnet':
                {
                    var selection = this.get_selection();
                    this.wrap_tags('highlight', 'VB.net', selection);
                    return;
                }

                case 'csharp':
                {
                    var selection = this.get_selection();
                    this.wrap_tags('highlight', 'CSharp', selection);
                    return;
                }

                case 'xml':
                {
                    var selection = this.get_selection();
                    this.wrap_tags('highlight', 'xml', selection);
                    return;
                }

Just save the File and upload it to your Server. Now you need to edit your Editor-Template in your Editor.

Step 4) Edit the editor_toolbar_on template in ACP

Select Styles and Templates, then Search for template. Enter "editor_toolbar_on" and do a search. Remember to edit the template in all your Styles!

Search for:

<if condition="$show['php_bbcode']">
                <td><div class="imagebutton" id="{$editorid}_cmd_wrap0_php"><img src="$stylevar[imgdir_editor]/php.png" width="16" height="16" alt="$vbphrase[wrap_php_tags]" /></div></td>
            </if>

Add after this:

Optional: If you like to add a seperator, then add the following code first

<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="16" alt="" /></td>

<td><div class="imagebutton" id="{$editorid}_cmd_vbnet"><img src="$stylevar[imgdir_editor]/vb.png" width="16" height="16" alt="Visual Basic .NET Quellcode einf?gen" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_xml"><img src="$stylevar[imgdir_editor]/xml.png" width="16" height="16" alt="XML Quellcode einf?gen" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_csharp"><img src="$stylevar[imgdir_editor]/cs.png" width="16" height="16" alt="Visual C# Quellcode einf?gen" /></div></td>

It works fine. Additionally, you can add some Phrases and so on, but this will work as well.

Remember to create some Icons for the Editor. Use the default Resolutionof 16x16 Pixels.

I hope you enjoy this code, and it helps you to enchance the advanced Syntax Highlighter. If you need more information on this, please ask via mail or in my German .NET Development Board:

www.EntwicklerGemein.de
or via Mail
dennis@EntwicklerGemein.de

[DevFuture.de]

There is an error while converting [ and ] - Characters. Here is the Solution:

Open the product-advhighlight.xml and find:

			$codefind2 = array(
				'>',		// > to >
				'&lt;',		// &lt; to <
				'&quot;',	// &quot; to ",
				'&amp;',	// &amp; to &
				'& #91;',    // [ to [ (remove the spacebar between & and #-Char)
				'& #93;',    // ] to ] (remove the spacebar between & and #-Char)
			);

and replace the text with

			$codefind2 = array(
				'>',		// > to >
				'&lt;',		// &lt; to <
				'&quot;',	// &quot; to ",
				'&amp;',	// &amp; to &
				'[',    // [ to [
				']',    // ] to ]
			);

and it works well.

[Xtrato]

ok so can we change the variable of "hightlight" to like "language" or something like that?

Im trying to use WP and this to work just fine.

Example , in wordpress getti uses , <pre lang=css> and how would i make vBulletin or Wordpress hack to ether use similar post code?

thanks a bunch.

[DevFuture.de]

I still havent figured out a solution for the highlight-relacement, but it works still fine with Version 3.8.0./ 3.8.1, if you follow my instructions i postet some posts before.

[Simon Lloyd]

DevFuture.de dou you know how to get it to auto indent the code?, i'm currently trying to use it for VBA (Microsofts version of VB) and i'm using teh vb.net language as the highlighting seems closest in that, but all the code stays "as is", it doesn't capitalize or indent the code so highlighted code still looks a bit messy.

[DevFuture.de]

Hello Simon Lloyd,

I am sorry, i havent subscribed the topic, so that I just saw your entry now. I am sorry, but I dont know how to indent them. Normally this function is not provided by GeShi (afaik).

But it should worker proper, if you copy the Sourceode with indented style, and paste them into a thread. Normally it should be displayed intended then.

[Simon Lloyd]

Originally Posted by DevFuture.de

Hello Simon Lloyd,

I am sorry, i havent subscribed the topic, so that I just saw your entry now. I am sorry, but I dont know how to indent them. Normally this function is not provided by GeShi (afaik).

But it should worker proper, if you copy the Sourceode with indented style, and paste them into a thread. Normally it should be displayed intended then.

Dev. thanks for getting back, you are right it isn't supported by geshi, however the geshi users say it has to be parsed by some other code to indent it, i know its not that simple as in VBA code the indentation is tiered, i.e (without the >'s)

For Each.....
>>>If............Then
>>>>>Do something
>>>>>>>If......then
>>>>>>>>>Do something
>>>>>>>End If
>>>End If
Next

it is possible as i have seen it at www.vbaexpress.com