site-tpe/EnlighterJS/Docs/50-Codegroups.md

Code-Groups

This example shows how to use code-groups. You can define a new code-group by adding a data-enlighter-group attribute to your code tags you want to group. The value is used as an internal identifier and is not shown anywhere (e.g. use numerical identifiers). The name/title of the tab is defined by a data-enlighter-title attribute. To use a corporate style within all code-blocks grouped together, the theme definition of the first code-block defined in your document (the group leader) is used as theme of the complete group - other theme definitions will be ignored. if no theme is specified, the default theme (defined in the options) will be used, which is recommended.

Define a Code-Group

<!-- the following 3 code-blocks will be grouped togehter - the theme will be "enlighter" (global theme definition of the group-leader) !-->
<pre data-enlighter-language="js" data-enlighter-group="group0001" data-enlighter-title="Javascript">
this.tokens = tokens || [];
options = this.options;
</pre>

<!-- Theme definition will be ignored !-->
<pre data-enlighter-language="java" data-enlighter-theme="panic" data-enlighter-group="group0001" data-enlighter-title="pure Java">
import javax.swing.JOptionPane;

public class OddEven {
/**
 * "input" is the number that the user gives to the computer
 */
private int input; // a whole number("int" means integer)
</pre>

<!-- Theme definition will be ignored !-->
<pre data-enlighter-language="php" data-enlighter-theme="twilight" data-enlighter-group="group0001" data-enlighter-title="PHP Script">
/** Test Snippet */
$mysqli = new mysqli("localhost", "my_user", "my_password", "world");
   
/* check connection */
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}
</pre>

Initialize Code-Groups

The initialization of code-groups differs from the standard. You have to use the EnlighterJS.Util.Helper utility function (triggered by Metainit and EnlighterJS.Util.Init) - it does the complete initialization and grouping for you!

• JS-Initialization Chain: EnlighterJS.Util.Init -> EnlighterJS.Util.Helper -> EnlighterJS
• Metainit-Initialization Chain: EnlighterJS.Util.Metainit -> EnlighterJS.Util.Helper -> EnlighterJS

Finally, use the following JavaScript code inside of a domready or onload event to create the highlighted elements. Check out the options section to see the various options you can use.

Notice: grouping has to set to true when using the javascript based initialization

// highlight all pre tags; no inline-highlighting
EnlighterJS.Util.Init('pre', null, {
    indent: 4,
    language: 'js',
    theme: 'enlighter',
    grouping: true,
    rawButton: true
});