Early bird50% off every Moduly widget and plan in your first order. One use per customer.See prices
Get Moduly free
Elementor · Content & Layout · live demoSource CodeShow readable, copyable code samples in tutorials.
Get itDocs

Moduly Source Code

Server-side syntax highlighting in 25 languages with themes, tabs, copy, download, line numbers, highlighted lines and collapsing.

Several files as tabs

A small plugin in three tabs, highlighted lines, copy and download buttons, a window-style header.

PHP
&lt;?php/** * Plugin Name: Reading Time */add_filter( &#039;the_content&#039;, function ( $content ) {	$words   = str_word_count( wp_strip_all_tags( $content ) );	$minutes = max( 1, (int) ceil( $words / 220 ) );	$badge   = sprintf( &#039;<p class="reading-time">%d min read</p>', $minutes );	return $badge . $content; // prepend} );
A tiny WordPress plugin in three files.

Eight themes

The same Python snippet in every built-in theme.

orders.pyPython
from dataclasses import dataclass @dataclassclass Order:    total: float    paid: bool = False def unpaid(orders: list[Order]) -&gt; float:    """Sum everything still owed."""    return sum(o.total for o in orders if not o.paid)  # 42.5
Midnight
orders.pyPython
from dataclasses import dataclass @dataclassclass Order:    total: float    paid: bool = False def unpaid(orders: list[Order]) -&gt; float:    """Sum everything still owed."""    return sum(o.total for o in orders if not o.paid)  # 42.5
Daylight
orders.pyPython
from dataclasses import dataclass @dataclassclass Order:    total: float    paid: bool = False def unpaid(orders: list[Order]) -&gt; float:    """Sum everything still owed."""    return sum(o.total for o in orders if not o.paid)  # 42.5
Monokai
orders.pyPython
from dataclasses import dataclass @dataclassclass Order:    total: float    paid: bool = False def unpaid(orders: list[Order]) -&gt; float:    """Sum everything still owed."""    return sum(o.total for o in orders if not o.paid)  # 42.5
Dracula
orders.pyPython
from dataclasses import dataclass @dataclassclass Order:    total: float    paid: bool = False def unpaid(orders: list[Order]) -&gt; float:    """Sum everything still owed."""    return sum(o.total for o in orders if not o.paid)  # 42.5
Nord
orders.pyPython
from dataclasses import dataclass @dataclassclass Order:    total: float    paid: bool = False def unpaid(orders: list[Order]) -&gt; float:    """Sum everything still owed."""    return sum(o.total for o in orders if not o.paid)  # 42.5
Solar
orders.pyPython
from dataclasses import dataclass @dataclassclass Order:    total: float    paid: bool = False def unpaid(orders: list[Order]) -&gt; float:    """Sum everything still owed."""    return sum(o.total for o in orders if not o.paid)  # 42.5
Github
orders.pyPython
from dataclasses import dataclass @dataclassclass Order:    total: float    paid: bool = False def unpaid(orders: list[Order]) -&gt; float:    """Sum everything still owed."""    return sum(o.total for o in orders if not o.paid)  # 42.5
Synth

Languages

HTML with embedded CSS and JavaScript, SQL, Bash, YAML, Go and Rust.

index.htmlHTML / XML
<!doctype html><nav class="menu" aria-label="Main">  <a href="/shop" class="menu__link">Shop &amp; save</a></nav>   .menu__link { color: #0f766e; }    document.querySelector('.menu').dataset.ready = 'yes';
top-customers.sqlSQL
SELECT c.name, COUNT(o.id) AS orders, SUM(o.total) AS revenueFROM customers cLEFT JOIN orders o ON o.customer_id = c.idWHERE o.created_at &gt;= '2026-01-01'GROUP BY c.nameORDER BY revenue DESCLIMIT 10; -- top customers
deploy.shBash / Shell
#!/usr/bin/env bashset -euo pipefail# Build and shipnpm ci --silentnpm run buildrsync -az --delete dist/ "$DEPLOY_HOST:/var/www/app"echo "Deployed at $(date +%H:%M)"
.github/workflows/deploy.ymlYAML
name: deployon:  push:    branches: [ main ]jobs:  build:    runs-on: ubuntu-latest    steps:      - uses: actions/checkout@v4      - run: npm ci &amp;&amp; npm test  # must pass
main.goGo
package main import "fmt" func main() {	total := 0	for i := 1; i &lt;= 10; i++ {		total += i	}	fmt.Println(&quot;sum:&quot;, total) // 55}
main.rsRust
fn main() {    let words = vec!["hello", "world"];    let shout: Vec = words.iter().map(|w| w.to_uppercase()).collect();    println!("{}", shout.join(" ")); // HELLO WORLD}

Diffs and highlighted lines

Added and removed lines coloured from a patch; a snippet starting at line 41 with a highlighted range.

free-shipping.patchDiff
@@ -12,7 +12,8 @@ function price( $cart ) {   $subtotal = $cart-&gt;get_subtotal();-  $shipping = 4.99;+  $shipping = $subtotal &gt;= 50 ? 0 : 4.99;+  // Free shipping over $50   return $subtotal + $shipping; }
cart.phpPHP
	public function total(): float {		$sum = 0.0;		foreach ( $this-&gt;items as $item ) {			$sum += $item-&gt;price * $item-&gt;qty;		}		return round( $sum, 2 );	}
Starts at line 41, lines 43–45 highlighted.

Long code

Collapsed after 12 lines with “Show all”, and a fixed maximum height.

palette.tsTypeScript
export const color1 = '#01e241';  // swatch 1export const color2 = '#03c482';  // swatch 2export const color3 = '#05a6c3';  // swatch 3export const color4 = '#078904';  // swatch 4export const color5 = '#096b45';  // swatch 5export const color6 = '#0b4d86';  // swatch 6export const color7 = '#0d2fc7';  // swatch 7export const color8 = '#0f1208';  // swatch 8export const color9 = '#10f449';  // swatch 9export const color10 = '#12d68a';  // swatch 10export const color11 = '#14b8cb';  // swatch 11export const color12 = '#169b0c';  // swatch 12export const color13 = '#187d4d';  // swatch 13export const color14 = '#1a5f8e';  // swatch 14export const color15 = '#1c41cf';  // swatch 15export const color16 = '#1e2410';  // swatch 16export const color17 = '#200651';  // swatch 17export const color18 = '#21e892';  // swatch 18export const color19 = '#23cad3';  // swatch 19export const color20 = '#25ad14';  // swatch 20export const color21 = '#278f55';  // swatch 21export const color22 = '#297196';  // swatch 22export const color23 = '#2b53d7';  // swatch 23export const color24 = '#2d3618';  // swatch 24export const color25 = '#2f1859';  // swatch 25export const color26 = '#30fa9a';  // swatch 26export const color27 = '#32dcdb';  // swatch 27export const color28 = '#34bf1c';  // swatch 28export const color29 = '#36a15d';  // swatch 29export const color30 = '#38839e';  // swatch 30export const color31 = '#3a65df';  // swatch 31export const color32 = '#3c4820';  // swatch 32export const color33 = '#3e2a61';  // swatch 33export const color34 = '#400ca2';  // swatch 34export const color35 = '#41eee3';  // swatch 35export const color36 = '#43d124';  // swatch 36export const color37 = '#45b365';  // swatch 37export const color38 = '#4795a6';  // swatch 38export const color39 = '#4977e7';  // swatch 39export const color40 = '#4b5a28';  // swatch 40
palette.tsTypeScript
export const color1 = '#01e241';  // swatch 1export const color2 = '#03c482';  // swatch 2export const color3 = '#05a6c3';  // swatch 3export const color4 = '#078904';  // swatch 4export const color5 = '#096b45';  // swatch 5export const color6 = '#0b4d86';  // swatch 6export const color7 = '#0d2fc7';  // swatch 7export const color8 = '#0f1208';  // swatch 8export const color9 = '#10f449';  // swatch 9export const color10 = '#12d68a';  // swatch 10export const color11 = '#14b8cb';  // swatch 11export const color12 = '#169b0c';  // swatch 12export const color13 = '#187d4d';  // swatch 13export const color14 = '#1a5f8e';  // swatch 14export const color15 = '#1c41cf';  // swatch 15export const color16 = '#1e2410';  // swatch 16export const color17 = '#200651';  // swatch 17export const color18 = '#21e892';  // swatch 18export const color19 = '#23cad3';  // swatch 19export const color20 = '#25ad14';  // swatch 20export const color21 = '#278f55';  // swatch 21export const color22 = '#297196';  // swatch 22export const color23 = '#2b53d7';  // swatch 23export const color24 = '#2d3618';  // swatch 24export const color25 = '#2f1859';  // swatch 25export const color26 = '#30fa9a';  // swatch 26export const color27 = '#32dcdb';  // swatch 27export const color28 = '#34bf1c';  // swatch 28export const color29 = '#36a15d';  // swatch 29export const color30 = '#38839e';  // swatch 30export const color31 = '#3a65df';  // swatch 31export const color32 = '#3c4820';  // swatch 32export const color33 = '#3e2a61';  // swatch 33export const color34 = '#400ca2';  // swatch 34export const color35 = '#41eee3';  // swatch 35export const color36 = '#43d124';  // swatch 36export const color37 = '#45b365';  // swatch 37export const color38 = '#4795a6';  // swatch 38export const color39 = '#4977e7';  // swatch 39export const color40 = '#4b5a28';  // swatch 40
Maximum height 300 px — scrolls inside.

No header, wrapping

Floating icon-only copy button on Markdown; long lines wrapped with numbers off.

# Release notes- **Faster** checkout, *fewer* steps- New `coupon` field&gt; Thanks to everyone who tested![Read more](https://example.com)
const message = 'This line is deliberately very long so that you can see how the wrap option keeps everything visible without a horizontal scrollbar on narrow screens.';

Custom colours

Every token colour set by hand for a brand-matched block.

theme.jsonJSON
{  "version": 3,  "settings": {    "color": { "palette": [ { "slug": "brand", "color": "#0f766e" } ] },    "typography": { "fluid": true }  },  "styles": { "spacing": { "blockGap": "1.5rem" } }}