RJ_InsertCode

Written by Ryan Juckett

Saturday, 10 January 2009 07:28

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.

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.

Lets take a look at some sample output.

Sample HTML Code

<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 C++ Code
1 2 3 4 5 6	// This code sample is using class based style sheets. template< typename T > T GetMin( const T & a, const T & b ) { return (a < b) ? a : b; }

Sample PHP Code

<?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

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

RJ_InsertCode Downloads

SVN Repository

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

Frequently Asked Questions

How can I get scroll bars to appear for very large code blocks?

Scrolling will be included in the next release of the plugin. For now, you can add the following css code to your website (change width and height to the appropriate values).

div.rj_insertcode { overflow: auto; width: 500px; height: 700px; }

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 }".

How do I install the plugin with Joomla?
In order to manually install the plugin, you need to be using TinyMCE 3.x, but Joomla currently uses an older version of TimyMCE. 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.

Changelog

  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

Last Updated ( Saturday, 28 March 2009 09:47 )

blog comments powered by Disqus

Main Menu

RyanJuckett.com site content by Ryan Juckett is licensed under a Creative Commons Attribution 3.0 United States License.