Creating a Highlighted Code Snippet Image for Documentation

Problem/Feature Description

A developer at a startup is writing technical documentation for an open-source library. They want to include a polished, syntax-highlighted image of a key code example in the README and in a blog post announcing the release. The image needs to look professional — not just a raw screenshot — and should be generated in a reproducible way so it can be regenerated whenever the code example changes.

The developer wants to produce a PNG image of the provided TypeScript code sample. They need the process to be repeatable so a teammate can regenerate the image with the same visual style later. After generating the image, they want confirmation that the file was actually created and is not empty.

Write a shell script named render.sh that carries out the entire rendering process. The script should produce the output image and include any commands used to verify the output. Also save a plain-text file render-log.txt recording the exact commands run and the output file path(s) created.

Input Files

The following file is provided as input. Extract it before beginning.

=============== FILE: inputs/example.ts =============== import { EventEmitter } from 'events';

export class TaskQueue extends EventEmitter { private queue: Array<() => Promise<void>> = []; private running = false;

enqueue(task: () => Promise<void>): void { this.queue.push(task); if (!this.running) this.drain(); }

private async drain(): Promise<void> { this.running = true; while (this.queue.length > 0) { const task = this.queue.shift()!; try { await task(); this.emit('task:complete'); } catch (err) { this.emit('task:error', err); } } this.running = false; this.emit('drain'); } }