let CodeBlock = {
  OPACITY: 1.0,
  WORD_WRAP: true,
  LINE_NUMBERS: true,
  PADDING: '5px',
  ROTATION: '10deg'
}

Presenting code is now more powerful than ever with support for line numbers, line highlights and word wrap.

import React, { useState } from 'react';
 
function Example() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Line numbers are on by default and can be disabled in the block settings.

import React, { useState } from 'react';
 
function Example() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Line highlights are used to emphasize specific lines.

Highlights steps let you walk through multiple different highlights.

We took great care to make the UI intuitive and fast to work with.

Use word wrap to prevent overflow.

Plus: We've switched to Monokai as our default highlight theme.

import React, { useState } from 'react';
 
function Example() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

import React, { useState } from 'react';
 
function Example() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Previous default (Zenburn)

New default

SIGN UP FOR FREE

SIGN IN

Copy of Code Block 2.0: Line Numbers & Highlights

By Kingsley

Copy of Code Block 2.0: Line Numbers & Highlights

The Code content block has been updated to add support for line numbers, line highlights and word wrap. All in all a much more powerful way to share code with your audience!

Kingsley

I'm a freelance web developer, looking to make lives and processes better with CODE.

SIGN UP FOR FREE

SIGN IN

Copy of Code Block 2.0: Line Numbers & Highlights

More from Kingsley