Code

The mod.code() method automatically processes all <div class="mod-code"></div> elements on the page, applying syntax highlighting and setting up copy-to-clipboard functionality for code blocks.

All theming is handled automatically and is controlled via the data-theme attribute on the <pre> tag inside of the <div class="mod-code"></div> tag. The theme automatically switches based on the data-mod-theme attribute on the body element.

// Using mod(-plus).iife.min.js
window.mod.code(options?: object);

// Using mod(-plus).esm.min.js
import { code } from 'path/to/mod(-plus).esm.min.js';
code(options?: object);

Usage Examples

Use the following usage examples to guide your implementation.

<div class="mod-code">
  <header>
    <p>debounce.js</p>
    <p>JavaScript</p>
    <i class="mod-icon-clipboard-copy"></i>
  </header>
  <pre data-theme="light" class="language-javascript"><code>const debounce = (() => {
  let timer = 0;
  return (callback, ms) => {
    clearTimeout(timer);
    timer = setTimeout(callback, ms);
  };
})();

export default debounce;</code></pre>    
</div>

// Basic usage - processes all code blocks on the page
window.mod.code();

// With callback for copy events
window.mod.code({
  events: {
    on_copy_to_clipboard: (copiedText) => {
      console.log('Code copied to clipboard:', copiedText);
    }
  }
});

API

options object

Configuration options for the code component.

events object

Event callbacks for code component actions.

on_copy_to_clipboard function

Callback function when code is copied to clipboard. Receives the copied text as a parameter.