Home

Code

Usage

Start with these tokens when customizing code:

  • --code-font-family, --code-font-size-inline, and --code-font-size-block for typography

  • --code-background-inline/--code-background-block and --code-border-color for surfaces

  • --code-padding-inline and --code-padding-block for density

  • --code-line-numbers and --code-gutter-* for editor chrome

  • --code-keyword, --code-string, and --code-comment for syntax colors

  • --code-selection-background for editor focus states

Inline code uses the -inline tokens and code blocks use the -block tokens. The same --code-* overrides are applied by the editor renderer when it loads, so one set of tokens keeps inline, static, and executable code consistent.

Tokens

Layout Tokens

Layout controls for breakout widths, spacing, and print behavior.

TokenDescriptionDefault Value
--code-block-min-widthMinimum width for static code blockscalc(var(--work-content-max-width) + 20ch)
--code-block-max-widthMaximum width for static code blockscalc(var(--work-content-max-width) + 20ch)
--code-block-min-width-mobileMinimum width on mobile (640px)100%
--code-block-max-width-mobileMaximum width on mobile (640px)100%
--code-block-max-width-printMaximum width for print100%
--code-chunk-max-widthMaximum width for code chunksvar(--content-breakout-width)
--code-chunk-max-width-mobileMaximum width for chunks on mobilevar(--content-breakout-width-mobile)
--code-chunk-max-width-printMaximum width for chunks in print100%
--code-spacingVertical spacing above code blocks/chunksvar(--content-spacing)

Font and Typography Tokens

Base tokens with semantic overrides for inline vs block contexts.

TokenDescriptionDefault Value
--code-colorDefault code colorvar(--text-color-primary)
--code-color-inlineInline code colorinherit
--code-font-familyFont family for all code elementsvar(--font-family-mono)
--code-font-size-inlineFont size for inline <code> elementsinherit
--code-font-size-blockFont size for block <pre><code> elementsvar(--font-size-sm)
--code-line-heightLine height for code blocks150%

Visual Style Tokens

Base tokens with semantic overrides for different contexts.

TokenDescriptionDefault Value
--code-backgroundBase background color for codecolor-mix(in srgb, black 5%, var(--surface-background))
--code-background-inlineBackground color for inline codevar(--code-background)
--code-background-blockBackground color for code blocksvar(--code-background)
--code-border-colorBorder color for code elementsvar(--border-color-muted)
--code-border-widthBorder width for code elementsvar(--border-width-default)
--code-border-radiusCorner radius for code containersvar(--radius-sm)

Spacing Tokens

Padding tokens for different code contexts.

TokenDescriptionDefault Value
--code-padding-inlineHorizontal padding for inline <code> elements0.05em 0.25em
--code-padding-blockVertical padding for block <pre><code> elementsvar(--space-4)

Editor Tokens

Core editor appearance and behavior:

TokenDescriptionDefault Value
--code-caret-colorCursor/caret colorvar(--text-color-primary)
--code-selection-backgroundText selection backgroundvar(--color-blue-200)
--code-selection-match-backgroundSearch match highlightvar(--color-blue-100)
--code-focused-backgroundEditor background when focusedvar(--code-background)
--code-cursor-line-backgroundActive line backgroundrgba(0, 0, 0, 0.02)
--code-line-numbersShow/hide line numbershidden
--code-fold-gutterShow/hide code folding gutterhidden
--code-gutter-backgroundGutter background colorvar(--code-background)
--code-gutter-colorLine number colorvar(--text-color-muted)
--code-gutter-border-colorGutter border colorvar(--border-color-muted)
--code-gutter-border-widthGutter border widthvar(--border-width-default)
--code-gutter-paddingGutter paddingvar(--space-0)
--code-gutter-min-widthMinimum gutter width2.5rem
--code-gutter-active-line-backgroundActive line gutter backgroundvar(--code-cursor-line-background)
--code-gutter-active-line-colorActive line number colorvar(--text-color-secondary)
Note

The --code-gutter-* tokens have no effect if both --code-line-numbers and --code-fold-gutter are none or hidden.

Syntax Highlighting Theme Selection Tokens

Configure syntax highlighting theme presets or use custom CSS variables:

TokenDescriptionDefault Value
--code-themeTheme name for light mode or custombasic-light
--code-theme-darkTheme name for dark mode or custombasic-dark

Set --code-theme to use a named theme preset or custom to apply the syntax highlighting CSS variables defined below.

Available Light Themes:

  • basic-light

  • github-light

  • gruvbox-light

  • material-light

  • solarized-light

  • tokyo-night-day

  • vscode-light

Available Dark Themes:

  • abcdef

  • abyss

  • android-studio

  • andromeda

  • basic-dark

  • forest

  • github-dark

  • gruvbox-dark

  • material-dark

  • monokai

  • nord

  • palenight

  • solarized-dark

  • tokyo-night-storm

  • volcano

  • vscode-dark

Note

To add more themes, see: README.md

Note

Most color-related tokens have -dark variants (e.g., --code-background-dark, --code-comment-dark) that are applied automatically in dark mode.

Syntax Highlighting Tokens

Colors for different code elements when using --code-theme: custom:

TokenDescriptionDefault Value
--code-commentCommentsvar(--color-green-600)
--code-comment-blockBlock commentsvar(--code-comment)
--code-comment-lineLine commentsvar(--code-comment)
--code-comment-docDocumentation commentsvar(--color-green-700)
--code-keywordKeywordsvar(--color-blue-700)
--code-keyword-controlControl flow keywordsvar(--code-keyword)
--code-keyword-operatorOperator keywordsvar(--color-gray-600)
--code-keyword-modifierModifier keywordsvar(--code-keyword)
--code-keyword-definitionDefinition keywordsvar(--code-keyword)
--code-stringStringsvar(--color-red-600)
--code-string-specialSpecial stringsvar(--color-red-700)
--code-string-regexRegular expressionsvar(--color-red-600)
--code-string-escapeString escape sequencesvar(--color-red-600)
--code-numberNumbersvar(--color-green-700)
--code-number-integerInteger numbersvar(--code-number)
--code-number-floatFloating point numbersvar(--code-number)
--code-booleanBoolean valuesvar(--color-blue-700)
--code-constantConstantsvar(--color-blue-700)
--code-constant-builtinBuilt-in constantsvar(--code-constant)
--code-variableVariablesvar(--color-blue-600)
--code-variable-builtinBuilt-in variablesvar(--color-blue-600)
--code-variable-specialSpecial variablesvar(--color-red-700)
--code-functionFunctionsvar(--color-amber-700)
--code-function-builtinBuilt-in functionsvar(--color-amber-700)
--code-function-methodMethodsvar(--code-function)
--code-classClassesvar(--color-amber-700)
--code-class-builtinBuilt-in classesvar(--code-class)
--code-typeTypesvar(--color-blue-700)
--code-type-builtinBuilt-in typesvar(--code-type)
--code-namespaceNamespacesvar(--color-gray-600)
--code-propertyPropertiesvar(--color-blue-600)
--code-attributeAttributesvar(--color-amber-600)
--code-tagTags (HTML/XML)var(--color-green-600)
--code-tag-angleTag angle bracketsvar(--color-gray-600)
--code-operatorOperatorsvar(--color-gray-600)
--code-punctuationPunctuationvar(--color-gray-600)
--code-punctuation-bracketBracketsvar(--code-punctuation)
--code-punctuation-delimiterDelimitersvar(--code-punctuation)
--code-metaMeta informationvar(--color-gray-500)
--code-invalidInvalid codevar(--color-red-600)
--code-invalid-deprecatedDeprecated codevar(--color-amber-700)

Examples

Default Code

Standard code styling with syntax highlighting and readable typography:

:root {
  /* No design token overrides */
}

Inline Code

This paragraph contains inline code that demonstrates the default styling with appropriate background highlighting and font selection for readability.

Code Blocks

def fibonacci(n):
    """Generate Fibonacci sequence up to n."""
    if n <= 0:
        return []
    elif n == 1:
        return [0]

    sequence = [0, 1]
    while len(sequence) < n:
        next_val = sequence[-1] + sequence[-2]
        sequence.append(next_val)

    return sequence

# Example usage
result = fibonacci(10)
print(f"First 10 Fibonacci numbers: {result}")

Technical Documentation

Clean, readable styling for technical content:

:root {
  --code-font-size-inline: var(--font-size-sm);
  --code-font-size-block: var(--font-size-sm);
  --code-border-radius: var(--radius-sm);
  --code-padding-inline: 0.05em 0.25em;
  --code-padding-block: var(--space-4);
  --code-keyword: var(--color-blue-600);
  --code-string: var(--color-green-700);
  --code-comment-line: var(--color-gray-500);
}

Install using pip install research-toolkit and configure with your API key.

# Configure tool
import research_toolkit as rt
rt.configure(api_key="your-key")

Minimal Code Style

Subtle, unobtrusive code formatting:

:root {
  --code-border-width: var(--space-0);
  --code-padding-inline: 0;
  --code-padding-block: var(--space-1);
  --code-gutter-border-width: var(--space-0);
  --code-line-numbers: none;
  --code-fold-gutter: none;
}

Use analyze(method="pearson") to process datasets with correlation analysis.

data = load_dataset("experiment.csv")
results = analyze(data, method="pearson")
print(results.summary())

High Contrast Code

Bold, prominent styling for tutorials and learning materials:

:root {
  --code-font-size-inline: var(--font-size-md);
  --code-font-size-block: var(--font-size-md);
  --code-padding-inline: 0.1em 0.35em;
  --code-line-numbers: none;
  --code-keyword: var(--color-red-400);
  --code-string: var(--color-green-400);
  --code-comment-line: var(--color-gray-400);
  --code-function: var(--color-amber-500);
}

Import modules like from sklearn import datasets for machine learning pipelines.

from sklearn import datasets
from sklearn.model_selection import train_test_split
from sklearn.ensemble import RandomForestClassifier

# Load and split data
iris = datasets.load_iris()
X_train, X_test, y_train, y_test = train_test_split(
    iris.data, iris.target, test_size=0.3
)

Language Samples

These samples help validate syntax highlighting and typography across languages.

Python

# Statistical analysis for experimental data
import numpy as np
from scipy import stats

def analyze_experiment(data, control_group=None):
    """Calculate p-value for experimental results."""
    mean_effect = np.mean(data)  # Calculate mean effect size
    if control_group is not None:
        t_stat, p_value = stats.ttest_ind(data, control_group)
        return {'mean': mean_effect, 'p_value': p_value, 'significant': p_value < 0.05}
    return mean_effect

R

library(tidyverse)
library(broom)

# Analyze gene expression data
gene_analysis <- function(expression_matrix, metadata) {
  results <- expression_matrix %>%
    filter(gene_type == "protein_coding") %>%
    mutate(log_expression = log2(count + 1)) %>%
    group_by(sample_id) %>%
    summarise(median_expr = median(log_expression), .groups = "drop")

  return(results)
}

JavaScript

// Data tracking class for research experiments
class ExperimentTracker {
  constructor(studyId, sampleSize = 100) {
    this.studyId = studyId;
    this.sampleSize = sampleSize;
    this.results = []; // Array to store measurements
  }

  async recordMeasurement(participant, measurement) {
    const timestamp = new Date().toISOString(); // ISO timestamp
    this.results.push({ participant, measurement, timestamp });
    return this.calculateStatistics();
  }
}

SQL

-- Query to analyze biomarker data for recent patient cohort
SELECT
    p.patient_id,
    p.age_at_diagnosis,
    t.treatment_type,
    AVG(m.biomarker_value) AS mean_biomarker,  -- Average biomarker level
    COUNT(*) AS measurement_count             -- Number of measurements
FROM patients p
    INNER JOIN treatments t ON p.patient_id = t.patient_id
    LEFT JOIN measurements m ON p.patient_id = m.patient_id
WHERE p.diagnosis_date >= '2023-01-01'       -- Recent diagnoses only
    AND m.biomarker_name = 'IL-6'           -- Specific biomarker
GROUP BY p.patient_id, t.treatment_type
HAVING COUNT(*) >= 3;                        -- Minimum measurement threshold

Tips

Theme presets: Use --code-theme/--code-theme-dark for named presets, and switch to custom only when you need per-token syntax colors.

Inline vs block: Keep --code-*-inline and --code-*-block aligned to avoid mismatched sizing and backgrounds.

Gutters and line numbers: Use --code-line-numbers with --code-gutter-* to control editor chrome without touching block styles.

Selection: Set --code-selection-background to keep selection visible against your syntax palette.

© 2026 Stencila