Syntax Highlighting for Print

100%

Syntax Highlighting for Print

✓ Published0🌍 Public

Last edited Aug 1, 2024

Created on Jul 8, 2024

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. The idea is that this can integrate with the VizHub API and generate high resolution images for print based on live code examples stored in VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

highlight.js

This example demonstrates how to display a JavaScript object as formatted, syntax-highlighted code on a web page. It uses the highlight.js library to apply color-coded styling to a JSON string representation of a small dataset, while D3 v4 populates the `<code>` element with the data. The code first defines an array of objects with name and size properties, then uses `d3.select` and `json.stringify` to insert the formatted data into the page. The visible result is a clean, readable code block, though no interactive visualization is present.

EEfratVil

69% match

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page with SVG rendering, featuring three concentric circles drawn at two horizontal positions and a closed blue curve through a diamond-shaped path. It shows how D3.js version 6 can select DOM elements, bind data arrays, and append shapes with dynamic attributes. The circles use transparent fills with black strokes, while the line graph employs d3.line() with curveBasis interpolation. The code mixes vanilla JavaScript with D3 selections, logging "Hello JavaScript!" to the console after rendering.

JJulianWgs

68% match

Loading thumbnail…

Hello D3

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS classes and inline attributes. It shows how to compose geometric primitives within nested groups, applying transforms like `scale()` and `translate()`, and using both CSS rules and presentation attributes for fill, stroke, and stroke-width. The visualization uses HTML5 `<svg>` elements directly in the markup, with JavaScript and CSS linked externally, and does not include any data or interactive behavior.

HHe Jianfeng

68% match

Loading thumbnail…

Javascript inside html

This example demonstrates a mix of inline JavaScript expressions and React-rendered SVG, displaying both text values and a series of circles. The code uses React 16.10 to map over hardcoded arrays, calculating squared values with a custom `sq` function and rendering magenta circles positioned by array elements. A separate `Test` component defines green circles but remains unused. The SVG output appears in a light-green page background, showcasing how JavaScript logic integrates directly into JSX.

Llendup71

68% match

Loading thumbnail…

Circles with D3

This example uses D3 to draw a static set of colorful circles on a white background. The `select` function creates an SVG container, and the code binds an array of data objects to `circle` elements, setting each circle’s position, radius, and fill color via attributes. The circles vary in size and color, with an opacity of 0.708, arranged in a scattered pattern across the canvas. The implementation relies on D3’s data join method to render the shapes.

MM Hema

67% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example demonstrates basic SVG shapes created with D3.js and vanilla JavaScript, rendering two circles and three rectangles of varying heights on a blank canvas. The code uses D3’s `select` to append the shapes to an SVG element, with an array `myData` supplying rectangle heights. It also queries all `rect` elements via `document.querySelectorAll` and attaches a click handler that logs a message to the console. The page is styled with CSS, including a large centered greeting and red circles.

HHOURPRIMERA@GMAIL.COM

67% match

Loading thumbnail…

Fork of Circles with D3

This example shows a playful array of six semi-transparent, brightly colored circles scattered across a pale green background. The visualization uses D3.js (version 7) to bind static data points—each specifying x and y coordinates, a radius, and a fill color—to SVG circle elements. The code leverages the `select` and `join` pattern to create the circles, setting their attributes directly from the bound data. The rendered result is a simple, colorful scatter-plot-like composition, demonstrating basic data binding and SVG manipulation with D3 in a Svelte environment.

Mmuslih_k_diy

66% match

Loading thumbnail…

Circles with D3 and React

This example shows a collection of pastel-colored circles positioned across a white SVG canvas. It demonstrates how to integrate D3's data-join pattern with a React component. The code uses a `useRef` hook to access the SVG element, then calls a D3 `viz` function in a `useEffect` to bind data from a static array via `selection.data()` and `.join('circle')`, setting each circle's `cx`, `cy`, `r`, and `fill` attributes directly. The data is hardcoded in a separate `data.js` module, and rendering is done through React's `createRoot` with plain `React.createElement`.

223100098@lums.edu.pk

66% match