Source Code (Divi)
Syntax-highlighted code for Divi 5. Each file is a Code File child — add more than one and they become tabs. Highlighting is done on the server in 26 languages, so the page ships no highlighter script; the small script only runs the tabs, copy, download and “Show more”. Each example is labelled with the settings that make it.
1. One file
The default: Midnight theme, a header with coloured window dots, the file name and language, a Copy button and line numbers.
cart.jsJavaScript
// Add a product to the cart and update the badge.import { api } from './api.js'; export async function addToCart( id, qty = 1 ) { const res = await api.post( '/cart', { id, qty } ); if ( ! res.ok ) { throw new Error( `Could not add ${ id }` ); } document.querySelector( '.cart-count' ).textContent = res.count; return res;}2. Several files as tabs
Three Code File children become tabs (arrow keys move between them); the language label and the Copy and Download buttons follow the open tab.
HTML / XML
<!-- Product card --><article class="card" data-id="42"> <img src="hoodie.jpg" alt="Organic hoodie" loading="lazy"> <h3 class="card__title">Organic hoodie</h3> <p class="card__price">€79</p> <button type="button" class="btn">Add to cart</button></article>/* Card */.card { display: grid; gap: 12px; padding: 20px; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .25);}.card:hover .btn { transform: translateY(-2px); }@media (max-width: 767px) { .card { padding: 14px; }}// Add a product to the cart and update the badge.import { api } from './api.js'; export async function addToCart( id, qty = 1 ) { const res = await api.post( '/cart', { id, qty } ); if ( ! res.ok ) { throw new Error( `Could not add ${ id }` ); } document.querySelector( '.cart-count' ).textContent = res.count; return res;}3. Languages
A few of the 26: PHP, Python, SQL, Bash, JSON, YAML, Go, Rust and a Diff (added and removed lines are tinted).
shipping.php
shipping.phpPHP
<?php// Show a free-shipping notice in the cart.add_action( 'woocommerce_before_cart', function () { $left = 50 - WC()->cart->get_subtotal(); if ( $left > 0 ) { printf( '<p class="notice">Spend %s more for free shipping.</p>', wc_price( $left ) ); }} );order.py
order.pyPython
from dataclasses import dataclass @dataclassclass Order: id: int total: float = 0.0 def with_tax(self, rate=0.2): # Return the total including tax. return round(self.total * (1 + rate), 2) print(Order(7, 120).with_tax())best-sellers.sql
best-sellers.sqlSQL
-- Best-selling products this monthSELECT p.name, SUM(i.qty) AS soldFROM order_items iJOIN products p ON p.id = i.product_idWHERE i.created_at >= DATE_TRUNC('month', NOW())GROUP BY p.nameORDER BY sold DESCLIMIT 10;deploy.sh
deploy.shBash / Shell
#!/usr/bin/env bash# Build and deploy the themeset -enpm ci && npm run buildfor f in dist/*.css; do echo "Minified $f"donersync -az dist/ user@shop:/var/www/theme/product.json
product.jsonJSON
{ "name": "organic-hoodie", "price": 79, "inStock": true, "sizes": ["S", "M", "L", "XL"], "colour": null}store.yml
store.ymlYAML
# Store settingsstore: name: Moduly Wear currency: EUR shipping: free_over: 50 zones: [EU, UK] newsletter: truestock.go
stock.goGo
package main import "fmt" func main() { stock := map[string]int{"hoodie": 12, "tee": 40} for item, n := range stock { fmt.Printf("%s: %d left\n", item, n) }}discount.rs
discount.rsRust
// Apply a discount, never below zero.fn discounted(price: f64, pct: u8) -> f64 { let cut = price * f64::from(pct) / 100.0; (price - cut).max(0.0)} fn main() { println!("{:.2}", discounted(79.0, 20));}total.diff
total.diffDiff
@@ -12,7 +12,8 @@ export function total( cart ) {- let sum = 0;+ let sum = 0;+ const tax = cart.taxRate ?? 0.2; for ( const line of cart.lines ) {- sum += line.price;+ sum += line.price * line.qty; }- return sum;+ return sum * ( 1 + tax );4. Eight themes
Display → Theme. Each theme sets the background, header, line numbers and eleven token colours.
Midnight
discount.rsRust
// Apply a discount, never below zero.fn discounted(price: f64, pct: u8) -> f64 { let cut = price * f64::from(pct) / 100.0; (price - cut).max(0.0)} fn main() { println!("{:.2}", discounted(79.0, 20));}Daylight
discount.rsRust
// Apply a discount, never below zero.fn discounted(price: f64, pct: u8) -> f64 { let cut = price * f64::from(pct) / 100.0; (price - cut).max(0.0)} fn main() { println!("{:.2}", discounted(79.0, 20));}Monokai
discount.rsRust
// Apply a discount, never below zero.fn discounted(price: f64, pct: u8) -> f64 { let cut = price * f64::from(pct) / 100.0; (price - cut).max(0.0)} fn main() { println!("{:.2}", discounted(79.0, 20));}Dracula
discount.rsRust
// Apply a discount, never below zero.fn discounted(price: f64, pct: u8) -> f64 { let cut = price * f64::from(pct) / 100.0; (price - cut).max(0.0)} fn main() { println!("{:.2}", discounted(79.0, 20));}Nord
discount.rsRust
// Apply a discount, never below zero.fn discounted(price: f64, pct: u8) -> f64 { let cut = price * f64::from(pct) / 100.0; (price - cut).max(0.0)} fn main() { println!("{:.2}", discounted(79.0, 20));}Solarized light
discount.rsRust
// Apply a discount, never below zero.fn discounted(price: f64, pct: u8) -> f64 { let cut = price * f64::from(pct) / 100.0; (price - cut).max(0.0)} fn main() { println!("{:.2}", discounted(79.0, 20));}Paper
discount.rsRust
// Apply a discount, never below zero.fn discounted(price: f64, pct: u8) -> f64 { let cut = price * f64::from(pct) / 100.0; (price - cut).max(0.0)} fn main() { println!("{:.2}", discounted(79.0, 20));}Synthwave
discount.rsRust
// Apply a discount, never below zero.fn discounted(price: f64, pct: u8) -> f64 { let cut = price * f64::from(pct) / 100.0; (price - cut).max(0.0)} fn main() { println!("{:.2}", discounted(79.0, 20));}5. Highlighted lines, numbering and wrapping
Highlight Lines (“4-6, 8”) with the marker colour · First Line Number 120 · Wrap Long Lines · Line Numbers off.
Highlight lines 4-6, 8 · starts at line 1
cart.jsJavaScript
// Add a product to the cart and update the badge.import { api } from './api.js'; export async function addToCart( id, qty = 1 ) { const res = await api.post( '/cart', { id, qty } ); if ( ! res.ok ) { throw new Error( `Could not add ${ id }` ); } document.querySelector( '.cart-count' ).textContent = res.count; return res;}First line number 120 · Daylight
shipping.phpPHP
<?php// Show a free-shipping notice in the cart.add_action( 'woocommerce_before_cart', function () { $left = 50 - WC()->cart->get_subtotal(); if ( $left > 0 ) { printf( '<p class="notice">Spend %s more for free shipping.</p>', wc_price( $left ) ); }} );Wrap long lines
card.htmlHTML / XML
<!-- Product card --><article class="card" data-id="42"> <img src="hoodie.jpg" alt="Organic hoodie" loading="lazy"> <h3 class="card__title">Organic hoodie</h3> <p class="card__price">€79</p> <button type="button" class="btn">Add to cart</button></article>No line numbers · Monokai
store.ymlYAML
# Store settingsstore: name: Moduly Wear currency: EUR shipping: free_over: 50 zones: [EU, UK] newsletter: true6. Long code: fold or scroll
Collapse After 8 lines with a “Show all 40 lines” button · or a Maximum Height of 260 px (180 px on phones) so the code scrolls inside the box.
Collapse after 8 lines
pipeline.jsJavaScript
// Step 1: tidy the order dataconst step2 = normalise( order, 2 );const step3 = normalise( order, 3 );const step4 = normalise( order, 4 );const step5 = normalise( order, 5 );// Step 6: tidy the order dataconst step7 = normalise( order, 7 );const step8 = normalise( order, 8 );const step9 = normalise( order, 9 );const step10 = normalise( order, 10 );// Step 11: tidy the order dataconst step12 = normalise( order, 12 );const step13 = normalise( order, 13 );const step14 = normalise( order, 14 );const step15 = normalise( order, 15 );// Step 16: tidy the order dataconst step17 = normalise( order, 17 );const step18 = normalise( order, 18 );const step19 = normalise( order, 19 );const step20 = normalise( order, 20 );// Step 21: tidy the order dataconst step22 = normalise( order, 22 );const step23 = normalise( order, 23 );const step24 = normalise( order, 24 );const step25 = normalise( order, 25 );// Step 26: tidy the order dataconst step27 = normalise( order, 27 );const step28 = normalise( order, 28 );const step29 = normalise( order, 29 );const step30 = normalise( order, 30 );// Step 31: tidy the order dataconst step32 = normalise( order, 32 );const step33 = normalise( order, 33 );const step34 = normalise( order, 34 );const step35 = normalise( order, 35 );// Step 36: tidy the order dataconst step37 = normalise( order, 37 );const step38 = normalise( order, 38 );const step39 = normalise( order, 39 );const step40 = normalise( order, 40 );Maximum height 260 px, scrolls
pipeline.jsJavaScript
// Step 1: tidy the order dataconst step2 = normalise( order, 2 );const step3 = normalise( order, 3 );const step4 = normalise( order, 4 );const step5 = normalise( order, 5 );// Step 6: tidy the order dataconst step7 = normalise( order, 7 );const step8 = normalise( order, 8 );const step9 = normalise( order, 9 );const step10 = normalise( order, 10 );// Step 11: tidy the order dataconst step12 = normalise( order, 12 );const step13 = normalise( order, 13 );const step14 = normalise( order, 14 );const step15 = normalise( order, 15 );// Step 16: tidy the order dataconst step17 = normalise( order, 17 );const step18 = normalise( order, 18 );const step19 = normalise( order, 19 );const step20 = normalise( order, 20 );// Step 21: tidy the order dataconst step22 = normalise( order, 22 );const step23 = normalise( order, 23 );const step24 = normalise( order, 24 );const step25 = normalise( order, 25 );// Step 26: tidy the order dataconst step27 = normalise( order, 27 );const step28 = normalise( order, 28 );const step29 = normalise( order, 29 );const step30 = normalise( order, 30 );// Step 31: tidy the order dataconst step32 = normalise( order, 32 );const step33 = normalise( order, 33 );const step34 = normalise( order, 34 );const step35 = normalise( order, 35 );// Step 36: tidy the order dataconst step37 = normalise( order, 37 );const step38 = normalise( order, 38 );const step39 = normalise( order, 39 );const step40 = normalise( order, 40 );7. Header and buttons
Grey dots and no language · an icon-only Copy button with a Download button · no header at all (the buttons float in the corner) · a caption under the box.
Grey dots, no language label
order.py
from dataclasses import dataclass @dataclassclass Order: id: int total: float = 0.0 def with_tax(self, rate=0.2): # Return the total including tax. return round(self.total * (1 + rate), 2) print(Order(7, 120).with_tax())Icon-only copy + download
best-sellers.sqlSQL
-- Best-selling products this monthSELECT p.name, SUM(i.qty) AS soldFROM order_items iJOIN products p ON p.id = i.product_idWHERE i.created_at >= DATE_TRUNC('month', NOW())GROUP BY p.nameORDER BY sold DESCLIMIT 10;No header: floating buttons
#!/usr/bin/env bash# Build and deploy the themeset -enpm ci && npm run buildfor f in dist/*.css; do echo "Minified $f"donersync -az dist/ user@shop:/var/www/theme/Caption, custom copy texts
product.jsonJSON
{ "name": "organic-hoodie", "price": 79, "inStock": true, "sizes": ["S", "M", "L", "XL"], "colour": null}8. Custom colours and the Design tab
Theme: Custom colours (every token colour picked) · 20 px corners, 24 px padding · Code font 15 px, line height 1.8 · a coloured border and a soft shadow · header and button colours · the caption in italics.
CSS
/* Card */.card { display: grid; gap: 12px; padding: 20px; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .25);}.card:hover .btn { transform: translateY(-2px); }@media (max-width: 767px) { .card { padding: 14px; }}// Add a product to the cart and update the badge.import { api } from './api.js'; export async function addToCart( id, qty = 1 ) { const res = await api.post( '/cart', { id, qty } ); if ( ! res.ok ) { throw new Error( `Could not add ${ id }` ); } document.querySelector( '.cart-count' ).textContent = res.count; return res;}