The Code-Donkey Code Highlighter - 2018

Multi-highlighting HTML PHP JS CSS on websites

  1. Purpose, 2 basic code examples
  2. Code-Donkey Tags
  3. How to use Code-Donkey
  4. Code blocks with designated language
  5. Preventing overhighlighting - 'stoje'
  6. Line numbers, starting at 1 or higher
  7. Automatic highlighting of php vars and file names
  8. Limitations / Rules
  9. Contact form


Buy Code-Donkey at www.codecanyon.net.

I. Purpose, 2 basic code examples


When writing 140 pages of a documentation for webmasters, i needed a code highlighter for html/php/js/css. I searched the web, but nothing i found seemed to be the thing i had in mind:
What i wanted was a 'Code Donkey'...

   Example: Inline highlighting by Code-Donkey:
For example, i want to show the html of a Link in the flow of plaintext. Or be it a piece of = {p1:'javascript', p2:'inline', p3:'code'}. The same goes for #css input[type=text] { display:inline } and, finally, inline php code: $typos_pardoned[1 = "cleanup_$later!";.

   Example: Code block multi-highlighting by Code-Donkey: <em>Hello</em> <h1>Code-Donkey!</h1> <a href="https://www.google.com/search?q=donkey&tbm=isch" target="_blank">donkeys</a> <style> .ferrari { color: red; } .bmw { background:url('330d.jpg') } .triumph { width:1965px } </style> <script src="carshow.min.js"></script> <script type="application/javascript"> var arrr = [ 'Ferrari' , 'BMW' , 'Triumph' ]; var show = '<h1>Car-Show</h1>'; /* var for getElementById innerHTML arrr show */ function carline(element) { show = '<li><b class=' + element.toLowerCase() + '>' + element + '</b></li>'; show+= 'is &lt;?php echo $what ?> than '; return show; } for ( var i=0; i<arrr.length; i++ ) { //console.log(arrr[i]); show = carline(arrr[i]; document.getElementById('carshow').innerHTML+= show; } </script> <a href="carshow.html" style="display:block"> <ul id="carshow"> <!-- <ol><li> ? --> <li>New in stock: &lt;?php echo "This $car" ?> </ul> <a> &lt;?php /* for ( $i=0; $i<count($cars); $i++ ) { echo "car=$cars[i]<br>"; } */ $cars = array( '<Ferrari>' ,'(BMW)' , '{Triumph}' , "$newcar" ); #Dodge? $html[1] = " " . carshow($cars, date('Y-m-d') ); //carshow($car, "txt") $html[1].= "<br><b class='red'>New in stock: $newcar</i>"; echo cmsgo_print_r($html); ?>

II. Code-Donkey Tags


A. The Code Blocks Tag: (multi-highlighting of mixed html/css/js/php)

<code>&lt;xmp> html/css/js/php code &lt;/xmp></code>
B. Inline Code Tags (four):

code, code, code, code
C. Code Blocks Tags for designated language (three): (highlighting only css or js or php)

<code-css>&lt;xmp> css code &lt;/xmp></code-css> <code-jas>&lt;xmp> javascript code &lt;/xmp></code-jas> <code-php>&lt;xmp> php code &lt;/xmp></code-php>
You may try to leave off the <xmp></xmp> tag inside the code blocks. However in this case, your browser may change or amend your code in accordance with the browser's rules and other display failures may occur.


III. How to use Code-Donkey


<link rel="stylesheet" href="code-donkey.css" type="text/css"> <script src="code-donkey.min.js"></script> <script> window.onload = function() { CodeDonkey.blocks(); //code blocks highlighting - II.A., II.C. CodeDonkey.inline(); //inline tags highlighting - II.B. } </script>

IV. Code blocks with designated language


When you use code blocks, Code-Donkey takes the <style></style>, <script></script> and <?php ?> tags inside your blocks as markers to apply the appropriate css, js, php highlighting.
Now you may want to show code blocks containing especially css or js or php code. Code-Donkey does this with the 'Designated Code Blocks' - designated to one of the 3 languages css, js or php. ('Designated html' is done by a standard code block, since inside of it no marker is needed for html.)

Example: Designated code block with CSS styles - <code-css></code-css>

<code-css>&lt;xmp> .ferrari { color: red; } .bmw { background:url('330d.jpg') } .triumph { width:1965px } &lt;/xmp></code-css>

Notice that no <style></style> tag is needed nor displayed! Code-Donkey knows from your assignment - - that you want to highlight CSS styles.

The same applies for the other two, js and php:

Example: Designated code block with Javascript - <code-jas></code-jas>

<code-jas>&lt;xmp> var arrr = [ 'Ferrari' , 'BMW' , 'Triumph' ]; var show = '<h1>Car-Show</h1>'; function carline(element) { show = '<li><b class=' + element.toLowerCase() + '>' + element + '</b>'; show+= 'is &lt;?php echo $what ?> than '; return show; } &lt;/xmp></code-jas>

Example: Designated code block with PHP - <code-php></code-php>

<code-php>&lt;xmp> $cars = array( '<Ferrari>' ,'(BMW)' , '{Triumph}' , "$newcar" ); #Dodge? $html[1] = " " . carshow($cars, date('Y-m-d') ); //carshow($car, "txt") $html[1].= "<br><b class='red'>New in stock: $newcar</i>"; echo $html['all']; &lt;/xmp></code-php>

V. Preventing overhighlighting - stoje


Code-Donkey hightlights on every instance of <style></style>, <script></script> and <?php ?> tag. This may be more code highlighting than you want.

For example, you may fill a php variable with a string containing html and even style and script elements:

<code>&lt;xmp> <style>.triumph { color:indianred; }</style> &lt;?php $html = " <h1>Welcome to my car show!</h1> <h3>Featuring " . $cars[0] . ", " . $cars[1] . " and " . " " . $cars[2] . "</h3> <style>.bmw { color:black; }</style> <script>document.getElementById('BMW').backgroundColor = '" . $color . "'</script> <br><br>"; echo $html; ?> &lt;/xmp></code>

Stop, Code-Donkey, stop!! Stop highlighting the sub-sections!!!

To stop Code-Donkey from highlighting sub-sections of another language, use the parameter 'stoje'. There are two ways:

<script> //var stoje set as parameter in the code blocks call: CodeDonkey.blocks('php-css php-jas'); //instead of CodeDonkey.blocks() //..this will affect all code blocks on the page. </script> <!-- stoje set as a html5 data attribute: ------> <code data-stoje="php-css php-jas"></code> <!-- ..this will affect only this code block. -->
The string stoje may contain, separated by space, any code-subcode combination. 'php-css php-jas jas-php jas-css css-php css-jas' would prevent any sub-sections to be highlighted.
I recommend this setting: CodeDonkey.blocks('php-css php-jas jas-css');

Now Code-Donkey, highlight again!

<code data-stoje="php-css php-jas">&lt;xmp> <style>.triumph { color:indianred; }</style> &lt;?php $html = " <h1>Welcome to my car show!</h1> <h3>Featuring " . $cars[0] . ", " . $cars[1] . " and " . " " . $cars[2] . "</h3> <style>.bmw { color:black; }</style> <script>document.getElementById('BMW').backgroundColor = '" . $color . "'</script> <br><br>"; echo $html; ?> &lt;/xmp></code>

Note that the first line .triumph { color:indianred; } is highlighted nevertheless, and the <style></style> tag is displayed, for it is a section, not a sub-section. - 'stoje' affects only sub-sections.

In designated code blocks, Code-Donkey will listen to 'stoje' accordingly and stop highlighting the sub-sections:

<code-php data-stoje="php-css php-jas">&lt;xmp> $html = " <h1>Welcome to my car show!</h1> <h3>Featuring " . $cars[0] . ", " . $cars[1] . " and " . " " . $cars[2] . "</h3> <style>.bmw { color:black; }</style> <script>document.getElementById('BMW').backgroundColor = '" . $color . "'</script> <br><br>"; echo $html; &lt;/xmp></code-php>

VI. Line Numbers, starting at 1 or higher


<!-- Adding css class "ln" to <code></code> will add a left column with linenumbers --> <code class="ln"> .... </code> <!-- To make the line numbering start at e.g. 7, add the starting number like this: --> <code class="ln start7"> .... </code> <!-- The same goes for the designated blocks: <code-css class="ln"></code-css> etc. --> <code-css class="ln start7"> .... </code-css> <!-- A Code-Donkey Tag employing both linenumbers from 7 and stoje looks like this: --> <code-css class="ln start7" data-stoje="css-php css-jas"> .... </code-css>

VII. Automatic highlighting of php vars and file names


When handling larger documentations, every meaningfull simplification of the text saves time and increases managability. Here is one more little feature of Code-Donkey which i find helpful:

When you add CodeDonkey.autotx() as a third call after CodeDonkey.blocks() and CodeDonkey.inline(), then php $variables and filenames like ../mydir/code-donkey.js will be highlighted automatically, i.e. without tagging, within the <body>texts</body> of the page. This does not interfere with code blocks nor inline tags.
In case you wish a special highlighting feature, please ask me! I might be able to serve you with adding the sought for feature to make your workflow even more efficient.

VIII. Limitations / Rules


  1. Within the inline tags (<htm>, <css>, <js> and <php>), html tags must be closed correctly.
  2. I.o.t. display the tags <html>, <head> or <body> within the inline tag <htm></htm>, an encompassing <xmp></xmp> has to be used.
  3. When employing (not .html but) .php files, '&lt;?php' instead of '<?php' has to be written.
  4. The tags have to be css-defined as display:block, not display:table (concerns Chrome browser).

IX. Contact Form

Please send your comments, questions and bug reports using this contact form.
You may paste code you had problems with into the form field.
Please include an email address so i can reply to you.

Your message:





I love to hear from you.

Sebastian Heimpel M.A., Germany
Author of © Code-Donkey
7 Apr 2018
© All rights reserved.
Buy Code-Donkey at codecanyon.net.