Skip to main content
Phiki provides the Phiki\Transformers\AddClassesTransformer transformer out of the box, which allows you to automatically add scope-based CSS classes to HTML elements.

​
Usage

To use the AddClassesTransformer, apply it to your pending HTML content: 
use Phiki\Phiki;
use Phiki\Transformers\AddClassesTransformer;

$html = (new Phiki)
    ->codeToHtml("<?php ...", Grammar::Php, Theme::GithubLight)
    ->transformer(new AddClassesTransformer)
    ->toString();
The generated HTML will include CSS classes based on the scope names for each token, for example phiki-source.php. You can then use these classes in your CSS to style specific elements: 
.token[class^="phiki-keyword"] {
    color: blue !important;
}

​
Disabling style attributes

If you want to disable the inline style attributes added by Phiki, you can pass the styles: false argument to the constructor. 
$html = (new Phiki)
    ->codeToHtml("<?php ...", Grammar::Php, Theme::GithubLight)
    ->transformer(new AddClassesTransformer(styles: false))
    ->toString();
This will result in HTML elements for tokens that only have the class attribute, allowing you to fully control the styling through CSS.