How To Style The WordPress <>Code Block

I've personally struggled to find this bit of code online, so I've documented the fix here.

The default styling for the <>code block is not ideal; by default, WordPress does not style your code block text, so the code block matches the rest of your webpage. See the examples below.

I don't know about you, but I want my code block to have a copy-and-paste button and a black background. This is better for users as well as visually. For speed reasons, I'm also averse to having a bunch of plugins that only do one single thing. So I solve this issue by styling the code block with plugins that I'm already using.

Here is how you can style the default WordPress code block to have a black background and white text. Which also has a simple copy-paste button at the top, all while using the free Code Snippets plugin:

1. Install and activate the Code Snippets plugin.
2. Go to Snippets > Add New.
3. Give your snippet a title and paste the following code:

// Code block styling
function custom_code_block_style() {
   echo '<style>
      .wp-block-code {
         background-color: #000;
         color: #fff;
         font-family: "Courier New", Courier, monospace;
         padding: 10px;
      }
   </style>';
}
add_action('wp_head', 'custom_code_block_style');

// Add copy button to code block
function add_copy_button_to_code_block( $code_block_html, $block ) {
   if ( 'core/code' === $block['blockName'] ) {
      $copy_button = '<button class="copy-code-button">Copy</button>';
      $code_block_html = $copy_button . $code_block_html;
   }
   return $code_block_html;
}
add_filter( 'render_block', 'add_copy_button_to_code_block', 10, 2 );

// Copy button functionality
function add_copy_button_functionality() {
   echo '<script>
      document.querySelectorAll(".copy-code-button").forEach(function(button) {
         button.addEventListener("click", function() {
            const codeBlock = button.nextElementSibling;
            const range = document.createRange();
            range.selectNode(codeBlock);
            window.getSelection().removeAllRanges();
            window.getSelection().addRange(range);
            document.execCommand("copy");
            window.getSelection().removeAllRanges();
         });
      });
   </script>';
}
add_action('wp_footer', 'add_copy_button_functionality');

4. Save the snippet and activate it.
5. In the WordPress block editor, add the Code Block element to your page or post.
6. Enter your code in the Code Block element and publish your page or post.

The code block in the WordPress block editor should now have a black background, text that looks like coding, and a simple copy-paste button that works at the top on the frontend.