Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Syntax Highlighting for Print

Public visualization

Viewing a saved revision (read-only)

9512ebdd1baf49e7bff43a2a390efaa7

Syntax Highlighting for Print

0 stars0🌍 Public
CCurran Kelleher
Last edited Aug 1, 2024
Created on Jul 8, 2024
Forked from HTML Starter

This example shows how to render JavaScript source code as a styled, print-ready image using syntax highlighting. It uses Prism.js to apply Solarized Light syntax highlighting and line numbers to a code snippet from a D3 visualization. The styling, including a custom font and rounded border, is achieved with CSS. The code itself demonstrates the `renderCircles` function, which uses `selectAll`, `data`, and `join` to bind and update circle elements.

AI-generated description

This is what I'm using as a way of styling code snippets for my upcoming textbook "Constructing Visualizations". Since the syntax highlighting and styling capabilities of LaTeX are limiting, I wanted to use a custom image generation pipeline for source code images designed for print.