Skip to content
Get Divi Torque

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

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.
  • 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.