---
title: "<! Hello world />"
date: 2024-12-20T13:20:15Z
modified: 2024-12-26T18:01:13Z
permalink: "https://dgw.ltd/2024/12/20/hello-world-2/"
type: post
status: publish
excerpt: ""
wpid: 450
categories:
  - Code
featured_image: "https://dgw.ltd/wp-content/uploads/2024/12/carbon.png"
---

I was going to do my first proper post on here, detailing how I got WordPress’ theme.json into my CSS pipeline. I started said post, added a couple of code blocks and well….meh. It just wasn’t very inspiring, monospaced white type on a back background.

I had a little look around for some syntax highlighting options. Obviously there are loads and this would be fine. But but but. The point about this blog was to be as WordPress-y as possible. WordPress despite its recent drama is getting really good, I mean it’s always been pretty awesome, but after a couple of wonky years, some brilliant dev focused stuff is happening. So I got to thinking, I wonder if I can do something with [Block Variations](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-variations/) are something similar.

First obviously we need some syntax highlighting, went with the most obvious one [Prism.js](https://prismjs.com). And via npm I just installed the most basic setup I could.


```js
import 'prismjs';
import 'prismjs/components/prism-markup-templating';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-php';
import 'prismjs/components/prism-javascript';
```

And I grabbed some CSS via the [Prism repo](https://github.com/PrismJS/prism-themes)

From there I created some [Block Style Variations](https://developer.wordpress.org/themes/features/block-style-variations/) (seriously someone needs to start differentiating a little more over at WP, Block Styles, Block Variations, Block Patterns, Block Themes, Block Blocks).


```js
import { registerBlockVariation, registerBlockStyle } from '@wordpress/blocks';

//Register a block style
const styles = [
    {
        name: 'default',
        label: 'Default',
        isDefault: true,
    },
    {
        name: 'html',
        label: 'HTML',
    },
    {
        name: 'css',
        label: 'CSS',
    }, 
    {
		name: 'js',
		label: 'JS'
	}, 
	{
		name: 'php',
		label: 'PHP'
	}
];

registerBlockStyle("core/code", [...styles]);
```

So now we can tell WordPress what type of Code block this is!

![Block Style Variations, HTML, CSS, JS, PHP](https://dgw.ltd/wp-content/uploads/2024/12/Screenshot-2024-12-19-at-16.50.13.png)

This then gives us this markup on the frontend.


```html
<pre class="wp-block-code is-style-html">
    
        <p>Hello world!</p>        
    
</pre>
```

Now we can use the rather excellent but mystifying WP\_HTML\_Tag\_Processor to loop through the blocks, find any instance of the code block and inject a specific class based on our Block Style. This was partly inspired by [Mark Wilkinson](https://bsky.app/profile/markwilkinson.dev) talking about it. I’ve found it to be a nice way to subtly modify core blocks without the need to build an entirely new one, whether it’s to add a data attribute or, as in this case, a CSS class.


```php
function dgwltd_utility_edit_code_markup( $block_content, $block, $instance ) {

    // create a new instance of the WP_HTML_Tag_Processor class.
    $tags = new WP_HTML_Tag_Processor( $block_content );

    $styles = ['html', 'css', 'js', 'php'];

    // loop through each code block.
    while ( $tags->next_tag( [ 'class_name' => 'wp-block-code' ] ) ) {

        //Find the CSS class
        $class = $tags->get_attribute('class');
        //This returns wp-block-code is-style-html I just want to get the is-style- part
        $style = str_replace('wp-block-code is-style-', '', $class);
        
        // Check if the current tag has children and navigate to the child  tag
        if ( $tags->next_tag( [ 'tag_name' => 'code' ], true ) ) {
            // Add the class to the child  tag
            $tags->set_attribute( 'class', 'language-' . $style );
        }
            

    }

    // save the manipulated HTML back to the block content.
    $block_content = $tags->get_updated_html();

    // return the block content.
    return $block_content;

       
}

add_filter( 'render_block_core/code', 'dgwltd_utility_edit_code_markup', 10, 3 );
```

Voilà!