reveal-ce

library1.3.0jsnpmunverified

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.

web-framework devops

npm install reveal-ce

github ↗package ↗

INSTALL

IMPORT

SIG · REVEAL-CE

reveal-ce

web-frameworkjavascriptv1.3.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

CompilerExplorer

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

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

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

Reveal (global)

✓ import Reveal from 'reveal.js'

✗ window.Reveal = ...

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)

✓ <pre><code data-ce>code here</code></pre>

✗ <code data-ce>... outside <pre>

The data-ce attribute must be on a <code> element inside <pre>; otherwise the plugin may not detect it.

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> */

Debug

Known issues

gotchaPlugin 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).

affects: >=1.0.0

gotchaData 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>

affects: >=1.0.0

deprecatedUsing 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' }

affects: >=1.0.0

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

affects: <1.2.0

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

affects: >=1.0.0

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

affects: >=1.0.0

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

affects: >=1.0.0

Errors

Common errors & fixes

Uncaught TypeError: CompilerExplorer is not a constructor

Using CommonJS require instead of ES module import.

fix

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

Cannot read properties of undefined (reading 'registerPlugin')

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

fix

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

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

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.

data-ce attribute not triggering

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

fix

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

SyntaxError: Unexpected token '<'

HTML code block contains unescaped angle brackets causing parse failure.

fix

Escape HTML entities in code blocks: use &lt; and &gt; for < and >.

Upgrade

Version history

1.3.0latest on npm

Audit

Dependencies

reveal.jsrequiredCore dependency; plugin hooks into Reveal.initialize and requires reveal.js to be loaded

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/mattgodbolt/reveal-ce ↗

packagehttps://www.npmjs.com/package/reveal-ce ↗