Categories

PDF Code Snippet Viewer

Render code snippets with mono font, background boxes, and clickable Git repository links

Create a developer-friendly PDF for code review and sharing.

Features:

  • Monospace code blocks with background cards
  • File and line metadata header per snippet
  • Clickable View on Git links to repository source

Example Results

2 examples

Light Theme Multi-Snippet View

Renders two TypeScript snippets with clickable GitHub links

code-snippet-viewer-example1.pdf View File
View input parameters
{ "snippetsJson": "[{\"filePath\":\"src/index.ts\",\"language\":\"ts\",\"startLine\":1,\"endLine\":8,\"code\":\"import { Elysia } from 'elysia'\\n\\nconst app = new Elysia()\\n\\napp.get('/', () => 'ok')\\n\\nexport default app\"},{\"filePath\":\"src/tools/2026-02-13/pdf-link-annotator.ts\",\"language\":\"ts\",\"startLine\":30,\"endLine\":52,\"code\":\"function addExternalLink(pdf, page, x, y, w, h, url) {\\n const annot = pdf.context.obj({\\n Type: 'Annot',\\n Subtype: 'Link',\\n })\\n // ...\\n}\"}]", "repoBaseUrl": "https://github.com/example/repo", "branch": "main", "pageSize": "A4", "landscape": false, "theme": "light" }

Dark Theme Landscape Review

Single snippet in dark theme using Letter landscape layout

code-snippet-viewer-example2.pdf View File
View input parameters
{ "snippetsJson": "[{\"filePath\":\"src/tool-manager.ts\",\"language\":\"ts\",\"startLine\":55,\"endLine\":92,\"code\":\"export class ToolManager {\\n private tools = new Map()\\n\\n registerTool(tool) {\\n this.tools.set(tool.id, tool)\\n }\\n\\n getTool(id) {\\n return this.tools.get(id)\\n }\\n}\"}]", "repoBaseUrl": "https://gitlab.com/example/platform", "branch": "develop", "pageSize": "Letter", "landscape": true, "theme": "dark" }

Key Facts

Category
Document Tools
Input Types
textarea, text, select, checkbox
Output Type
file
Sample Coverage
4
API Ready
Yes

Overview

The PDF Code Snippet Viewer allows developers to transform raw code blocks into professional, readable PDF documents. It features syntax-friendly monospace formatting, structured background cards, and integrated, clickable links to your Git repository for seamless code review and documentation.

When to Use

  • Preparing code snippets for formal peer reviews or technical documentation.
  • Sharing specific logic blocks with stakeholders who prefer offline PDF reading.
  • Archiving critical code segments with direct navigation links to the source repository.

How It Works

  • Input your code snippets in JSON format, including file paths and line numbers.
  • Provide your repository base URL and branch name to enable clickable source links.
  • Select your preferred page size, orientation, and visual theme (light or dark).
  • Generate and download the formatted PDF document.

Use Cases

Creating professional code review handouts for team meetings.
Generating technical appendices for software architecture reports.
Distributing offline reference guides for specific library implementations.

Examples

1. Light Theme Multi-Snippet Review

Software Engineer
Background
A developer needs to present two distinct TypeScript modules to a lead architect for a code review session.
Problem
Standard screenshots are hard to read and lack direct links to the source repository.
How to Use
Paste the snippet JSON, set the repository URL, and select the 'Light' theme.
Example Config
{"theme": "light", "pageSize": "A4", "landscape": false}
Outcome
A clean, A4-sized PDF with two code cards, each featuring clickable headers that link directly to the GitHub repository.

2. Dark Theme Landscape Documentation

Technical Writer
Background
A technical writer is documenting a complex class structure for an internal platform library.
Problem
The code is wide and requires a landscape layout to prevent line wrapping, with a dark aesthetic to match the company's style guide.
How to Use
Configure the tool with the 'Dark' theme and enable the 'Landscape' checkbox.
Example Config
{"theme": "dark", "pageSize": "Letter", "landscape": true}
Outcome
A landscape-oriented PDF on Letter paper with a dark background, providing optimal readability for wide code blocks.

Try with Samples

json, pdf

Related Hubs

FAQ

Can I include multiple code snippets in one PDF?

Yes, the tool accepts a JSON array, allowing you to include multiple snippets in a single generated document.

Are the Git links clickable in the final PDF?

Yes, if you provide a valid repository base URL and branch, the tool generates clickable links that direct readers to the specific file and line range.

Does the tool support different page orientations?

Yes, you can toggle the 'Landscape' option to adjust the page layout to your preference.

Can I customize the appearance of the code blocks?

You can choose between light and dark themes to ensure the code is presented in a style that matches your documentation requirements.

What file format does the tool output?

The tool outputs a standard, high-quality PDF file ready for sharing or printing.

API Documentation

Request Endpoint

POST /en/api/tools/pdf-code-snippet-viewer

Request Parameters

Parameter Name Type Required Description
snippetsJson textarea Yes -
repoBaseUrl text No -
branch text No -
pageSize select No -
landscape checkbox No -
theme select No -

Response Format

{
  "filePath": "/public/processing/randomid.ext",
  "fileName": "output.ext",
  "contentType": "application/octet-stream",
  "size": 1024,
  "metadata": {
    "key": "value"
  },
  "error": "Error message (optional)",
  "message": "Notification message (optional)"
}
File: File

AI MCP Documentation

Add this tool to your MCP server configuration:

{
  "mcpServers": {
    "elysiatools-pdf-code-snippet-viewer": {
      "name": "pdf-code-snippet-viewer",
      "description": "Render code snippets with mono font, background boxes, and clickable Git repository links",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=pdf-code-snippet-viewer",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

You can chain multiple tools, e.g.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, max 20 tools.

If you encounter any issues, please contact us at [email protected]