Code by Tom

I’ve used a number of WordPress plugins in my time to help add syntax highlighting to my posts (on this blog, and older ones).

They’ve always been clunky, unintuitive and buggy. As a result I always fell back to the native Gutenberg Code block.

That is until I found Code Block Pro. You can find it on the WordPress plugin directory here.

For comparison here is some example usages of it using a contrived piece of code I asked ChatGPT to produce for me.

Gutenberg Code Block

// Function to calculate the factorial of a number
function factorial(n) {
  if (n === 0 || n === 1) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}

// Example: Calculate the factorial of 5
const result = factorial(5);

// Display the result
console.log(`Factorial of 5 is: ${result}`);

Code Block Pro

// Function to calculate the factorial of a number
function factorial(n) {
  if (n === 0 || n === 1) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}

// Example: Calculate the factorial of 5
const result = factorial(5);

// Display the result
console.log(`Factorial of 5 is: ${result}`);

Line highlighting

// Function to calculate the factorial of a number
function factorial(n) {
  if (n === 0 || n === 1) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}

// Example: Calculate the factorial of 5
const result = factorial(5);

// Display the result
console.log(`Factorial of 5 is: ${result}`);

Line blurring

// Function to calculate the factorial of a number
function factorial(n) {
  if (n === 0 || n === 1) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}

// Example: Calculate the factorial of 5
const result = factorial(5);

// Display the result
console.log(`Factorial of 5 is: ${result}`);

Multiple themes

// Function to calculate the factorial of a number
function factorial(n) {
  if (n === 0 || n === 1) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}

// Example: Calculate the factorial of 5
const result = factorial(5);

// Display the result
console.log(`Factorial of 5 is: ${result}`);

// Function to calculate the factorial of a number
function factorial(n) {
  if (n === 0 || n === 1) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}

// Example: Calculate the factorial of 5
const result = factorial(5);

// Display the result
console.log(`Factorial of 5 is: ${result}`);

Other features

Other settings include

• Snippet copy
• Different headers/footers
• Multiple language highlighting
• Spacing/tab settings
• And more