Syntax Highlighting Feature for Moodle 2.0

Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -
Number of replies: 75
All of the Geshi pluggins are low quality. I teach several Programming Languages and having to click HTML mode and play the tag thing really slows me down. I'm working on installing the fantastic RJ_Insertcode plugin for TinyMCE http://www.ryanjuckett.com/projects/plugins/19-rjinsertcode For anyone who teaches coding with Moodle, this will be a godsend. I have to make a few tweaks to the instructions to install but let me know if you are interested in testing it on a copy of your site.
Average of ratings: -
In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -

Ok, here's a couple of screenshots to prove that this works in Moodle 2.0.3:  Read below for installation instructions:

 

 

Now it you can see that it puts the code in all pretty:

better geshi

Ok, Instructions

  1. Install Moodle 2.0.3. (*duh*)
  2. Download the TinyMCE Plugin called RJ_InsertCode from here: (http://www.ryanjuckett.com/projects/plugins/19-rjinsertcode)
  3. Extract the contents to /yourmoodledir/lib/editor/tinymce/tiny_mce/3.3.9.2/plugins/rj_insertcode
  4. You need to register the plugin and tell it where you want the new button. Go to /yourmoodledir/lib/editor/tinymce/lib.php and edit two string literals:
    1. 'plugins' => "{$xmedia}advimage, blah, blah, blah, this line goes on forever, spellchecker, rj_insertcode",
    2. 'theme_advanced_buttons3_add' => "table,|,code,spellchecker,|,rj_insertcode",
  5. At this point, you should see a button like the screenshots above.  The problem is that language substitutions have not been registered.  Moodle does this differently than the regular TinyMCE way by forcing all plugins to dump the localization strings into editor_tinymce.php.
  6. Open /yourmoodledir/lib/editor/tinymce/lang/en/editor_tinymce.php.  At the end, add the following:
  7. $string['rj_insertcode_dlg:title'] = 'Insert Code';
    $string['rj_insertcode_dlg:chooseCode'] = 'Choose the language';
    $string['rj_insertcode_dlg:formatMode'] = 'Choose format mode';
    $string['rj_insertcode_dlg:inlineStyleSheets'] = 'Inline Style Sheets';
    $string['rj_insertcode_dlg:classStyleSheets'] = 'Class Style Sheets';
    $string['rj_insertcode_dlg:header'] = 'Header';
    $string['rj_insertcode_dlg:lineNumbers'] = 'Show line numbers';
    $string['rj_insertcode_dlg:lineNumbersOn'] = 'Yes';
    $string['rj_insertcode_dlg:lineNumbersOff'] = 'No';
    $string['rj_insertcode_dlg:startLine'] = 'Initial line number';
    $string['rj_insertcode_dlg:contents'] = 'Code';
    $string['rj_insertcode_dlg:width'] = 'Width';
    $string['rj_insertcode_dlg:height'] = 'Height';
    $string['rj_insertcode_dlg:percent'] = 'Percent';
    $string['rj_insertcode_dlg:pixels'] = 'Pixels';
    $string['rj_insertcode:desc'] = 'Insert/Edit Code';
  8. One little bug I can't figure out.  For some reason, TinyMCE strips out the outside <div class="rjinsertcode_java"> tag.  If you wanted to make changes to your code after you saved the activity, you'd have to redo the entire code.  So the easy workaround is to either put the code into a single cell table, or edit the html and throw in a surrounding div.  That retains the jrinsertcode class div and makes it so you can easily re-edit the code after you've saved/submitted it.
Average of ratings: Useful (1)
In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -

I think i have the last bug licked.  Find rj_insertcode.js and change line 489 from mceInsertContent to mceInsertRawHTML.

For some reason, mceInsertContent "cleans up" the outer div tags.  This makes it impossible to edit the source after you've submitted it.  mceInsertRawHTML does no cleanup (which is what we want).

big grin

In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -

Confirmed it works! big grin Changed between multiple themes and works great!  EPIC.  Finally Moodle 2.x has true GESHI functionality.big grin

In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -

I had to adjust the default inline css by adding padding to

/yourmoodledir/lib/editor/tinymce/tiny_mce/3.3.9.2/plugins/rj_insertcode/php/rj_common.php

I had to do this for the default theme:

$geshi->set_code_style

and

$geshi->table_linenumber_style

I added padding-top-width: 2px to both of those.

In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -

Ah more changes to the inline css:

$geshi->set_overall_style( 'border-collapse: collapse; width: 100%; margin: 0; padding: 0;', false );

// line pre, code data cell and code pre
$geshi->set_code_style(    'margin:0; background:none; vertical-align:top; padding: 2px 4px; font-size: 12px;', false );

// Header style
$geshi->set_header_content_style('background: #dddddd; color: #054b6e; padding: 2px 0px; text-align:center; font: bold italic 12px Verdana, Geneva, Arial, Helvetica, sans-serif;');

// GeSHi doesn't expose a function to set the "ln" style from code, so we are
// accessing the member directly
$geshi->table_linenumber_style = 'padding:2px; 0px; width: 1px; background: #f0f0f0; vertical-align:top; color: #676f73; border-right:1px dotted #dddddd; font-size: 12px; text-align:right;';
Average of ratings: Useful (1)
In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -

I had a small CSS error that is fixed below.  The purpose of this is to make sure that your Moodle theme doesn't add extra padding to the code table cell at the top.  I've added inline padding.

On Moodle 2.2.x, the edits to the bottom of rj_common.php are:

//===
// initGeshiStyles(string)
// Set our default GeSHi styles.
function initGeshiStyles ( $geshi )
{    
    $geshi->set_overall_style( 'border-collapse: collapse; width: 100%; margin:0; padding:0;', false );

    // line pre, code data cell and code pre
    $geshi->set_code_style(    'margin:0; background:none; vertical-align:top; padding: 2px 4px; font-size: 12px;', false );

    // Header style
    $geshi->set_header_content_style('background: #dddddd; color: #054b6e; padding: 2px 0px; text-align:center; font: bold italic 12px Verdana, Geneva, Arial, Helvetica, sans-serif;');

    // GeSHi doesn't expose a function to set the "ln" style from code, so we are
    // accessing the member directly
    $geshi->table_linenumber_style = 'padding:2px; width: 1px; background: #f0f0f0; vertical-align:top; color: #676f73; border-right:1px dotted #dddddd; font-size: 12px; text-align:right;';
}

So with the new updates to moodle from 2.1 to 2.2, it's been really easy to add the GESHI editor and make it work.

In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -

You can remove any languages you don't want to see in the drop down simply by deleting(or moving) them from the /geshi/geshi folder.

In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -

In the screenshot, you'll notice that the font is not monospaced in the editor.  That's not a terrible thing since it gets rendered as monospaced after the submit.  However it's still annoying.  The moodle authors of 2.0 decided that the Outlook 2007 was the official TinyMCE theme and it happens to force PRE to Verdana (Why???? surprise)

So, you have to adjust the CSS a bit in

lib/editor/tinymce/tiny_mce/3.3.9.2/themes/advanced/skins/o2k7/content.css

with the following:

body, td /*, pre */ {color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; margin:8px;}
pre {
font-family: "Courier New", Courier, monospace !important;
}

Seriously, why does anyone style a PRE tag with proportioned fonts????? Arggg.  It's supposed to be PRE-formatted......  grrrrrr

In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -

Moodle 2.1 of course uses a newer version of TinyMCE which happens to strip out whitespace for this plugin. 

So I had to make a simple one line hack to in tiny_mce.js to stop it from cleaning up the HTML.

In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Geoffrey Rowland -
Picture of Plugin developers

Hi Jeremy

Just wanted to thank you for your efforts with this. Am about to try your syntax highlighting with Moodle 2.1. Will let you know how I get on.

Geoff

In reply to Geoffrey Rowland

Re: Syntax Highlighting Feature for Moodle 2.0

by Geoffrey Rowland -
Picture of Plugin developers

Yes, seems to be working fine in Moodle 2.1 and 2.2 alpha.

After a bit of fiddling, realised I had to visit Site administration > Development > Purge all caches to force the interface label lang strings to show. Otherwise, installation was very straightforward.

Any plans to bundle your tweaks in, say, GitHub and/or add to the Moodle Modules & plugins database? Might increase the 'visibility' of your Syntax Highlighter to the wider Moodle community.

Thanks again.

Geoff

Average of ratings: Useful (1)
In reply to Geoffrey Rowland

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -

Hi Geoff,

Can you try indenting blocks of your code and see if it holds?  The new tinymce engine used in Moodle 2.1 likes to clean up all whitespace and I had to do a small hack in the tiny_mce.js to prevent it from doing it.

Let me know.

In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Geoffrey Rowland -
Picture of Plugin developers

Hi Jeremy

Yes, I see the same issue. If I use multiple spaces to indent a line of code, they display fine in the editor, but get trimmed to one space when saved. Would be grateful for details of your 'small hack'

One other minor thing, I have noticed. The width setting (say 90 %) set in the configuration interface does not always seem to be saved. Not a show stopper as it can easily be set in the code.

Cheers

In reply to Geoffrey Rowland

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -

Yes, I see the same issue. If I use multiple spaces to indent a line of code, they display fine in the editor, but get trimmed to one space when saved. Would be grateful for details of your 'small hack'

To fix the missing spaces problem:

  1. /lib/editor/tinymce/tiny_mce/3.4.2
  2. Rename tiny_mce.js as tiny_mce_org.js   This will prevent you from screwing up the original file.  Just nice to keep the original file if your hacks go bad.
  3. Open tiny_mce_src.js in a text editor that shows line numbers.  This is actually the same as tiny_mce.js but with line feeds and tabbing for human consumption.
  4. Comment out line 2747.  That line is:
    // text = text.replace(allWhiteSpaceRegExp, '');
  5. Save as tiny_mce.js
  6. Make sure you empty your browser cache to prevent the old javascript from loading again.
  7. Create a new code snippet and see if the spaces are still there.

Comments:

The new TinyMCE code base thinks that the PRE tag should not have nested tags and elimintes spaces. I got fed up trying to make Ryan's code compliant. I know that sending a pure PRE block works just fine.

In any event TinyMCE just cleans up extra spaces which the XHTML spec doesn't really care about so it shouldn't impact any other pluggin.

You may want to do a search replace in the original tiny_mce.js as the dev version will take longer to load (by how much?? not sure).

One other minor thing, I have noticed. The width setting (say 90 %) set in the configuration interface does not always seem to be saved. Not a show stopper as it can easily be set in the code.

Yes, if you set the width in pixels, it will work fine.  Otherwise it always takes 100% of the width.  Another slightly annoying thing is that scrollbars always appear as the border is rendered outside of the Moodle content containing block.   

If you are handy with XHTML, PHP and JS, then you want to look at the function initGeshiStyles at the bottom of rj_common.php which is located in:

/lib/editor/tinymce/tiny_mce/3.4.2/plugins/rj_insertcode/php

There are four lines of code that control the surrounding HTML on the geshi block.  I'm guessing that those lines may control the width problem.   I'll get to it eventually after school done this year.

On the todo list, I'd like to add a textbox to send specific line highlighting which geshi supports but Ryan did not add.

 

In reply to Sam Mudle

Atbilde: Re: Syntax Highlighting Feature for Moodle 2.0

by Kalvis Kincis -

Hi, Jeremy! 

Thank you for detailed information and hacks. This will help start my first programming class in Moodle!

In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -

Unfortunately,the indent bugfix doesn't work for Chrome, only for IE and Firefox, so you'll have to use those browsers when making programming questions.

In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -

Ok, you apparently no longer have to worry about the monospaced problem in Moodle 2.2...  that makes it easier.

In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Paulino Fernández -

First of all thanks for the hard work you've done and apologize for my English.
I've done step by step everything you say in this message I got and that everything works quite well, but I have a few problems to solve.
The problem of the blanks:
In 2747 the line of text of tiny_mce.js: text.replace = (allWhiteSpaceRegExp, ' ') / / 'white space'
In 2750 the line of text of tiny_mce.js: text.replace = (allWhiteSpaceRegExp,'') / / 'no space'
I have tried to commentthe first line, the second or both without result. Just leave a blank space at the beginning of the line.
The problem of error 58:
When using the editor whenever I get the message:
Warning: Unknown: It is not safe to rely on the system's timezone settings. You are * required * to use the date.timezone setting or the date_default_timezone_set () function. In case you used year of thoose methods and you are still getting this warning, you most Likely Misspelled the timezone identifier. We selected 'America / Chicago' for 'CDT/-5.0/DST' instead in on line 58

Deprecated: Assigning the return value of new by reference is deprecated in on line 58}
A lot of thanks

In reply to Paulino Fernández

Re: Syntax Highlighting Feature for Moodle 2.0

by Paulino Fernández -
After all files modified as indicated in this post, I made a backup of a course in moodle 1.9. Restored it in my moodle 2.0 and modify the first piece of code. It works!. Some small problem discussed in the previous message, but it works. The second. It works! How wonderful. The third, fourth, fifth. Incredible. We are on the next. OPS! the editor does not load the icons. Get the html code but without the icons to make changes easily. Happiness does not last forever.
I would appreciate if someone tells me what might have happened and how to solve.
Thanks again for the good work
PD. On this page if I leave the icons in TinyMCE editor
In reply to Paulino Fernández

Re: Syntax Highlighting Feature for Moodle 2.0

by Paulino Fernández -

Solved the problem of loading icons. It was my error. Between one and another I did tests with tiny_mce.js and I made ​​a mistake. With the Firefox Error Console I found and fixed already. Once again working!
I hope to answer if someone comes up how I get to keep the blanks and the other error 58.
many thanks

In reply to Paulino Fernández

Re: Syntax Highlighting Feature for Moodle 2.0

by Paulino Fernández -

I am happy, very happy.smile
I had two problems.

  • The first problem was the issue date. Well, he only had to add some lines to php.ini to fix it. The lines have been in my case:

[Date]
And define the default timezone used by the date functions
; http://php.net/date.timezone
date.timezone = Europe / Madrid

  • The second problem was "deprecated: Assigning the return value of new by reference is deprecated in on line 58}"

This problem is the PHP 5.3 and I found the solution: Just remove the & for not assign it by reference.


Moreover, the spaces before the lines of code now works. I can not believe. I am delighted. Now I can work with indented code without worrying about me. From the IDE to Moodle in a moment.
THANKS. A LOT OF THANKS.big grin

Average of ratings: Useful (1)
In reply to Paulino Fernández

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -

I might have introduced a new bug.  When I updated to 2.1.2, I redid all my hacks for the geshi code.

Now I get a wierd annoying validation problem.  When I create a forum post or assignment, it requires me to press SUBMIT twice.   This happens regardless if I actually insert code into my posts.

I'll remove the geshi hacks and verify if it still happens.

In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -

To answer my own question, 2.1.2 and my Geshi hack seem to bring in the required field bug.  I'll have to investigate more.  It's sorta annoying that the Moodle developers mess around with TinyMCE going from 2.1.0 to 2.1.1 to 2.1.2, as my hack works great for 2.1.1....

In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -

Ok, it was a wierd bug on my site.  If you follow the directions above it will work fine.

I'm working on making sure the cursor winds up on the next line instead of the top of the textbox after the code has been placed...

In reply to Paulino Fernández

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -
  • The second problem was "deprecated: Assigning the return value of new by reference is deprecated in on line 58}"

This problem is the PHP 5.3 and I found the solution: Just remove the & for not assign it by reference.


Yeah, I got this error after I allowed warnings in my php.ini file.  Like you said, removing the & on line 58 fixed that problem.  For some reason it also fixed the timezone warning as well.

In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -

For those interested,

/lib/editor/tinymce/tiny_mce/3.5.1.1/plugins/rj_insertcode/php/rj_get_highlighted_code.php


line 58

$geshi =& new GeSHi($codeContent, $codeType);

should be changed to

$geshi = new GeSHi($codeContent, $codeType);

In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -

My goal is to eventually dump Ryan's Geshi and use one of the WordPress Geshi plugins.  Wordpress uses TinyMCE as well.

Of course Moodle and Wordpress have different ways of implementing the plugin.

This particular one really uses all the full power of Geshi.

http://wordpress.org/extend/plugins/wp-synhighlight/screenshots/

In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -

Update:

There is a ton of wonderful Wordpress geshi filters, however, wordpress doesn't really use TinyMCE like Moodle 2.0.  So this is the best option for moodle right now.

Moodle 2.2.1 is actually much easier to incorporate the geshi pluggin.  So if you trying to incorporate it, read the following:

  1. The newest TinyMCE doesn't strip out the outer div tags, so the hack to the core geshi filter is not required.
  2. Some of the inline style edits are no longer needed to line up the numbers with the code.
  3. The new tinymce.js file has one more line that needs commenting out to prevent the whitespace from being removed.  (thus removing indents)

I'm going to put the entire thing on GitHub because I want to make improvements such as:

  1. specific line highlighting.
  2. fix the percentage width bug
  3. PHP5.3 compliance (just that return reference problem described above)
  4. external style sheet to minimize the amount of HTML generated.

Ryan's no longer working on it - he stopped about four years ago.

In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Daniel Neis Araujo -
Picture of Core developers Picture of Plugin developers Picture of Translators

Hello, Jeremy

 

it seems to be a great work! Have you uploaded your version to github already?

 

Kind regards,

Daniel

In reply to Daniel Neis Araujo

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -

it seems to be a great work! Have you uploaded your version to github already?

No, the problem is that I don't really know what the file heirarchy should be.  I don't want people pulling down from Github right into their moodle directories and destroying their text editors.  I'd rather you read this thread and replace the files step by step.  Ultimately I need an expert on Moodle's tinyMCE integration to look over what I've done here.  

I think Moodle 2.x was designed to have multiple text editors so that you could switch between tinyMCE and some other editor.  But I don't know how that works.

I'm just doing core hacks to the existing one (to fix the missing indent) and to plug in the toolbar icon.  

Since everything is here, I don't see the purpose in uploading anything to github until I'm ready to release.

The only major bug at this point is that the missing indent fix will not work on Chrome, so basically Safari/Chrome can't use this Geshi pluggin.  That said, I've used this hack for the last three months and three moodle upgrades 2.0 -> 2.2 without any problems.

In reply to Sam Mudle

Update: Moodle 2.3.1

by Sam Mudle -

Just an update for Moodle 2.3.1.  Moodle now uses Tinymce version 3.5.1.1  So a couple of things I learned when installing Geshi for Moodle 2.3.1:

  1. The outlook css fix for pre is needed again.  Easy fix but remember to empty your browsers cache to see it.
  2. The whitespace bug is gone! so you don't have to edit the tinymce.js script.
In reply to Sam Mudle

Re: Update: Moodle 2.3.1

by Richard Ackland -

Hi, I have now added this  sucessfully to Moodle 2.3, but having a problem with the language files. They don't seem to be being read and I just get the string codes in the interface eg. [rj_insertstring]. Is there anywhere special I need to put the lang files?

In reply to Richard Ackland

Re: Update: Moodle 2.3.1

by Sam Mudle -

Hi, I have now added this  sucessfully to Moodle 2.3, but having a problem with the language files. They don't seem to be being read and I just get the string codes in the interface eg. [rj_insertstring]. Is there anywhere special I need to put the lang files?

You have to nuke the moodle cache to see the changes.   It's in Site Administration.

In reply to Richard Ackland

Re: Update: Moodle 2.3.1

by Adrian Gould -

Hi Richard

can you tell us exactly how you did the install for 2.3?

I'm etting lost thru the list of items here on the forum...

 

Cheers

Ady

In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -

Ok the next step is to get this working with Moodle 2.4.  With that version you don't have to do any core moodle hacks.

http://docs.moodle.org/dev/TinyMCE_plugins

In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Mario Wehr -

Hello Jeremy,

I'm also interested in a syntax highlighting feature for the new tinymce .

Just want to ask if you made any results with a syntax highlighting plugin for moodle 2.4?

kind regards,

Mario

In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Erick Jose Torres Hernandez -

Hi Jeremy,

Due to a need, I read your post and not even notice that the plugins for Moodle version 2.4.

This last version is precisely that I am using and take the task of adjusting the plugins for moodle 2.4. This plugin works independently and is installed like any other, there is no need to edit the source code of the core.

Soon I'll be posting the TinyMCE editor plugins, because I'm still polishing some things the same.

Thanks for all your contributions.

Excuse my English writing.  My language is Spanish

Regards.

In reply to Erick Jose Torres Hernandez

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -

This last version is precisely that I am using and take the task of adjusting the plugins for moodle 2.4. This plugin works independently and is installed like any other, there is no need to edit the source code of the core.

I had another person write to me and said he was converting it to Moodle 2.4.  He said he was successful and that I don't have to hack moodle core (the tinymce libraries) to get it to work.  I've been busy, but I'll look over it and post back here.

If you are successful, can you at least zip and attach the file here? thoughtful

In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Mario Wehr -

Just finished with a first version based on rj_insertcode for 2.4

feel free to test it -> download

Mario

In reply to Mario Wehr

Re: Syntax Highlighting Feature for Moodle 2.0

by alex sykes -

Thanks, Mario. Works very well for me so far. Only one issue/query - on one install (which already had a previous version on rj_insertcode installed) everything worked just fine.

On second (virgin) install, install OK but icon did not appear in mce until I had added the button in the 'Site Adminisration / Plugins / Text Editors / TinyMCE HTML editor / General settings, box as in screenshot below.

Screenshot

Not a big issue, simply included for completeness.

Average of ratings: Useful (2)
In reply to alex sykes

Re: Syntax Highlighting Feature for Moodle 2.0

by Bartłomiej Golenko -

I have tried installing this, however when I click the {} button I get a popup window with the message: "Problem retrieving data:Not Found"

At the same time - the following error appears in my apache log file:

[Thu Mar 07 15:15:33 2013] [error] [client my.client.ip] File does not exist: /var/www/lib, referer: http://my.server/moodle/lib/editor/tinymce/plugins/loader.php/rj_insertcode/2013012100/rj_insertcode.html

My Moodle installation is not placed in web server root directory (/var/www) but in /var/www/moodle

Regards, Bartek

In reply to alex sykes

Re: Syntax Highlighting Feature for Moodle 2.0

by Vadim Tabunshchik -
Picture of Core developers

I had added the button in the 'Site Administration / Plugins / Text Editors /

Alex, You can simply add this 2 line (colored) to the file /rj_insertcode/lib.php after string
    protected function update_init_params(array &$params, context $context,
            array $options = null) {
// Add button after 'fullscreen' in advancedbuttons1.
        $this->add_button_after($params, 1, ',|,rj_insertcode', 'fullscreen');

Button "Insert/Edit code" will be after button "full screen mode" in first row editor:
ris

Average of ratings: Useful (1)
In reply to Mario Wehr

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -

I tried to upload Mario Wehr's rj_insertcode into a clean 2.51 Moodle install but it failed saying that INVALID STRUCTURE OF ZIP FILE.

Working on it...

In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -

I've just installed Geshi successfully on Moodle 2.51.  Instead of hunting for all of the changes in this rather long thread, I've put all of the changes here.

I've based the construction of Geshi for Moodle 2.51 on these docs

http://docs.moodle.org/dev/TinyMCE_plugins#Example:_Installing_Non_Moodle-Specific_Tiny_MCE_Plugins

 

In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by alex sykes -

RE: I tried to upload Mario Wehr's rj_insertcode into a clean 2.51 Moodle install but it failed saying that INVALID STRUCTURE OF ZIP FILE.

Standard Moodle install does not like .tgz files as uploads. Fix - expand downloaded tgz file, then compress as .zip. If you are working on a mac, then you may have to remove a few invisible files added by Mac OS. Use cleanarchiver for this

Average of ratings: Useful (1)
In reply to alex sykes

Re: Syntax Highlighting Feature for Moodle 2.0

by alex sykes -

However, I am having some issues on a clean install on 2.5.1+

1) Editor loads OK and displays rj_insertcode icon. Click on icon and message ‘Problem retrieving data:Internal server error’ on production server. On local development server, it says 'Data not found'.

2) The interface then appears with correct labels – except that the language drop-down does not appear.

3) Insert button does not submit. Cancel button, however, does work.

Average of ratings: Useful (1)
In reply to alex sykes

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -

However, I am having some issues on a clean install on 2.5.1+

I think Mario didn't use the web page zip installer.  There's not a lot of documentation on how to format the zip file, and he has only tested it on 2.4 by using FTP to install it.

I got it work great on 2.5.1 and 2.45 by simply uploading the rj_insertcode to the /**your moodle directory name**/lib/editor/tinymce/tiny_mce/3.5.7b/plugins/ and then overriding the files in the zip I last attached. 

  • content.css - core hack to fix PRE tag.
  • editor_tinymce.php - core hack to add localization strings.
  • lib.php - core hack to have geshi button appear on toolbar.
  • rj_common.php - bug fix with php5.3
  • rj_get_highlighted_code.php - css fix to deal with tiny_mce formatting.

If you upgrade moodle, you'll have to redo the core hacks - but they are all simple adjustments.

In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Guillermo Madero -

Hi Jeremy,

Working with Moodle 2.5.1.

I must be missing something very obvious or doing something wrong, but:

1. Downloaded:

* http://meditprojects.cti.ac.at/download/rj_insertcode.tgz (Mario Wehr)

* https://moodle.org/pluginfile.php/143/mod_forum/attachment/1011562/geshihacks.zip (Jeremy W)

2. Unpacked rj_insertcode under moodle/lib/editor/tinymce/tiny_mce/3.5.8/plugins/

3. Unpacked geshihacks, and after a bit of searching I moved the five files included, into the following directories:

* tinymce/ --- lib.php

* tinymce/lang/en/ --- editor_tinymce.php

* tinymce/tiny_mce/3.5.8/themes/advanced/skins/default/ --- content.css

* tinymce/tiny_mce/3.5.8/plugins/rj_insertcode/tinymce/php/ --- rj_common.php, rj_get_highlighted_code.php

4. Went into my Moodle installation and enabled the geshi filter.

5. Created a new course.

6. When I finally added a page resource, all I got was an empty space where the editor should have been.

After this, I went into the editor settings to add the ",|,rj_insertcode" string, but that didn't seem to change anything.

Here's the source code from the Description* section, when I tried to add a Page resource:

<div id="fitem_id_introeditor" class="fitem required fitem_feditor"><div class="fitemtitle"><label for="id_introeditor">Description<img class="req" title="Required field" alt="Required field" src="http://localhost/moodle25/theme/image.php/standard/core/1375731520/req" /> </label></div><div class="felement feditor"><div><div><textarea id="id_introeditor" name="introeditor[text]" rows="10" cols="80" spellcheck="true" class="collapsed collapsible" onblur="validate_mod_page_mod_form_introeditor_5btext_5d(this)" onchange="validate_mod_page_mod_form_introeditor_5btext_5d(this)"></textarea></div><div><input name="introeditor[format]" type="hidden" value="1" /></div><input type="hidden" name="introeditor[itemid]" value="467834473" /><noscript><div><object type='text/html' data='http://localhost/moodle25/repository/draftfiles_manager.php?action=browse&env=editor&itemid=467834473&subdirs=0&maxbytes=0&areamaxbytes=-1&maxfiles=-1&ctx_id=15&course=2&sesskey=7NpRIv90h8' height='160' width='600' style='border:1px solid #000'></object></div></noscript></div></div></div>

By the way, I noticed that:

1. rj_common.php (in geshihacks) is exactly the same as the one in the rj_includecode tgz file.

2. rj_get_highlighted_code.php (in geshihacks) has the ampersand character ("$geshi =& new GeSHi(").

 Cheers!

In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Guillermo Madero -

Hi Jeremy,

I can see I just described what happened but my objective wasn't clear at all. So let me rephrase that smile What do I need to download and do to make the rj plugin work? Instructions really seem simple but me, and many others, are really getting lost here.

Thanks!

In reply to Guillermo Madero

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -

Guillermo, don't use Mario's code with my changes.  I do have it running fine on both 2.45 and 2.51.

Start with the pure rj_insercode code file (http://www.ryanjuckett.com/downloads/category/8-rj_insertcode)

Average of ratings: Useful (1)
In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Guillermo Madero -

Hi Jeremy,

Ok, I downloaded file "RJ_InsertCode-1.2.0.zip" (from http://www.ryanjuckett.com/downloads/category/8-rj_insertcode), unpacked it and moved the "rj_insertcode" folder to have it like this:

moodle25/lib/editor/tinymce/tiny_mce/3.5.8/plugins/rj_insertcode

I went into my Moodle but didn't receive any notifications and nothing seemed to change.

However, I noticed that the "rj_insertcode" root folder now has all the files that were under the "tinymce" folder, in Mario's version and that it doesn't include the "lang" and "pix" folders, nor the "lib.php" and "version.php" files (as in Mario's version).

Anyway, I unpacked the "geshihacks.zip" files and moved the five files to their folders, as I previously described. Again, nothing seemed to change neither in the plugin page nor in the editor toolbar.

 

Would it be too much of a trouble if you could just attach a zip file here with the complete "tinymce" folder under your moodle/lib/editor/ directory (Moodle 2.5.1)?  big grin

Thanks beforehand!

In reply to Guillermo Madero

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -

moodle25/lib/editor/tinymce/tiny_mce/3.5.8/plugins/rj_insertcode

I went into my Moodle but didn't receive any notifications and nothing seemed to change.

You won't see any notifications because it's a core moodle hack.  It's not enough to just dump the rj_insertcode folder into that directory.  The next step is to hack the lib.php file with just two lines of code.  It's a bad idea just to copy the lib.php anyway because some other lines may change between moodle versions.  I don't know how much of the 2.4x lib.php and 2.5x lib.php are different.  So don't replace any files.  Just add the lines of code.

The hack is in the official Moodle docs here:

http://docs.moodle.org/dev/TinyMCE_plugins#Example:_Installing_Non_Moodle-Specific_Tiny_MCE_Plugins

Once you do that, then you'll see the button appear on the toolbar.

You must still have the original lib.php and have not replaced it. I wouldn't replace it anyway because some of it might have changed.  You'll want to merge those two lines of code:

From the moodle FAQ:

go back to the root TINYMCE directory (moodle/lib/editor/tinymce) and find lib.php. This is where you need to add your newly added plugin to the params array (plugin array)so it is initialized. look for 'return $params' in this code, it will likely appear between line 200 & 300. Before the return, add the following bit of code:

$params['plugins'] .= ',rj_insertcode';

$params['theme_advanced_buttons3'] .=',rj_insertcode';

Those are the only two lines you need to add right before the return $params.  You won't see the button unless you do this.

In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Guillermo Madero -

Hi Jeremy,

Thanks for the advice, however those changes are already included in the rj_insercode plugin files (e.g. the editor_plugin.js mentioned in the doc page) and in the geshihacks' files, for example the lib.php modifications you mention are there:

//attempted hack
$params['plugins'] .= ',rj_insertcode';
$params['theme_advanced_buttons3'] .=',rj_insertcode';

Anyway, as I described in my previous post, I continued the process with "I unpacked the 'geshihacks.zip' and moved the five files to their folders files".

I get what you mention about code being different and I know that code shouldn't be blindly pasted (I worked as a developer most of my life), so I promise I won't do that. I just want to compare what I have in my directory (which I haven't been able to make work) with what you have in yours (which you have working). I also have Moodle 2.5.1 installed smile

In reply to Guillermo Madero

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -

Hi Guillermo,

I opened up my 2.5.1 Moodle install and pulled the lib.php file.  All you need is this file and the rj_insercode and the plugin will work.

Put this file in your moodledir/lib/editor/tinymce directory.  The button will appear on the tinymce toolbar.

So this geshi editor has been tested on every version moodle 2.x

 

In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Bob Puffer -

I've watched this conversation throughout and have been waiting for a confirmation from Guillermo that he has indeed been successful in getting this working on 2.5.1.

In reply to Bob Puffer

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -

I've watched this conversation throughout and have been waiting for a confirmation from Guillermo that he has indeed been successful in getting this working on 2.5.1.

Well, i've installed it fine on a clean Moodle 2.5.1.

In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Bob Puffer -

This is likely the most fragmented discussion I've ever witnessed.  Do you think you could post a step-by-step procedure for getting RJ_Insercode working with TinyMCE?  Thanks.

Average of ratings: Useful (1)
In reply to Bob Puffer

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -

This is likely the most fragmented discussion I've ever witnessed.  Do you think you could post a step-by-step procedure for getting RJ_Insercode working with TinyMCE?  Thanks.

Yeah, well that's Moodle Forums for you!  I'm hoping the Moodle finally uses something like ForumNG.

Which version of Moodle are you using?  In the mess below, I think I've addressed every version.

History:

  1. Ryan's original plugin was made for the Joomla JCE Editor - which uses an older version of TinyMCE. Ryan no longer maintains the code, his last update was four years ago.
  2. When Moodle 2.0 came out (and dropped the horrible editor from 1.9), I figured it would be "easy" to port it over to Moodle.
  3. Moodle handles localization differently than the usual TinyMCE way, so I had to address that.  However, it's arguably better.
  4. Moodle also has TinyMCE force the PRE tag on things it shouldn't, so I had to hack Moodle core on that as well.
  5. Then as Moodle when from 2.0 to 2.1, to 2.2, 2.3, they updated the TinyMCE engine which finally stopped the wierd whitespace problem.
  6. In Moodle 2.4, the devs saw many people wanting to add features to the TinyMCE toolbar and announced a way of writing regular non-core hacks.  But i can't find documentation on how to do it.
In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Bob Puffer -

Jeremy -- where in this 'mess' are instructions for installing?  I'm sorry, if you're referring to the 'mess' of this discussion, I cannot make out the steps to install for 2.5.1.  That's what I meant by fragmented.  Could you just create one post with the five (or so) steps necessary to put this into a standard install?

In reply to Bob Puffer

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -

Could you just create one post with the five (or so) steps necessary to put this into a standard install?

Yes, here's the steps. I recommend testing this using MAMP on a local machine before uploading it live.  In addition rename the original files so you can easily go back if you don't like it.

  1. upload the rj_insertcode to the /**your moodle directory name**/lib/editor/tinymce/tiny_mce/3.5.7b/plugins/
  2. lib.php - core hack to have geshi button appear on toolbar.
  3. Flush the Moodle cache and make a post on your forum or assignment.  You'll see the code button on the toolbar and it should work.
  4. editor_tinymce.php - This will put in all of the english strings or spanish, or chinese or whatever your language.
  5. content.css - core hack to fix PRE tag. Not critical, but kinda annoying unless you apply this fix.
  6. rj_common.php - bug fix with php5.3 warnings about dereferencing.
  7. rj_get_highlighted_code.php - css fix to deal with tiny_mce formatting.

Let me know which step is confusing and I'll elaborate.

In reply to Bob Puffer

Re: Syntax Highlighting Feature for Moodle 2.0

by Guillermo Madero -

Sorry, I was at the Moodle MOOC and so I had very little time.

Next week I'll see about this and report back.

In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Guillermo Madero -

Thanks Jeremy,

I was at a MOOC but I'll check the file next week. Sorry for all the bother I've given!

In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Bob Puffer -

Missing somewhere a link to instructions or patch for RJ_InsertCode for Moodle 2.3x?

Thanks

Average of ratings: Useful (1)
In reply to Bob Puffer

Re: Syntax Highlighting Feature for Moodle 2.0

by Adrian Gould -

I also need instructions for 2.3 as we have an update hold placed on moodle for at least six months.

 

In reply to Bob Puffer

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -

Missing somewhere a link to instructions or patch for RJ_InsertCode for Moodle 2.3x?

Thanks

All of the instructions for adding the Geshi filter is the same for all Moodle versions 2.0 to 2.3.x. 

Moodle 2.4 has a new API for adding text filters.  A couple of others on this forum have converted my text filter to 2.4.  I've been really busy and probably won't get to it till this summer.

In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Visvanath Ratnaweera -
Picture of Particularly helpful Moodlers Picture of Translators
Noticed that even http://docs.moodle.org/24/en/Code_syntax_highlighting talk of GeSHi and links to this discussion thread https://moodle.org/mod/forum/discuss.php?d=43266 from year 2006!
In reply to Visvanath Ratnaweera

Re: Syntax Highlighting Feature for Moodle 2.0

by Frank Schütte -

Hallo,

ich verwende das Modul mit meinem Moodle 2.4 und habe es so angepasst, dass es bei mir funktioniert. Bei mir befindet sich Moodle im Unterverzeichnis "moodle" des Servers. Dazu musste ich in der Datei rj_insertcode.js an 2 Stellen den richtigen Pfad hinterlegen. Es ist einfach, diesen anzupassen, einfach die 2 Stellen mit "moodle/lib/..." suchen und entsprechend den eigenen Anforderungen abändern.

Die Datei ist rj_insertcode-24.tgz.

Gruß, Frank Schütte

In reply to Frank Schütte

Re: Syntax Highlighting Feature for Moodle 2.0

by Frank Schütte -

Hello, I apologize for my previous post.
I just didn't realize the forum language being English. So, here is the translation of my previous post.

I do use the module rj_insertcode with Moodle 2.4 and had to do some adjustments to make it work with moodle 2.4. On my server Moodle is accessed by the subdirectory "moodle", so I was hit by the above mentioned problem. I had to modify the path to php scripts in a javascript file. It is easy to fix, just find the 2 places inside rj_insertcode.js, where it says "moodle/lib/..." and change it to your path.

Bye the way, I did change some additional minor stuff, because the translations weren't working as expected. So I changed rj_insertcode.html -> rj_insertcode.php and the german umlauts in the german translation file.

The file is rj_insertcode-24.tgz.

Bye,

Frank Schütte

PS: I don't know javascript enough to make the pathes be detected automatically, which is surely possible and probably not hard to do.

Average of ratings: Useful (2)
In reply to Visvanath Ratnaweera

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -

Noticed that even http://docs.moodle.org/24/en/Code_syntax_highlighting talk of GeSHi and links to this discussion thread https://moodle.org/mod/forum/discuss.php?d=43266 from year 2006!

Both those links only apply to Moodle 1.9.x.  And I'll tell you that the Geshi Filter for 1.9 was a royal pain in the arse to use.  You had to do it all in the HTML, and if you made a mistake and clicked EDIT, the Moodle 1.9 editor would mess up all of the markup.  And don't get me started on the indenting nightmare of the Moodle 1.9 editor.angry

In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Visvanath Ratnaweera -
Picture of Particularly helpful Moodlers Picture of Translators
Hi Jeremy and all

Jeremy wrote:
> Visvanath wrote:
>> Noticed that even http://docs.moodle.org/24/en/Code_syntax_highlighting talk of GeSHi and links to this discussion thread https://moodle.org/mod/forum/discuss.php?d=43266 from year 2006!
>
> Both those links only apply to Moodle 1.9.x.

I was wondering how people could have discussed Moodle 2.4 in 2006.

There's more: found http://docs.moodle.org/25/en/Code_syntax_highlighting has the same text and continues: "WARNING: (This warning applies to Moodle 1.9.4. It may apply to other versions, but I have not tested to confirm) The GeSHI filter, while it does work, when used in conjunction with the HTML Editor, can be quirky, frustrating, and difficult to use. See my reproducible example, below.", dated 3. March 2009!
In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Sam Mudle -

In Moodle 2.4x, the moodle wiki pages strip out the line breaks generated by Geshi.  I'll have to figure out why the wiki module does that sometime.

In reply to Sam Mudle

Re: Syntax Highlighting Feature for Moodle 2.0

by Carl LeBlond -

I have an updated rj_insert code for Moodle 2.6.  You can find it on my github page available here.

Enjoy!

Carl