Making WordPress code blocks display the right size

I started using WordPress’s block code with syntax highlighting. Unfortunately the text was being displayed too large.

What I wanted

x509_attribute_type = {
"x509_attr_unknown" : 0,
"x509_attr_name" : 1,
"x509_attr_surname" : 2,
"x509_attr_givenName" : 3,
"x509_attr_initials" : 4,
...
}

What I got

x509_attribute_type = {
"x509_attr_unknown" : 0,
"x509_attr_name" : 1,
"x509_attr_surname" : 2,
"x509_attr_givenName" : 3,
"x509_attr_initials" : 4,
...
}

There were “helpful” suggestions such as changing the CSS, but these did not work for me.
What did work (but involved several clicks) is

  • create a pre-formatted block
  • paste the data
  • in the FONT SIZE box on the right hand side click S
  • go back to your block, and make it into a code block
  • from the pull down list of languages, select the language you want
  • It should not display the code in the right sized font

What the above actions have done is to put <pre class=”wp-block-code has-small-font-size”></pre> around the code snippet, which is another solution.

2 thoughts on “Making WordPress code blocks display the right size

Leave a reply to Colin Paice Cancel reply