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 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

By Slides News

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!

  • 20,464
Loading comments...

More from Slides News