Reveal-CE: Compiler Explorer Plugin for reveal.js

1.3.0 verified Fri May 01 auth: no javascript

reveal-ce is a plugin for reveal.js (v4+) that transforms C++ <code> blocks into interactive links to Compiler Explorer, allowing presenters to click code to open it in CE for live compilation and assembly. Current stable version is 1.3.0 (April 2026), with a release cadence of minor updates every few months. Key differentiators: supports hiding regions, setup regions, executor pane mode, regex-based code filtering, and per-block or global configuration of compilers and options. It integrates seamlessly with Highlight plugin and works with ESM modules in modern browsers. Compared to static code snippets, it enables on-the-fly exploration of compiler output and execution results directly from presentations.

Common errors

error Uncaught TypeError: CompilerExplorer is not a constructor ↓

cause Using CommonJS require instead of ES module import.

fix

Replace require('./reveal-ce/index.js') with import CompilerExplorer from './reveal-ce/index.js'

error Cannot read properties of undefined (reading 'registerPlugin') ↓

cause CompilerExplorer plugin is not in the plugins array or is placed after Highlight.

fix

Add CompilerExplorer to plugins array before Highlight: plugins: [CompilerExplorer, Highlight]

error 404 Not Found: compiler-explorer.com?code=... ↓

cause The CE link generation uses a default or incorrect CE instance URL.

fix

Set the ce.baseUrl option in Reveal.initialize if using a self-hosted CE; otherwise ensure code block is not malformed.

error data-ce attribute not triggering ↓

cause The <code> block is not inside a <pre> element.

fix

Wrap the code block in <pre> tags: <pre><code data-ce>...</code></pre>

error SyntaxError: Unexpected token '<' ↓

cause HTML code block contains unescaped angle brackets causing parse failure.

fix

Escape HTML entities in code blocks: use < and > for < and >.

Warnings

gotcha Plugin order matters: CompilerExplorer must come before Highlight in the plugins array, otherwise code transformations may not work correctly. ↓

fix Ensure plugins array is [CompilerExplorer, Highlight] (or CompilerExplorer before any other code-modifying plugin).

gotcha Data attribute must be on a <code> element inside <pre>; bare <code> without <pre> may not be detected. ↓

fix Wrap all <code data-ce> blocks in <pre> tags: <pre><code data-ce>...</code></pre>

deprecated Using a plain string for defaultCompiler, defaultCompilerOptions, defaultLanguage is deprecated in favor of language-specific objects. ↓

fix Use an object with keys as language names: { 'c++': 'g142', rust: 'r1650' }

breaking From v1.2.0 onwards, data-ce-remove-regex uses a regex pattern; older versions did not support it and may ignore the attribute. ↓

fix Upgrade to v1.2.0 or later to use data-ce-remove-regex.

gotcha ESM-only: The plugin is distributed as ES modules; CommonJS require() will not work. ↓

fix Use import syntax and ensure a modern browser or bundler that supports ES modules.

gotcha Reveal.js version compatibility: The plugin is designed for reveal.js 4.x. Using with reveal.js 5 may cause issues. ↓

fix Check reveal.js version; use reveal.js 4.x for guaranteed compatibility.

gotcha Code indentation handling: The plugin smartly adjusts indentation; code blocks with mixed tabs and spaces may appear misaligned in CE. ↓

fix Use consistent indentation (spaces recommended) within each code block.

Install

npm install reveal-ce

yarn add reveal-ce

pnpm add reveal-ce

Imports

CompilerExplorer

wrong

const CompilerExplorer = require('./reveal-ce/index.js')

correct

import CompilerExplorer from './reveal-ce/index.js'

ESM-only; CommonJS require will not work. The default export is the plugin itself.

Reveal (global)
wrong
```
window.Reveal = ...
```
correct
```
import Reveal from 'reveal.js'
```
reveal-ce expects Reveal as an ES module import; using window global may cause issues with plugin registration order.
Highlight (recommended order)
```
import Highlight from 'reveal.js/plugin/highlight/highlight.esm.js'
```
CompilerExplorer must be placed before Highlight in the plugins array to allow code transformation before syntax highlighting.
Data attribute (data-ce)
wrong
```
<code data-ce>... outside <pre>
```
correct
```
<pre><code data-ce>code here</code></pre>
```
The data-ce attribute must be on a <code> element inside <pre>; otherwise the plugin may not detect it.

Quickstart

Installs and configures the reveal-ce plugin with a default compiler, options, and language; then shows a code block that opens in Compiler Explorer on click.

import Reveal from './reveal.js/dist/reveal.esm.js';
import Highlight from './reveal.js/plugin/highlight/highlight.esm.js';
import CompilerExplorer from './reveal-ce/index.js';

Reveal.initialize({
  ce: {
    defaultCompiler: 'g142',
    defaultCompilerOptions: '-O3',
    defaultLanguage: 'c++',
    defaultExecutor: false,
    defaultRemoveRegex: ''
  },
  plugins: [CompilerExplorer, Highlight]
});

/* In HTML:
<pre><code data-ce data-ce-compiler="g142" data-ce-options="-O3" data-ce-language="c++">
  int multiply(int a, int b) {
    return a * b;
  }
</code></pre>
*/