---
title: "Code Snippet"
url: "https://divitorque.com/docs/code-snippet.md"
canonical: "https://divitorque.com/docs/code-snippet/"
published: "2026-08-20"
modified: "2026-08-20"
author: "Fahim Reza"
tags:
  - "Modules"
---

# Code Snippet

The **Code Snippet** module displays code the way an editor would: syntax highlighting, line numbers, an optional file name header, and a copy button with a confirmation. The highlighter only loads on pages that use the module.

![Divi Code Snippet module showing highlighted PHP with a file name header, language label, and Copy button](https://divitorque.com/wp-content/uploads/2026/08/divi-code-snippet-module-demo.png)

## How to add the Code Snippet module

1. Add a section and row, then add the **Code Snippet** module.
2. Paste the code and pick its language.
3. Choose a theme and toggle the header elements you want.

## Content

### Code

- **Code**: the snippet itself, pasted as plain text.
- **Language**: Plain text, HTML / XML, CSS, JavaScript, TypeScript, JSX, PHP, Python, Shell, JSON, SQL, YAML, or Markdown.
- **Line Numbers** with a custom **First Line Number**.
- **Highlight Lines**: call out specific lines, for example "3, 6-8".
- **Wrap Long Lines** instead of horizontal scrolling.

### Header

- **Show Header** with a **File Name** and a **Show Language** label.
- **Copy Button** with editable **Copy Button Text** and **Confirmation Text**.

## Design

- **Theme**: Dark, Light, Midnight, or Paper.
- **Max Height** makes long snippets scroll instead of taking over the page.
- **Corner Radius**, **Background**, **Base Text Color**, **Header Background**, and **Header Text Color** for fine-tuning beyond the theme.

## Tip

Use **Highlight Lines** when a snippet exists to show one change. Readers find the two highlighted lines faster than any amount of surrounding explanation.