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:
- "%c" this is the substitution for the source code
- "%p" is the subsitution for the parameters, like a key-value pair. This placeholder represents the parameter string eg: key1="value" key2="value"
- "%s" is a placeholder for any kind of spaces. You need this placeholder to create a space between the name of the tag and the parameter list. This placeholder represent one or more than one space
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:
- highlight : is used for static highlighting some code lines. Each line number (started with 1) is spitted by space [allowed values: spaces and numbers]
- hoverhighlight : this option can be set more than once and adds a dynamic hover effect to a DOM element for hovering different code lines [allowed valus: class / ID of the DOM element, line numbers split by spaces, CSS style definition]
- keywordcase : sets all keywords to lower or upper case. An empty value leaves the code untouched [allowed values: upper | lower | ""]
- id : set the unique ID of the code block [allowed values: every string, default value: geshisourcecolorer-MD5 hash of the source]
- style : sets the style of the code. If this option is not set, the plugin tries to find a style which is named with the language name (lower-case). If the style is not found, it uses the default style
- tab : sets the information, which code blocks should be collected in one container. The option value of this field is a class name and a name, which is shown in the item [allowed value: string value in this structure "classname tabtext"]
- lol : name of the source code that is shown within the list of listing (if this flag isn't set or empty, the code is not shown on the list) [allowed values: string value]
- lolhead : shows the name, which is set by the list of listing option [allowed values: true | false]
- toolbar_blankwindow : this option enables / disables the button for creating a text window with the source code [allowed values: true | false]
- toolbar_copyclipboard : this option enables / disables the copt-to-clipboard button [allowed values: true | false]
- toolbar_linenumber : this option enables / disables the button for hiding / showing the line numbers [allowed values: true | false]
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:
- Each section descrips the layout of the different layout elements of the codes
- 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.
- "geshisourcecolorer-lol" is the ID of the table of listings
- "geshisourcecolorer-line" is the class of the code line block
- "geshisourcecolorer-collapse-button" is the class name of the div container, which is shown if a code block is marked with "collapse=true"
- "geshisourcecolorer-tab" is the class name of the div, which is stored all div container of a tab view (each tab element is an unorded list)
- "tabmenu" is the container div, which shows the tab menu, it is always stored within the geshisourcecolorer-tab
- "geshisourcecolorer" is the global class name of each code block / line (the code lines are stored as an ordered list on lines)
- "toolbar" is the class, which is always within a "geshisourcecolorer", which descripes the toolbar div container
- "togglelinenumber" is the classname of the button on the toolbar for show / hide the line numbers
- "copyclipboard" is the classname of the button on the toolbar for clipboard-copy
- "sourcewindow" is the classname of the button for creating a blank-code-window
- 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.
- "geshisourcecolorer-*-default" which is the class name of the default color style (white background, grey lines & hovereffects)
- "geshisourcecolorer-*-black" which is the class name of dark layout
- 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.
- if the style parameter is set, this style will be used if exists, if not exists the default style is used
- if the style option not set or the style is not found, the lang value is used to find a style, if no style exists, the default style is used
- WordPress 3.2 or newer
- PHP 5.3.0 or newer