=== Plugin Name === Contributors: flashpixx Tags: code, color, geshi, syntax, syntax highlight, highlight, code color, source, programming, program Requires at least: 3.2 Tested up to: 3.4.2 Stable tag: 0.13 Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=WCRMFYTNCJRAU License: GPLv3 or later License URI: http://www.gnu.org/licenses/gpl-3.0.en.html The plugin can colorize any source in a post or page. There are a lot of possiblities to configurate your code designs. == 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 == Installation == 1. Upload the folder to the "/wp-content/plugins/" directory 2. Activate the plugin through the 'Plugins' menu in WordPress == Screenshots == 1. source code view with highlight effect 2. source code with collapsed view and dynamic highlight effect 3. shows the black style 4. tab view of code blocks 5. tab view of code blocks with black style 6. setting page with style definition == Shortcode ==

The shortcuts / tags are free defined, so here you see the default definition "cc" and "cci". Feel free to change this names. You can define a own style, but you need to pass different placeholders in it, so the plugin can create the correct expression for modifing the content. There are three placeholders:

All meta characters are masked, so you can add a own tag structure. Take a look to the plugin's setting page, the defalut values are used within this documentation. Add to your post or page a tag 

[cc lang="source language"]your source code[/cc]
or the call 
[cci lang="source language"]your source code[/cci]
You can change in the global plugin option this tags / options, so you don't need a change to your articles, if you update from another plugin. The layout of the code is stored in the plugin options (default values), this values can be overwritten by each code tag. On the shotcuts you can create different additional options:

The other options can be found in the plugin settings between the brackets [].

== Creating own code layout == This section should be a short how-to for creating your own layout style. First take a look on the "layout.css" in the plugin directory. There are different sections:
  1. Each section descrips the layout of the different layout elements of the codes
  2. The other section descrips the "global" configurations of each element: These settings can be combined so you can change or overwrite the default values. In the default settings the collapse-button and the images of the toolbar buttons are fixed, so each code block / line has got the same layout. With this structure colors and other layout styles can be seperated.
  3. Under the global options two style classes with different color layouts a are set: You can change the coloring on the plugin settings (global) or you can add it with the "css_*" tags on each shortcut.
  4. The layout of the source code is depended on the style option and/or the language option, which is set by the shotcut. The shortcut options "style" and "lang" are used for the style definition (see the FAQ). The style is loaded in this order: To define the (language) styles, take a look into the plugin settings, exspecially the "codestyle" subsection. In this subsection each code style is defined. Each value is a CSS definition, so you can use any CSS element to configurate the source code parts.
== Requirements == * Wordpress 3.2 or newer * PHP 5.3.0 or newer == 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 == Frequently Asked Questions == = 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: 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.