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.

Highlights are automatically scrolled into view.

<section data-background-color="#ff0000;">
  <h2>Tabular Tables</h2>
  <table>
    <thead>
      <tr>
        <th>Item</th>
        <th>Value</th>
        <th>Quantity</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Apples</td>
        <td>$1</td>
        <td>7</td>
      </tr>
      <tr>
        <td>Lemonade</td>
        <td>$2</td>
        <td>18</td>
      </tr>
      <tr>
        <td>Hand Sanitizer</td>
        <td>$99</td>
        <td>2</td>
      </tr>
    </tbody>
  </table>
</section>

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

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!

Harsh Jobanputra

harshjobanputra.ml

SIGN UP FOR FREE

SIGN IN

Copy of Code Block 2.0: Line Numbers & Highlights

More from Harsh Jobanputra