Present code with step-by-step highlights

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 numbersare 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 highlightsare 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 to give it a try. If you're not already a member, sign up for free.

SIGN IN

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!

• 4,055