Rich code blocks

Highlight, diff, focus, titles, copy, and synced package-manager tabs.

~ 1 min read

Code blocks

Tangly’s code blocks ship with line highlighting, diff markers, focus dimming, filename tabs, and a copy button on every block. All notations are plain comments inside the fenced code so the source stays readable.

Line highlight

const greeting = "hello";
const name = "Cipher";
const word = greeting + " " + name;
console.log(word);
console.log(word.toUpperCase());

Diff

const config = {
  port: 3000,           
  port: 4000,           
  host: "localhost",
};

Focus

function encrypt(input, key) {
  const buffer = toBytes(input);
  const cipher = createCipher(key); 
  return cipher.update(buffer);
}

Filename + copy

src/cipher.ts

import { createCipher } from "node:crypto";

export function encrypt(plaintext: string, key: Buffer) {
  return createCipher("aes-256-gcm", key).update(plaintext);
}

Mintlify-style bare path also works:

src/install.sh

bash

bun add cipher

Annotations

const config = {
  retries: 3,
  timeout: 5000,
  fetch: customFetch,
};

How many times to retry on failure.
Request timeout in milliseconds.
Custom fetch implementation — useful in tests.

A fence without annotate keeps (1) as literal text:

const arr = [1, 2, 3];
const second = arr[(2 - 1)]; // (1) is just text here

PackageManager — synced across the page

Pick a tab in either group below; the other syncs automatically. Selection persists across pages via localStorage.

npm install cipher

yarn add cipher

pnpm add cipher

bun add cipher

Run a script:

npm run dev

yarn run dev

pnpm run dev

bun run dev

Last updated 3 d ago Edit this page