Skip to content
StoreDocsSupport
Get Divi Torque

Modules

Code Snippet

The Code Snippet module displays syntax-highlighted code with line numbers, line highlighting, a file name header, and a copy button. Built natively for Divi 5.

Code Snippet 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. This module works in Divi 5.

Divi Code Snippet module showing highlighted PHP with a file name header, language label, and Copy button

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. It is escaped, so it is displayed and never executed.
  • Language: Plain text, HTML / XML, CSS, JavaScript, TypeScript, JSX, PHP (default), Python, Shell, JSON, SQL, YAML, or Markdown.
  • Line Numbers: On by default, with a First Line Number (default 1) for extracts from a longer file.
  • Highlight Lines: Call out specific lines, for example 3, 5-9, or 2,7-9.
  • Wrap Long Lines: Off by default. When off, long lines scroll sideways.
  • Show Header: On by default.
  • File Name: Shown on the left of the header. Leave it empty to omit it.
  • Show Language: On by default.
  • Copy Button: On by default, with editable Copy Button Text (default Copy) and Confirmation Text (default Copied).

Design

Theme

  • Theme: Dark (default), Light, Midnight, or Paper.
  • Max Height: Long snippets scroll instead of taking over the page. Default 0px, which means no limit.
  • Corner Radius: Default 6px.
  • Background and Base Text Color: Override the theme colors. Leave them empty to keep the theme.

Header

  • Header Background and Header Text Color

Code Text

  • Font settings for the code.

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.