This plugin hasn’t been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.

This plugin has been closed and is no longer available for download.

GeSHi Source Colorer

Description

The plugin creates a colorized view of source code. It uses GeSHi for creating the layout information and
allows an individual configuration of the tag values, so that a migration of anonther code syntax highlighter plugin is possible, without changing the article
data. Additional options are like enabling / disabling line numbers, copy to clipboard and open code in a blank window can be used by a hover toolbar.
The code blocks on a post / page can be collected to a “list of listings” automatically or collected in a tab view, each code block can get its own layout
style and each code boxes can be collapsed / expanded. On a code box different lines can be static highlighted or the highlighting can be added dynamically
on hovering a individual DOM element. You can define a own JavaScript or CSS file in your theme, so that you can handle different layouts / actions on your
themes. Own styles for different codes can be created and exported / imported into the plugin.

Features

  • free definition of the tags / shortcuts
  • free code style definition on the given language
  • multi- or singleline code block on one page with individual configuration
  • global CSS style definition (code block and toolbar)
  • theme based individual CSS and JavaScript files
  • static & dynamic highlighting (hover effect on every DOM with jQuery possible)
  • table of listing on each page with anchor elements
  • individual configuration on the code block hover toolbar with enabling / disabling line numbers, open code in a blank window, copy code to clipboard, collapsed view etc.
  • collapsed view of the code with jQuery expand / collapsed action
  • keyword references to the language definition
  • individual code tab size
  • export / import function with dynamic style renaming (over different plugin versions)
  • tab view / browsing of code blocks (different code blocks can be collected in one global container and each code will be referenced by a individual tab)
  • automatic choice of the codestyle on the language name
  • individual language definitions with GeSHi
  • individual access with JavaScript and jQuery to the code blocks
  • live preview of style definition

Screenshots

  • source code view with highlight effect
  • source code with collapsed view and dynamic highlight effect
  • shows the black style
  • tab view of code blocks
  • tab view of code blocks with black style
  • setting page with style definition

Installation

  1. Upload the folder to the “/wp-content/plugins/” directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress

FAQ

Where can I find the tag options ?

Take a look on the administration page of the plugin. Within the brackets [] you can find the option name, that can be passed to the tag.

Can I change the layout of the code box ?

Yes, take a look on “Other Notes”, there is a short description fpr changing the layout.

Can I change the HTML ID of the code block ?

Yes, see above. You can set the ID with the option flag “id” on the code tag.

Can I get access to the line numbers with JavaScript ?

Yes. Each line within a code block can be addressed with the ID name of the code block followed by “-line number”.

Can I add a table of listings ?

Yes, you can create a “list of listings” with the call

[lol]

. This will add a div to your page and a jQuery call fills the source data into the
the div after the page have been loaded. The layout of this list is stored in the main CSS file. Feel free to change your layout. Take in mind, that you can not
use the “collaps” call not on a “tab” view.

Can I collecte different code blocks into one container ?

Yes, use the tag option “tab”, which create one container and add all other code blocks with the same name into this container. The value is “classname name of your code”.
All code blocks with equal classnames are grouped and a tab menu is created, each item of the menu shows the text which is set after the first space in the tab option.

My language type is not supported. Can I add my own language file ?

Yes, take a look on the GeSHi documentation and feel free to add your own style. The code file must be stored
within the “plugin-directory/external/geshi” directory.

Can I use CSS styles on my code ?

Yes, disable all layout information of GeSHi (set the “geshicss” flag to false globally or individual and the set the plugin options the “maincss” to false). In this case no stylesheet is
used, so you can create your own styles.

Can I change the layout of the container ?

Yes, the plugin has got two styles:

  • “geshisourcecolorer-block-default” it is a style with white background and greyed line numbers
  • “geshisourcecolorer-block-black” a black style like Emacs, with black background and white line numbers

Set up one of these styles on the plugin setting page in the main menu under “css class name of the code blocks container” (also the line style).

How can I include my own CSS style or JavaScript file ?

The plugin can include your file automatically. Store your CSS file in your (parent) theme directory with the name “geshi-source-colorer.css”. The JavaScript file
must be stored in the (parent) theme directory with the name “geshi-source-colorer.js”. The plugin finds the files and include them.

Where are the styles of the codes ?

The plugin uses one default style for all codes, because defining different styles for each theme / theme group is not possible. Also the styles can be different on each language,
so there are to many possibilities to create the style definitions. But the plugin makes it easy to create your style, that can be used with your theme. Open the plugin settings and
the subsection “code styles”. In this section you can set up on each code description an own CSS style. Please don’t ask if I can create a style for you, because I don’t know the
colors of your site, so creating different predefined styles are not usefull. The plugin shows you a very simple method to create a style, so please do it yourself! If you
have created a style and you think other people can use them also, send me the style definition, than I can add it to the plugin defaults.

Which HTML element is used by the code box ?

GeSHi uses in this plugin an ordered list (ol) and for each code line (li) different span tags. The full code is in a div tag, that uses the classes “geshisourcecolorer”
(especially “geshisourcecolorer-line”) and a class named the language name. The toolbar is also stored in a div under the main code div. For the full code, take a look into the DOM structure.

Is the copy-to-clipboard function JavaScript only ?

No, the copy-to-clipboard function uses JavaScript and Flash. Within the plugin ZeroClipboard is used. The main reason for this
call is the security structure in different browsers and internal access to the clipboard. A genereal call to copy data into the clipboard exists only in IE. Webkit browser like Safari,
Chrome can used Flash but Firefox is very secure that only Flash works with the copy procedure. A JavaScript only version is very complex, because the different implementations – if they exists –
in different browser versions are not documented very well. So if you don’t want to use a Flash object, you must disables the copy feature.

Can I export / import my styles ?

Yes, use the export / import function on the configuration panel. You can copy the “export value” into another plugin (“import value”) or store this value into a text file or something else.
All options of the plugin and the version of the plugin will be exported. The export is a serialized PHP array structure. You can import different version of the plugin, the values will be
converted into the correct data fields of the plugin.

Will be removed my own styles on a plugin update ?

The options of the plugin should be stored on update, but it is recommend to create an export of your settings befor you run the update. You should use in this case the export / import
section on the plugin option page, so you can copy the plugin settings into your clipboard, run the update, check the settings on the new version and import the settings if there are
some errors.

How can I highlight some code lines ?

The line highlight works only on code blocks, not on code lines. There are three ways to do this. First the “static” way, that means, you can set the lines, which should be highlighted
in a flag of your code block. You can use this with the “highlight” flag (see above), eg (we are highlighting the lines 3, 5 and 12):

[cc lang="cpp" highlight="3 5 12"]your code[/cc]

On the second way you can add “hoverhighlight” to the code tag. This two tags in the example creates a hover effect on the ID (begins with #) and class (begins with .) elements for the lines
after the comma. The style of the hover effect is set in the third parameter, which is optional, if it is not set the default highlight style is used. The normal style is saved during hovering
and restored after, so you do not set the “normal style”. Keep in mind, that this hovering will be created with jQuery. You can add more than once of this flag to the code tag, eg:

[cc language="code language" hoverhighlight="#id, 2 3 4, background-color: #bcdaff;" hoverhighlight=".class, 9 16 20, background-color: #ff0000;"]

Third way to highlight code lines is a jQuery effect, so you can set to a HTML tag an event function,
that highlights the lines on the event. It uses the ID structure of the lines (see above). You need a “document ready” call, which adds an action call for
the hover effect (other action are also possible, see jQuery documentation). In this example I put a
hover event on another HTML tag (referenced by the ID) and change the background color of the code lines. Use the
jQuery selectors to get access to the elements.

jQuery(document).ready(function(){

    // put a hover effect on the HTML element with the ID "myhoverelement"
    // and change the background color of the line 2 within the code block
    // with the ID "mycodeblock"
    jQuery("#myhoverelement").hover(

        // create the init function, that is called if the mouse moves in
        function() { jQuery("#mycodeblock-2").css("background-color", "#bcdaff"); },

        // create the release function, that is called if the mouse moves out
        function() { jQuery("#mycodeblock-2").css("background-color", "");   }
    );
}

Take a look in which way you can get access with jQuery on the DOM elements, feel free to create you own effects. A special hint to jQuery is the use in the
no confilict mode“, so you can not use the $ sign to get access to the jQuery object. Take
a look to the WP documentation.

I have got a nice layout, can you add this to the plugin ?

Yes, please send me your CSS styles, a screenshot of the style types or the exported plugin values.

Contributors & Developers

“GeSHi Source Colorer” is open source software. The following people have contributed to this plugin.

Contributors

Translate “GeSHi Source Colorer” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

0.13

  • change language domain to “geshi-source-colorer”
  • fixing css typo error

0.12

  • scripts are loaded only on pages with code
  • change translation
  • language detected fixed
  • add class definition for styles
  • add themeable JavaScript and CSS file
  • add a black styles
  • add tabbed code blocks

0.11

  • fixing CSS layout errors
  • fixing encoding errors and filter hook
  • fixing copy-clipboard & create-blank-source-window layout errors
  • sorting language option field on the settings page

0.1

  • first version with the base functions