RJ_InsertCode

The RJ_InsertCode project is a TinyMCE 3.x plugin that will automatically style code samples for different languages. Its core architecture is based on the Insertcode plugin for older versions of TinyMCE, but it has been almost fully rewritten for TinyMCE 3. There is a simplified setup, more features, a JCE 1.5 installer, and a commented codebase to assist in learning how it works and tweaking it.

  • Highlight over 100 languages with the GeSHi generic syntax highligher including ActionScript, ASP, C, C#, C++, HTML, Java, JavaScript, Lua, Perl, PHP, Python, Ruby, SQL, Visual BASIC, and XML.
  • Inline the style sheet information into the HTML, or use style sheet classes to reduce file size.
  • Optional header text for your code block.
  • Optional line numbers displayed to the left of your code.
  • Specify the first line number.
  • Specify the width and height of a scrollable code window.

After successfully installing, you will see a new icon for inserting a new block of code. Just click the button, choose your options and type away. If you want to edit an existing block of code, click on it and then click the RJ_InsertCode button to edit it.

Let's take a look at some sample output.

 

Sample HTML Code
1
2
3
4
5
6
7
8
9
<html>
<head>
<title>RyanJuckett.com</title>
</head>
<body>
Did you know the oldest edit on Wikipedia can be
found <a href="http://en.wikipedia.org/wiki/Wikipedia:UuU">here</a>?
</body>
</html>

 

Sample PHP Code
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<?php
// This code sample starts at line 100
function getPostedValue ( $name )
{
	if ( isset($_POST[$name]) )
	{
		$value = $_POST[$name];
 
		// when magic_quotes_gpc is enabled, we need to use stripslashes() to
		// remove all of the escape characters.
		if( get_magic_quotes_gpc() )
		{
			$value = stripslashes($value);
		}
 
		return $value;
	}
 
	return null;
}
?>

 

Sample Javascript Code
// This code sample has line numbers disabled
var vecX = 2;
var vecY = 3;
var vecLen = Math.sqrt( vecX*vecX + vecY*vecY );

 

1
2
3
REM This sample DOS Batch code has the header disabled.
ECHO Hello World!
PAUSE

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// This code sample has a width and height set in pixels.
// If the code exceeds the set size, scroll bars will appear.
int myFunction( float myFloatParam, const char * myStringParam, bool myBoolParam )
{
    if(    myFloatParam > 0.0f
        || myStringParam != NULL
        || myBoolParam == true )
    {
        return 500;
    }
    else
    {
        return 0;
    }
}

You can either download a packaged version of the plugin or browse the SVN source repository. You'll find a README.txt file in the packaged zip file with more detailed instructions for installation and customization. You can also use the zip file to intall the plugin in JCE 1.5.

Downloads

SVN Repository

http://svn.ryanjuckett.com/rj_insertcode/trunk/ 

Frequently Asked Questions

Are you going to upgrade the pluging for the newest version of Joomla and JCE?

It's been on my TODO list for a while, but it's had a hard time becoming a high priority task. If anyone makes headway in doing so, I'd be happy to provide support.

Why are my code blocks stretching wider than the highlighted code?

If the formatting doesn't match the samples on this site, there is probably a css conflict. One possibility is that your other style sheets are telling all PRE tags to have a specific width.

How can I add support for highlighting new languages or remove support for existing languages?

Code highlighting is processed through GeSHi. To remove a supported language, delete the "[RJ_INSERTCODE_FOLDER]/geshi/geshi/[LANGUAGE_NAME].php" file. For example, if you wanted to disable highlighting for C++ and you would delete the "[RJ_INSERTCODE_FOLDER]/geshi/geshi/cpp.php" file. You can also add support for new languages by uploading GeSHi language files to the same directory. See the GeSHi website (http://qbnz.com/highlighter/) for help on creating new language files.

How can I change the highlighted code colors?

To change the colors for the inline highlighting options, you can modify the GeSHi language files found in the "[RJ_INSERTCODE_FOLDER]/geshi/geshi/" directory. See the GeSHi website (http://qbnz.com/highlighter/) for help on modifying language files.

To change the colors for the class based highlighting option, just modify the css file you generated through "[RJ_INSERTCODE_FOLDER]/php/rj_cssgen.php".

How can I change the color scheme of the table?

The only way to get much control over the table color scheme at the moment would be to use class based code highlighting and then look at the generated class for the different table cells. For example, the table header is given a class of "head" and the entrire table is always contained in a div with class "rj_insertcode". You could then add a css entry along the lines of ".rj_insertcode .head { my style here }". You can also edit the insert function found in the rj_insertcode.js file.

How do I install the plugin with Joomla?
In order to manually install the plugin, you need to be using TinyMCE 3.x. For older versions of Joomla that did not have TinyMCE 3, the recommended way to use the plugin with Joomla is to install the JCE editor plugin (http://www.joomlacontenteditor.net/). Once you have that installed as your Joomla editor you can install RJ_InsertCode as a plugin in the JCE menu found on your Joomla administration page.

For newer versions of Joomla that have TinyMCE 3, you can put your TinyMCE Editor plugin in extended mode and manually install as follows (thanks to Obi-Wahn in the comments).

- Extract the RJ_InsertCode plugin and upload the 'rj_insertcode' folder to your '/plugins/editors/tinymce/jscripts/tiny_mce/plugins/' directory. If you've done it right, you should have the path '/plugins/editors/tinymce/jscripts/tiny_mce/plugins/rj_insertcode/' after uploading.

- Login as Admin to the Joomla Backend.

- Open the plugin manager at 'Extentions -> Plugin Manager'.

- Edit the 'Editor - TinyMCE' plugin.

- Set the 'Functionality' option to 'Extended'.

- Under 'Advanced Parameters', add the value 'rj_insertcode' into the 'Custom Plugin' and 'Custom Button' fields.

My question isn't listed here?!

Check out the comments below and you might find your answer, or feel free to post a question. I'll get emailed about the post (so don't worry about me missing it), and others with similar issues will be able to learn from it in the future.

Changelog 

  ver 1.2.0
    - Added the scroll-bar support.
    - Added the ability to set width and height of the code box.
    - Added russian language files thanks to Vasya Pupkin.
 
  ver 1.1.1
    - French language packs are now UTF-8 encoded.
    - French translations have been updated thanks to Sarki (www.sarki.ch)
    - Editing html file now aligns the inputs in a pleasing manner thanks to
      Sarki (www.sarki.ch)
 
  ver 1.1.0
    - Made font size pixel based to improve consistency between different
      browsers.
    - Added 'verticle-align: top' spans to wrap each line of code. This fixed
      alignment issues between the line number cell and the code cell when
      code was using bold or italic font styles.
    - Removed rj_insertcode.css. The relevant styles now get baked into the
      language stylesheet files.
    - Removed the style sheet language files from the installation. Users
      desiring style sheet support can use rj_cssgen.php to generate the files
      they need.
    - Added option for turning off line numbers.
    - Updated README instructions to reflect the changes in using class based
      styles.
    - Added german language files thanks to Achim aka cybergurk
      (www.filmanleitungen.de)
 
  ver 1.0.0
    - Initial version

 

Comments