Code highlighter componentAvailable since EcoComposer 2.2

Code highlighter examples
Default SCSS values
SCSS implementation
HTML implementation

Classical code highlighter example :

<div
 id=example-div>
  <!-- An    HTML
  comment -->
  <a href=my-1-link/test?param=1#super class='super-link other-class third-class'
   style="color: #ccc; font-size: 2rem; font-weight: bold">A link</a>
</div>

<?php
  // comment single line
  /* comment
    multiple lines */
  echo "Super" . 'PHP code';
  $test = 2^4;
  
  function test()
  {
    return 3 +4 - $test * 9;
  }
?>

It only handles HTML, inline CSS, and PHP as of now.

The default values are :

code-highlighter--comment--color : 'code-highlighter--comment--color',
code-highlighter--css--attribute--color : 'code-highlighter--css--attribute--color',
code-highlighter--css--attribute--value : 'code-highlighter--css--attribute--value',
code-highlighter--html--attribute--color : 'code-highlighter--html--attribute--color',
code-highlighter--html--attribute-value--color : 'code-highlighter--html--attribute-value--color',
code-highlighter--html--tag--color : 'code-highlighter--html--tag--color',
code-highlighter--html--value--color : 'code-highlighter--html--value--color',
code-highlighter--js--keyword--color : 'code-highlighter--js--keyword--color',
code-highlighter--js--number--color : 'code-highlighter--js--number--color',
code-highlighter--js--string--color : 'code-highlighter--js--string--color',
code-highlighter--js--operator--color : 'code-highlighter--js--operator--color',
code-highlighter--js--variable--color : 'code-highlighter--js--variable--color',
code-highlighter--js--property--color : 'code-highlighter--js--property--color',
code-highlighter--php--default--color : 'code-highlighter--php--default--color',
code-highlighter--php--keyword--color : 'code-highlighter--php--keyword--color',
code-highlighter--php--markup--color : 'code-highlighter--php--markup--color',
code-highlighter--php--number--color : 'code-highlighter--php--number--color',
code-highlighter--php--operator--color : 'code-highlighter--php--operator--color',
code-highlighter--php--string--color : 'code-highlighter--php--string--color',
code-highlighter--php--variable--color : 'code-highlighter--php--variable--color',
print : false,
suffix : '',
themes :  (
  light : (
    default--code-highlighter--comment--color : #8c8c8c,
    default--code-highlighter--css--attribute--color : #174ad4,
    default--code-highlighter--css--attribute--value : #067d17,
    default--code-highlighter--html--attribute--color : #174ad4,
    default--code-highlighter--html--attribute-value--color : #067d17,
    default--code-highlighter--html--tag--color : #0033b3,
    default--code-highlighter--html--value--color : #e67d17,
    default--code-highlighter--js--keyword--color : #0033b3,
    default--code-highlighter--js--number--color : #175e0b,
    default--code-highlighter--js--string--color : #067d17,
    default--code-highlighter--js--operator--color : #080808,
    default--code-highlighter--js--variable--color : #871094,
    default--code-highlighter--js--property--color : #00627a,
    default--code-highlighter--php--default--color : #00627a,
    default--code-highlighter--php--keyword--color : #0033b3,
    default--code-highlighter--php--markup--color : #0033b3,
    default--code-highlighter--php--number--color : #175e0b,
    default--code-highlighter--php--operator--color : #080808,
    default--code-highlighter--php--string--color : #067d17,
    default--code-highlighter--php--variable--color : #871094
  ),
  dark : (
    default--code-highlighter--comment--color : #b4b4b4,
    default--code-highlighter--css--attribute--color : #bababa,
    default--code-highlighter--css--attribute--value : #a5c261,
    default--code-highlighter--html--attribute--color : #c586c0,
    default--code-highlighter--html--attribute-value--color : #a5c261,
    default--code-highlighter--html--tag--color : #e8bf6a,
    default--code-highlighter--html--value--color : #a5c261,
    default--code-highlighter--js--keyword--color : #ff9a46,
    default--code-highlighter--js--number--color : #6897bb,
    default--code-highlighter--js--string--color : #97c07f,
    default--code-highlighter--js--operator--color : #7a7,
    default--code-highlighter--js--variable--color : #c5a3ff,
    default--code-highlighter--js--property--color : #ffc66d,
    default--code-highlighter--php--default--color : #ffc66d,
    default--code-highlighter--php--keyword--color : #ff9a46,
    default--code-highlighter--php--markup--color : #ff9a46,
    default--code-highlighter--php--number--color : #6897bb,
    default--code-highlighter--php--operator--color : #7a7,
    default--code-highlighter--php--string--color : #97c07f,
    default--code-highlighter--php--variable--color : #c5A3ff
  )
)

We can implement it that way :

@include codeHighlighter.init();
@include codeHighlighter.create();
@include codeHighlighter.create(
  (
    themes : $themes,
    suffix : '-2'
  )
);

We can implement it that way :

<code class=code-highlighter><?php
// Showing HTML code
$htmlCode = '<div id=example-div>
  <!-- An HTML comment -->
  <a href="my-link" class=super-link style="color: #ccc;color: #ccc;font-size: 2rem; font-weight: bold">A link</a>
</div>';

echo htmlHighlight(
  $htmlCode,
  [
    'attribute' => 'html--attribute',
    'comment' => 'html--comment',
    'cssAttribute' => 'html--css--attribute',
    'cssValue' => 'html--css--value',
    'tag' => 'html--tag',
    'value' => 'html--value'
  ]
);

// Showing PHP code
$phpCode = '<?php
  // comment single line
  /* comment
    multiple lines */
  echo "Super";
  $test = 2^4;
  
  function test()
  {
    return 3 +4 - $test * 9;
  }
?>';
echo phpHighlight($phpCode, PHP_COLOR_CLASSES);
?></code>