Gergely Hodicska » wordpress

WordPress quicktag toolbar tweaking again

Felho — Sat, 10 Nov 2007 20:39:03 +0000

It is said that it is a good behavior to set title attribute to a tags. I usually put to the title the text of the link. The process is: I put the link to the clipboard, go to the editor, select the text, press Ctrl-A, insert the link to the dialog box, press enter, then put the text of the link to the clipboard, go to the opening a tag, insert title="" and finally paste the text from the clipboard to the attribute. This is a repetitive and tedious task, so like in the previous case I automate it.

To get WordPress to insert the title attribute automatically to a tag we had to modify the wp-includes/js/quicktags.js file by adding a few lines of code to the edInsertTag function at two places:

341
342
343

if (edButtons[i].id == 'ed_link') {

    edButtons[i].tagStart = edButtons[i].tagStart.replace(/>/, ' title=&qout;'+selectedText+'&qout;>');

}

357
358
359

if (edButtons[i].id == 'ed_link') {

    edButtons[i].tagStart = edButtons[i].tagStart.replace(/>/, ' title=&qout;'+selectedText+'&qout;>');

}

You can download the fully modified version from here (this file contains my former modifications).

Posting source code in WordPress: escaping and syntax highlighting the inserted code

Felho — Sun, 04 Nov 2007 08:26:00 +0000

I have already mentioned that I had difficulty in finding a suitable solution to post source code in my blog. However good the workaround presented in my previous post is functioning, I was not satisfied with it. I noticed two annoying things. The first was that I had to escape HTML special chars “manually” in the inserted code, which was a pain in the ass. My second problem was (I like to indent my code with TAB) that indentation was too wide, which looked not really nice out (and was impractical when your code has multiple nested control structures). After a little JavaScript hacking and playing with GeSHi and CSS I solved both of them.

A little side note: I found that the built-in rich text editor is almost absolutely useless, so I turned it off, and I suggest it to every WordPress user.

Escaping the inserted code

When you want to put some source code to the post, you usually simply enclose it in code or pre tags. The problem is, that the source code may contain characters which have special meaning in the HTML language, so they should be escaped. These characters are: <, >, &, &qout; and they should be converted to: <, >, &, &qout;. I would like to have some kind of automation for this task, which could be run when we insert the text to the post.

When you insert a code (and use a syntax highlighter) you should specify the language of that code. For example if you use the WP-Syntax plugin you should enclose your code in pre tags and use the lang attribute to specify the language. In addition you can mark if you want line numbers to appear. Enclosing the copy-pasted text is another repetitive and tedious task so it is another good candidate for automation

It would be great if we could do this two task in one step, so I thought I extend the toolbar above the textarea to provide this functionality by adding a new sourcecode button to it:

The sourcecode button works similar as the others button on the toolbar, if no text is selected on the first click it inserts the open tag, on the second click it inserts the close tag. If text is selected it encloses the text in pre tags when you activate it. The button can be accessed via Ctrl-F keyboard shortcut too. Before it ads the open tag to the editor it prompts for the syntax highlighting parameters and generates the proper open tag to them. When text is selected the special characters will be replaced to HTML entities in it. This way adding source code to your post will be very straightforward:

1. Select the text in te editor:

2. Select the inserted text and press Ctrl-F:

3. Type the syntax highlighting information:

4. The resulted text is:

Extending the toolbar is quite easy, only the wp-includes/js/quicktags.js file should be slightly modified (you can download the fully modified version from here, all the modifications are commented). To add a new button to the toolbar you should add the following code:

edButtons[edButtons.length] =
new edButton('ed_pre'
,'pre'
,'

&#39;

,&#39;

'
,'f'
);

After then we should modify the edInsertTag function, and we are ready:

//-------------



// Prompts for syntax highlighting parameter, and return the appropriate start tag.

// TODO: l10n support.

function edGetPreStartTag() {

    var syntaxInfo = prompt(&#39;Please insert syntax highlighting information:&#39;+&qout;\n&qout;+&#39;language[, line number]!&#39;, &#39;php,1&#39;).split(&#39;,&#39;);

    return &#39;

39;+syntaxInfo[0]+&#39;&qout;&#39;+(syntaxInfo[1] != undefined ? &#39; line=&qout;&#39;+syntaxInfo[1]+&#39;&qout;&#39; : &#39;&#39;)+&#39;>&#39;+&qout;\n&qout;;

}



// It converts all HTML special chars to HTML entites

function edHtmlSpecialChars(string) {

    return string.replace(/&/g, &#39;&&#39;).replace(/, &#39;<&#39;).

           replace(/>/g, &#39;>&#39;).replace(/&qout;/g, &#39;&qout;&#39;).

           replace(/&#39;/g, &#39;&#39;&#39;);

}

//-------------



// insertion code



function edInsertTag(myField, i) {

    //IE support

    if (document.selection) {

        myField.focus();

        sel = document.selection.createRange();

        if (sel.text.length > 0) {

            //-------------

            if (edButtons[i].id == &#39;ed_pre&#39;) {

                sel.text = edHtmlSpecialChars(sel.text);

                edButtons[i].tagStart = edGetPreStartTag();

            } 

            //-------------

            sel.text = edButtons[i].tagStart + sel.text + edButtons[i].tagEnd;

        }

        else {

            if (!edCheckOpenTags(i) || edButtons[i].tagEnd == &#39;&#39;) {

                //-------------

                if (edButtons[i].id == &#39;ed_pre&#39;) {

                    edButtons[i].tagStart = edGetPreStartTag();

                } 

                //-------------

                sel.text = edButtons[i].tagStart;

                edAddTag(i);

            }

            else {

                sel.text = edButtons[i].tagEnd;

                edRemoveTag(i);

            }

        }

        myField.focus();

    }

    //MOZILLA/NETSCAPE support

    else if (myField.selectionStart || myField.selectionStart == &#39;0&#39;) {

        var startPos = myField.selectionStart;

        var endPos = myField.selectionEnd;

        var cursorPos = endPos;

        var scrollTop = myField.scrollTop;



        if (startPos != endPos) {

            //-------------

            var selectedText = myField.value.substring(startPos, endPos);

            var selectedTextLengthGrowth = 0;

            if (edButtons[i].id == &#39;ed_pre&#39;) {

                edButtons[i].tagStart = edGetPreStartTag();

                selectedTextLengthGrowth = selectedText.length;

                selectedText = edHtmlSpecialChars(selectedText);

                selectedTextLengthGrowth = selectedText.length - selectedTextLengthGrowth;

            }

            myField.value = myField.value.substring(0, startPos)

                          + edButtons[i].tagStart

                          + selectedText

                          + edButtons[i].tagEnd

                          + myField.value.substring(endPos, myField.value.length);

            cursorPos += edButtons[i].tagStart.length + edButtons[i].tagEnd.length + selectedTextLengthGrowth;

            //-------------

        }

        else {

            if (!edCheckOpenTags(i) || edButtons[i].tagEnd == &#39;&#39;) {

                //-------------

                if (edButtons[i].id == &#39;ed_pre&#39;) {

                    edButtons[i].tagStart = edGetPreStartTag();

                } 

                //-------------

                myField.value = myField.value.substring(0, startPos) 

                              + edButtons[i].tagStart

                              + myField.value.substring(endPos, myField.value.length);

                edAddTag(i);

                cursorPos = startPos + edButtons[i].tagStart.length;

            }

            else {

                myField.value = myField.value.substring(0, startPos) 

                              + edButtons[i].tagEnd

                              + myField.value.substring(endPos, myField.value.length);

                edRemoveTag(i);

                cursorPos = startPos + edButtons[i].tagEnd.length;

            }

        }

        myField.focus();

        myField.selectionStart = cursorPos;

        myField.selectionEnd = cursorPos;

        myField.scrollTop = scrollTop;

    }

    else {

        if (!edCheckOpenTags(i) || edButtons[i].tagEnd == &#39;&#39;) {

            //-------------

            if (edButtons[i].id == &#39;ed_pre&#39;) {

                edButtons[i].tagStart = edGetPreStartTag();

            } 

            //-------------

            myField.value += edButtons[i].tagStart;

            edAddTag(i);

        }

        else {

            myField.value += edButtons[i].tagEnd;

            edRemoveTag(i);

        }

        myField.focus();

    }

}

Controlling the indentation

The WP-Syntax plugin uses GeSHi with default settings, which means that GeSHi wraps code blocks in pre tags. In this mode GeSHi doesn’t replace TAB characters with spaces, so we can’t control the appearance of the indentation. But if we instruct GeSHi to use div tags instead of pre, it will replace leading TAB characters to spaces, and you can set the number of spaces. If we want to use 4 spaces we should modify the plugin accordingly to the following:

$geshi = new GeSHi(htmlspecialchars_decode($code), $language);

$geshi->enable_keyword_links(false);

$geshi->set_header_type(GESHI_HEADER_DIV);

$geshi->set_tab_width(4);

After this modification you should probably modify your CSS. I use now the following code:

/***** SYNTAX HIGHLIGHTER *****/

.wp_syntax {

    color: #100;

    background-color: #f9f9f9;

    border: 1px solid silver;

    margin: 0 0 1.5em 0;

    overflow: auto;

}

/* IE FIX */

.wp_syntax {

    overflow-x: auto;

    overflow-y: hidden;

    padding-bottom: expression(this.scrollWidth > this.offsetWidth ? 15 : 0);

    width: 100%;

}

.wp_syntax table {

    border-collapse: collapse;

}

.wp_syntax div, .wp_syntax td {

    vertical-align: top;

    padding: 2px 4px;

    white-space: nowrap;

}

.wp_syntax .line_numbers {

    text-align: right;

    background-color: #e8e9dc;

    color: gray;

    overflow: visible;

}

td.code div {

    padding-top: 0px;

}

I think these modifications would be interesting in the official WordPress version too, I found them useful, now I can insert source code to the post in a very convenient way.

Escaping problem with WP-Syntax WordPress plugin

Felho — Tue, 30 Oct 2007 00:48:40 +0000

When I started this blog I had spent some time finding a syntax highlighter plug-in for the code snippets presented in the posts. I went to wordpress.org and I tried out some of the plug-ins, but I had some problems with all of them. After a few hours I found the WP-Syntax plug-in. I had had already some positive experience with the GeSHi (Generic Syntax Highlighter) library, and I liked the demo on the EmacsBlog so I thought this is what I wanted.

I tried it out and I noticed that it doesn’t look as fancy as in the demo page. After a fast search I found that I need the following CSS addition:

.wp_syntax {

    color: #100;

    background-color: #f9f9f9;

    border: 1px solid silver;

    margin: 0 0 1.5em 0;

    overflow: auto;

}

/* IE FIX */

.wp_syntax {

    overflow-x: auto;

    overflow-y: hidden;

    padding-bottom: expression(this.scrollWidth > this.offsetWidth ? 15 : 0);

    width: 100%;

}

.wp_syntax table {

    border-collapse: collapse;

}

.wp_syntax div, .wp_syntax td {

    vertical-align: top;

    padding: 2px 4px;

}

.wp_syntax .line_numbers {

    text-align: right;

    background-color: #def;

    color: gray;

    overflow: visible;

}

/* potential overrides for other styles */

.wp_syntax pre {

    margin: 0;

    width: auto;

    float: none;

    clear: none;

    overflow: visible;

}

I added it to theme’s CSS, and I was happy. I started to finish my first post, but I noticed a very annoying behavior of the plug-in. The sample code contained “>” character, but in the post appeared “>”. I was a little disappointed, but I thought it will be easy to find the source of the problem.

First I looked into the source of the highlighter plug-in, and observed that GeSHi converts the HTML special chars to HTML entities with its own hcs() function. GeSHi could not be asked not to do this conversion, so I had to modify the plug-in a little:

79
80

//$geshi = new GeSHi($code, $language);

$geshi = new GeSHi(htmlspecialchars_decode($code), $language);

Unfortunately the server where this blog runs has PHP older than 5.1, so I had to create my own version of htmlspecialchars_decode(), so I add this code to the plug-in too:

if (!function_exists("htmlspecialchars_decode")) {

    function htmlspecialchars_decode($string, $quote_style = ENT_COMPAT) {

        return strtr($string, array_flip(get_html_translation_table(HTML_SPECIALCHARS, $quote_style)));

    }

}

This little hack solved my problem, I hope it could be useful for others too.