Code Style Sheets: CSS for Code

2025-02-13

AI Summary

Current code editors suffer from limited rendering capabilities: they rely on monolithic fonts and static syntax highlighting, lacking semantic-aware, fine-grained text decoration. To address this, we propose *Code Stylesheets*—the first adaptation of the CSS paradigm to programming languages—enabling semantic-driven code rendering grounded in abstract syntax trees (ASTs), type information, and runtime values. Our system supports declarative style rules defined over algebraic data types, yielding syntax-structure-sensitive and context-adaptive dynamic code visualization. We implement a prototype for a Haskell subset, integrating AST traversal, semantic style matching, and type-directed decoration synthesis. Evaluation demonstrates effectiveness across diverse code presentation scenarios and programming pedagogy visualizations, significantly improving code readability and semantic communication efficiency.

Technology Category

• Natural Language Processing: Code Generation / Program Synthesis from Natural Language
• Computer Vision: Visual Reasoning & Symbolic Representations
• Cognitive Modeling & Cognitive Systems: Symbolic Representations

Application Category

• Graph Algorithms and Modeling for the Web: Efficient manipulation of static and dynamic Web-related graphs
• Semantics and Knowledge: Data modeling to support human-machine intelligence, including LLMs agents, intelligent system behavior, explanations, and user-friendly interactions
• Economics, Online Markets and Human Computation: Cost models of using LLMs in production systems

Abstract

Program text is rendered using impoverished typographic styles. Beyond choice of fonts and syntax-highlighting colors, code editors and related tools utilize very few text decorations. These limited styles are, furthermore, applied in monolithic fashion, regardless of the programs and tasks at hand. We present the notion of code style sheets for styling the textual representation of programs. Motivated by analogy to cascading style sheets (CSS) for styling HTML documents, code style sheets provide mechanisms for defining rules to select and style abstract syntax trees (ASTs). Technically, code style sheets generalize notions from CSS over untyped HTML trees to a programming-language setting with algebraic data types (e.g. ASTs). Practically, code style sheets allow ASTs to be styled granularly, based on semantic information -- such as the structure of abstract syntax, static type information, and corresponding run-time values -- as well as design choices on the part of authors and readers of a program. In this paper, we design and implement a code style sheets system for a subset of Haskell -- the rich syntactic and semantic structure of Haskell provide a fertile first setting in which to explore the notion of code style sheets. We illustrate several use cases involving code presentation and visualization tasks.

Problem

• Enhancing code text typography
• Applying semantic-based styling to ASTs
• Developing CSS-like system for Haskell code

Innovation

• Code style sheets
• Styling abstract syntax trees
• Granular styling based semantics