Monday, October 12, 20269:40 AMETLondon2:40 PMDubai5:40 PMTokyo10:40 PMSydney12:40 AMLos Angeles6:40 AM57°FNew YorkNewsletter

Code Snippet Block

Code with syntax colors and a copy button, for tech desks.

On this page

Code Snippet Block
A terminal that runs itself
Pick once, remembered everywhere
A whole mini editor
Show what changed

NEWSON · ELEMENT NO. 67

Code that looks like it belongs in a real editor — 20 languages, 14 themes, 6 window frames, diff lines, focus lines, notes, typing and terminal animations, copy, download and synced tabs.

20 languages14 themes6 framesdiff + / −focus linesnotes & pinstypingterminal runsynced tabs

JSX / React

import { useState } from 'react';

export default function LikeButton({ initial = 0 }) {
  const [likes, setLikes] = useState(initial);
  const liked = likes > initial;

  return (
    <button className={liked ? 'btn is-liked' : 'btn'} onClick={() => setLikes(likes + 1)}>
      ♥ {likes} likes
    </button>
  );
}

DEVELOPER DOCS · QUICK START

Terminal frame with the “run” animation: commands type out after the prompt, then their output appears. The copy button copies only the commands — never the prompt or the output.

terminal framerun animationcopies commands onlyreplay

~/projects — zsh

$ npm create vite@latest my-shop -- --template react
Scaffolding project in ./my-shop...
Done. Now run:
$ cd my-shop && npm install
added 214 packages in 6s
$ npm run dev
  VITE v5.2.0  ready in 312 ms
  ➜  Local:   http://localhost:5173/

LIBRARY DOCS · SYNCED TABS

Both blocks share the sync group “pkg”. Choose yarn in one and the other switches too — and the choice is remembered on every page of the site.

pillssync grouprememberedMac window

1. Install the package

npm install @acme/charts

yarn add @acme/charts

pnpm add @acme/charts

2. Start the dev server

npm run dev

yarn dev

pnpm dev

“@acme/charts” is a made-up package name for this example.

API BACKEND · CODE EDITOR

The IDE frame adds an activity bar, a file explorer (click a file) and a status bar that follows the open file.

IDE framefile explorerstatus barTypeScript · SQL · YAML

TypeScript

Explorer

import { Router } from 'express';
import { db } from './db';

type Order = { id: number; total: number; status: 'paid' | 'pending' };

export const orders = Router();

orders.get('/orders/:id', async (req, res) => {
  const order: Order | undefined = await db.find(Number(req.params.id));
  if (!order) return res.status(404).json({ error: 'Not found' });
  res.json(order);
});

-- Monthly revenue for paid orders
SELECT DATE_FORMAT(created_at, '%Y-%m') AS month,
       COUNT(*) AS orders,
       SUM(total) AS revenue
FROM orders
WHERE status = 'paid'
GROUP BY month
ORDER BY month DESC
LIMIT 12;

# deploy.yml — runs on every push to main
name: Deploy
on:
  push:
    branches: [main]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci && npm run build

Pull request #214 — tax by country

Mark added and removed lines by number. Here the old flat tax rate is replaced by a per-country table.

JavaScript

function priceWithTax(price, country) {
   const rate = 0.2;
   const rate = TAX_RATES[country] ?? 0.2;
   return price * rate;
   return Math.round(price * (1 + rate) * 100) / 100;
}

 export const TAX_RATES = { DE: 0.19, FR: 0.2, UK: 0.2 };

CODE REVIEW · DIFF LINES

Added lines turn green with a +, removed lines turn red with a − and are crossed out. Or pick the Diff language and paste a real git diff.

added linesremoved linesGitHub Light

TUTORIAL BLOG · NOTES & FOCUS

Numbered pins sit on the lines you explain — hover a pin or a note to link them. Focus lines stay sharp while the rest dims until the reader hovers the code.

notespins with tooltipsfocus linesWarm paper theme

Python

import requests

def fetch_weather(city: str) -> dict:
    """Return today's forecast for a city."""
    url = f"https://api.example.com/weather?q={city}"
    response = requests.get(url, timeout=5)
    response.raise_for_status()
    data = response.json()
    return {"city": city, "temp": data["temp"], "sky": data["sky"]}

print(fetch_weather("Lisbon"))

1Line 5 Build the request URL with an f-string
2Line 6 Always set a timeout so the page never hangs
3Line 7 Stop early if the API returned an error
4Line 9 Return only the fields the page needs

api.example.com is a placeholder address.

DESIGN SYSTEM · LONG FILE

Set a max height and choose “Show more”: the file fades out and a button reveals the rest. Download saves it with the real file name, and the wrap button handles long lines.

show moredownloadwrap toggleNord

CSS

/* ============ Buttons ============ */
:root {
  --brand: #FFD60A;
  --brand-2: #FFD60A;
  --radius: 14px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border: 0;
  border-radius:0;
  background: linear-gradient(#0a0a0a,#0a0a0a);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow:none;
}

.btn--ghost {
  background: transparent;
  color: var(--nw-accent-text, currentColor);
  box-shadow:none;
}

.btn--small { padding: 8px 14px; font-size: 14px; }

@media (max-width: 600px) {
  .btn { width: 100%; justify-content: center; }
}

WORDPRESS TUTORIAL · SHOW ALL

Stacked mode shows every file at once, each with its own header and copy button — handy when a tutorial needs PHP and CSS together.

stackedper-file copyWindows frameMonokai

Free-shipping notice — code

functions.phpPHP

<?php
// Show a "Free shipping" notice above the cart
add_action( 'woocommerce_before_cart', function () {
    $min   = 50;
    $total = WC()->cart->get_subtotal();
    if ( $total < $min ) {
        wc_print_notice( sprintf( 'Add %s more for free shipping!', wc_price( $min - $total ) ), 'notice' );
    }
} );

style.cssCSS

.woocommerce-info {
  border-radius:0;
  border-left: 4px solid #FFD60A;
  background: #f6f6f5;
}

PRODUCT PAGE · FROSTED GLASS

The frosted-glass theme blurs whatever is behind it — made for landing pages with gradient backgrounds. Lines slide in when it appears.

glasslines slide ingradient border

JSON

{
  "id": 1042,
  "status": "shipped",
  "total": 89.5,
  "items": [
    { "sku": "MUG-01", "qty": 2, "price": 18 },
    { "sku": "TEE-M", "qty": 1, "price": 53.5 }
  ],
  "gift": false,
  "note": null
}

20 LANGUAGES

Choose a language from the dropdown to see its highlighting — keywords, strings, numbers, functions, types, tags, variables and comments.

dropdownJS · TS · JSX · PHP · HTML · CSS · SCSSPython · JSON · SQL · Bash · YAMLGo · Rust · Java · C# · Ruby · Markdown · Diff

Choose a snippet

JavaScript

const total = cart.reduce((sum, item) => sum + item.price * item.qty, 0);
console.log(`Total: $${total.toFixed(2)}`);

interface User { id: number; name: string; admin?: boolean }

export const isAdmin = (u: User): boolean => u.admin === true;

export const Card = ({ title, children }) => (
  <article className="card">
    <h3>{title}</h3>
    {children}
  </article>
);

<?php
add_filter( 'excerpt_length', fn( $length ) => 24 );
echo esc_html( get_the_title() );

<!-- Hero section -->
<section class="hero" id="top">
  <h1>Hello, world</h1>
  <a href="/start" class="btn">Get started</a>
</section>

.card {
  padding: 24px;
  border-radius:0;
  background: #f7f6fd;
}

$brand: #FFD60A;

.nav {
  a { color: $brand; }
  &:hover { opacity: .8; }
}

@dataclass
class Product:
    name: str
    price: float = 0.0

print(Product("Mug", 18).price)

{
  "name": "NewsOn",
  "widgets": 128,
  "free": false
}

SELECT name, price
FROM products
WHERE stock > 0
ORDER BY price DESC;

#!/bin/bash
export ENV=production
npm run build && rsync -avz ./dist/ $SERVER:/var/www

site:
  title: My Shop
  currency: EUR
  features: [cart, wishlist]

package main

import "fmt"

func main() {
	fmt.Println("Hello from Go")
}

fn main() {
    let items = vec![3, 5, 8];
    let sum: i32 = items.iter().sum();
    println!("sum = {}", sum);
}

public class Order {
    private final double total;
    public Order(double total) { this.total = total; }
}

public record CartItem(string Sku, int Qty);

var items = new List<CartItem> { new("MUG-01", 2) };

class Greeter
  def initialize(name)
    @name = name
  end

  def hello = puts "Hi, #{@name}!"
end

# My Shop

- Fast **checkout**
- Works with `WooCommerce`

[Read the docs](https://example.com)

--- a/cart.js
+++ b/cart.js
@@ -1,3 +1,3 @@
-const FREE_SHIPPING = 40;
+const FREE_SHIPPING = 50;

Plain text works too —
no colors, just clean monospace.

14 THEMES

The same snippet in every theme.

darklightgradientglassterminal

Night

// Apply a discount code
const applyCode = (cart, code = 'SAVE10') => {
  const off = code === 'SAVE10' ? 0.1 : 0;
  return { ...cart, total: cart.total * (1 - off) };
};

Dracula

// Apply a discount code
const applyCode = (cart, code = 'SAVE10') => {
  const off = code === 'SAVE10' ? 0.1 : 0;
  return { ...cart, total: cart.total * (1 - off) };
};

One Dark

// Apply a discount code
const applyCode = (cart, code = 'SAVE10') => {
  const off = code === 'SAVE10' ? 0.1 : 0;
  return { ...cart, total: cart.total * (1 - off) };
};

Monokai

// Apply a discount code
const applyCode = (cart, code = 'SAVE10') => {
  const off = code === 'SAVE10' ? 0.1 : 0;
  return { ...cart, total: cart.total * (1 - off) };
};

Nord

// Apply a discount code
const applyCode = (cart, code = 'SAVE10') => {
  const off = code === 'SAVE10' ? 0.1 : 0;
  return { ...cart, total: cart.total * (1 - off) };
};

GitHub Dark

// Apply a discount code
const applyCode = (cart, code = 'SAVE10') => {
  const off = code === 'SAVE10' ? 0.1 : 0;
  return { ...cart, total: cart.total * (1 - off) };
};

Synthwave

// Apply a discount code
const applyCode = (cart, code = 'SAVE10') => {
  const off = code === 'SAVE10' ? 0.1 : 0;
  return { ...cart, total: cart.total * (1 - off) };
};

Aurora

// Apply a discount code
const applyCode = (cart, code = 'SAVE10') => {
  const off = code === 'SAVE10' ? 0.1 : 0;
  return { ...cart, total: cart.total * (1 - off) };
};

Terminal green

// Apply a discount code
const applyCode = (cart, code = 'SAVE10') => {
  const off = code === 'SAVE10' ? 0.1 : 0;
  return { ...cart, total: cart.total * (1 - off) };
};

Frosted glass

// Apply a discount code
const applyCode = (cart, code = 'SAVE10') => {
  const off = code === 'SAVE10' ? 0.1 : 0;
  return { ...cart, total: cart.total * (1 - off) };
};

Light

// Apply a discount code
const applyCode = (cart, code = 'SAVE10') => {
  const off = code === 'SAVE10' ? 0.1 : 0;
  return { ...cart, total: cart.total * (1 - off) };
};

GitHub Light

// Apply a discount code
const applyCode = (cart, code = 'SAVE10') => {
  const off = code === 'SAVE10' ? 0.1 : 0;
  return { ...cart, total: cart.total * (1 - off) };
};

Solarized

// Apply a discount code
const applyCode = (cart, code = 'SAVE10') => {
  const off = code === 'SAVE10' ? 0.1 : 0;
  return { ...cart, total: cart.total * (1 - off) };
};

Warm paper

// Apply a discount code
const applyCode = (cart, code = 'SAVE10') => {
  const off = code === 'SAVE10' ? 0.1 : 0;
  return { ...cart, total: cart.total * (1 - off) };
};

Package names, API addresses and the pull request on this page are made-up examples.

106 elements for news, Code Snippet Block included.

Explore All Demos Browse All Elements