Skip to main content
Site Builder
Indiana University
Content Components

Code Snippet

Show a copyable block of source code

Included on:

Overview

The Code Snippet component displays a block of source code in a styled format, with syntax highlighting and a one-click copy feature. It’s designed for sharing code examples in documentation, tutorials, or technical guides.

Common uses

  • Provide sample code in developer documentation
  • Include reusable snippets that developers can copy into their projects
  • Show Velocity templates, CSS, or JavaScript examples
  • Document custom Site Builder components or page types with supporting code
This component is for showing code, not executing it. If you need to embed code that should run on the page, use the Code component instead.

Component example

  View in new window

Component fields

Element name Required Multiple
Language

Programming language of the snippet. Choose from the dropdown (HTML, CSS, JavaScript, PHP, Velocity) or enter a custom value.

Syntax highlighting is applied based on the selected language.
Yes No
Snippet name Filename displayed above the snippet (for example, gallery.js or billboard.vm).
Yes No
Limit visible height? If checked, the snippet displays at a reduced height with a "Show more" option. Useful for long code snippets.
No No
Code Code snippet content to display.
Yes No
Advanced settings See Advanced Component Fields.
No No

Accessibility

  • Use clear, descriptive snippet names
    Give each code snippet a meaningful name (like form-validation.js) so users understand its purpose at a glance.
  • Format code for readability
    Use consistent indentation, spacing, and line breaks so code is easy to scan and follow.
  • Provide context around the code
    Introduce the snippet with a short explanation so users understand what it does and how to use it.

Do

  • Use to show example code in documentation
  • Give each code snippet a clear name
  • Collapse long snippets (more than a few dozen lines)
  • Format and indent code properly for readability

Don't

  • Use to embed executable code—use the code component instead
  • Add unnecessary boilerplate code that clutters examples
  • Mix unrelated code samples in a single snippet—create separate snippets instead
  • Put sensitive information such as passwords or API keys in code snippets

Related content

  • Choosing Components

  • Learn to Use Site Builder