[Select All] for GeSHi Syntax Highlighter

jackmaessen

First of all: this is the wrong Category but i could not place it in Tutorials!
I was using GeSHi for my own forum and i was wondering if it was possible to add a [Select All] line just above the code block. After some trial with code i succeeded in that. It is only a couple of adjustments in the default.php of GeSHi.
When you open the file default.php in GeSHi, you can see a function "function pre_entities($match)".
The complete function with the [Select All] line just above it looks now like this:

function pre_entities($match) {
    include_once(PATH_PLUGINS.DS.'GeSHiSyntaxHighlighter'.DS.'geshi'.DS.'geshi.php');
    $language = strtolower(trim($match[1]));
    $line = trim($match[2]);
    $escaped = trim($match[3]);
    $code = geshisyntax_code_trim($match[4]);
    if ($escaped == "true") $code = htmlspecialchars_decode($code);

    $geshi = new GeSHi($code, $language);
    $geshi->enable_keyword_links(false);
    $geshi->enable_classes();   
    echo '<style type="text/css">'.$geshi->get_stylesheet()."</style>";

    $element_id = uniqid(); //generate unique ID
    $output ='<br /><br /><a rel="highlight'.$element_id.'">[Select All]</a>'; // assign unique ID to rel attribute

        $output .= "<div class='geshi_syntax'><table><tr>";

    if ($line) {

    $output .= "<td class='line_numbers'>";
    $output .= geshisyntax_line_numbers($code, $line);
    $output .= '</td><td class="code">';

    $output .= '<div id="highlight'.$element_id.'" class="code">'; // assign unique ID to div

    $output .= $geshi->parse_code();
    $output .= '</div>';
    $output .= "</td>";

    }
    else {
        $output .= "<td>";
        $output .= '<div id="highlight'.$element_id.'" class="code">'; // assign unique ID to div
        $output .= $geshi->parse_code();
        $output .= "</div>";
        $output .= "</td>";
    }

    return

    $output .= "</tr></table></div>";


   return $output;

}

Second part is that we need a javascript for that to make it work correctly.
This is the javascript:

function SelectText(element) {
    var doc = document;
    var text = doc.getElementById(element);    
    if (doc.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

//Changed For Jack by UnderDog
$( document ).ready(function() {
    $('a').click(function() {
        SelectText( $(this).attr("rel") );
    });

})

And the third part is optional; you can add in your css the following line for a cursor pointer:

a {
cursor: pointer
}

I included the javascript in the head of default.master.tpl of my theme (VanillaBootstrap) like this:

< script type="text/javascript" src="/themes/VanillaBootstrap/js/selectable.js" >< /script >

selectable.js is where the js code is in

Hope this is helpfull for someone who wants a kind of select button or line to catch all the code in the code block.
You can see a working example here: http://www.webprofis.nl/index.php?p=/discussion/8/smootscroll#Item_2

jackmaessen

it seems that the last part of code was missing , but it should be this:
script type="text/javascript" src="/themes/VanillaBootstrap/js/selectable.js"

UnderDog

Thanks jack, I've changed your BBCode ([code]) into ~~~ and now it shows. For the last part, that javascript... I've added a space after the < and the > marks so it could be highlighted.

peregrine

@UnderDog said:
Thanks jack, I've changed your BBCode ([code]) into ~~~ and now it shows. For the last part, that javascript... I've added a space after the < and the > marks so it could be highlighted.

as underdog says use the ~~~ to surround your code, or select your code with mouse and click on the ¶ symbol in the buttonbar and then select Code.

if the tags disappear you can change the < to &lt;

e.g. &lt; will convert to <

peregrine

Another idea would have been to go to the plugin click on question and then post your discussion, and then change the category to feedback.

In that way the info you provided is tied to the plugin instead of being lost in outer space.

Always good to post questions or info after going to the plugin and selecting ask question.

jackmaessen

Oke thank you peregrine and Underdog. Yes next time i will post such things in the plugin itself, you are right, that is the place it belongs to. There is just one thing ( i can not edit anymore) in the javascript , the following line:

$('p').click(function() { 

should be replaced with this:

$('a').click(function() { 

p tag change with anchor.

Could some of the moderators change that please!
Thank you!

UnderDog

Done

peregrine

Oke thank you peregrine and Underdog. Yes next time i will post such things in the plugin itself, you are right, that is the place it belongs to.

nothing stopping you from posting a link to this discussion under the geshi plugin itself.