thumb

By default Jekyll version 3, ships with Rouge syntax highlighter. It has built in support for syntax highlighting of over 100 languages. I’m using Rouge with fenced code blocks in markdown. But I noticed that in the case of PHP code, the highlighting does not work at all.

We can create fenced code blocks by placing triple backticks ``` before and after the code block. To enable syntax highlighting in our fenced code block we need to add a language identifier. For example, to syntax highlight Ruby code we use the following:

```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```

And output will be the following:

require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html

You can see that Ruby is rendered fine. Also with any other languages, except for PHP. Example:

// Define global constants
$plugin_data = get_file_data( __FILE__, array( 'name'=>'Plugin Name', 'version'=>'Version', 'text'=>'Text Domain' ) );
function allmetatags_constants( $constant_name, $value ) {
    $constant_name_prefix = 'ALLMT_';
    $constant_name = $constant_name_prefix . $constant_name;
    if ( !defined( $constant_name ) )
        define( $constant_name, $value );
}
allmetatags_constants( 'DIR', dirname( plugin_basename( __FILE__ ) ) );
allmetatags_constants( 'NAME', $plugin_data['name'] );

After some experiments, I found out that the PHP syntax highlighting only works when including the HTML tag <?php, even though we indicated that the code block needs to be parsed as PHP. Example;

```php
<?php

There our PHP code.
```

And output will be the following:

<?php

// Define global constants
$plugin_data = get_file_data( __FILE__, array( 'name'=>'Plugin Name', 'version'=>'Version', 'text'=>'Text Domain' ) );
function allmetatags_constants( $constant_name, $value ) {
    $constant_name_prefix = 'ALLMT_';
    $constant_name = $constant_name_prefix . $constant_name;
    if ( !defined( $constant_name ) )
        define( $constant_name, $value );
}
allmetatags_constants( 'DIR', dirname( plugin_basename( __FILE__ ) ) );
allmetatags_constants( 'NAME', $plugin_data['name'] );

This method works but I do not like it. Another way to do the same is to add the option start_inline=1 to the language identifier, like this:

```php?start_inline=1
There our PHP code.
```

And output will be the following:

// Define global constants
$plugin_data = get_file_data( __FILE__, array( 'name'=>'Plugin Name', 'version'=>'Version', 'text'=>'Text Domain' ) );
function allmetatags_constants( $constant_name, $value ) {
    $constant_name_prefix = 'ALLMT_';
    $constant_name = $constant_name_prefix . $constant_name;
    if ( !defined( $constant_name ) )
        define( $constant_name, $value );
}
allmetatags_constants( 'DIR', dirname( plugin_basename( __FILE__ ) ) );
allmetatags_constants( 'NAME', $plugin_data['name'] );

Done!

Unfortunately, I have not yet found a way to do this automatically, so we have to include the language option start_inline=1 in every PHP code blocks.

If this article helped you solve the problem with highlighting of the PHP code examples on your Jekyll website then please leave a comment.

Thanks for reading!



Arthur Gareginyan

Arthur Gareginyan

Arthur is a designer and full stack software engineer. He is the founder of the studio SpaceX-Chimp and the blog MyCyberUniverse.com. His personal website can be found at arthurgareginyan.com.

Follow Arthur: