Code blocks

import React from 'react'
import Highlight, { defaultProps } from 'prism-react-renderer'
export default ({ children, className }) => {
  const language = className.replace(/language-/, '')
  return (
    <Highlight {...defaultProps} code={children.trim()} language={language}>
      {({ className, style, tokens, getLineProps, getTokenProps }) => (
        <code className={`${className} w-full p-4 rounded`} style={style}>
          {tokens.map((line, i) => (
            <div key={i} {...getLineProps({ line, key: i })}>
              {line.map((token, key) => (
                <span key={key} {...getTokenProps({ token, key })} />
              ))}
            </div>
          ))}
        </code>
      )}
    </Highlight>
  )
}

Code in a grid

// Java
public class HelloWorld {
  public static void main(String[] args) {
    System.out.println("Hello world!");
  }
}

// C++
int main(void) {
  std::cout << "Hello world!" << std::endl;
  return 0;
}

# Python
print('Hello world!')

// JavaScript
console.log('Hello world!')

// PHP
<?php
echo 'Hello world!';
?>

// C
int main(void) {
  printf("Hello world!");
  return 0;
}