{"id":26316,"library":"reveal-ce","title":"Reveal-CE: Compiler Explorer Plugin for reveal.js","description":"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.","status":"active","version":"1.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/mattgodbolt/reveal-ce","tags":["javascript","reveal.js","compiler-explorer","presentation","c++","plugin"],"install":[{"cmd":"npm install reveal-ce","lang":"bash","label":"npm"},{"cmd":"yarn add reveal-ce","lang":"bash","label":"yarn"},{"cmd":"pnpm add reveal-ce","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency; plugin hooks into Reveal.initialize and requires reveal.js to be loaded","package":"reveal.js","optional":false}],"imports":[{"note":"ESM-only; CommonJS require will not work. The default export is the plugin itself.","wrong":"const CompilerExplorer = require('./reveal-ce/index.js')","symbol":"CompilerExplorer","correct":"import CompilerExplorer from './reveal-ce/index.js'"},{"note":"reveal-ce expects Reveal as an ES module import; using window global may cause issues with plugin registration order.","wrong":"window.Reveal = ...","symbol":"Reveal (global)","correct":"import Reveal from 'reveal.js'"},{"note":"CompilerExplorer must be placed before Highlight in the plugins array to allow code transformation before syntax highlighting.","wrong":"","symbol":"Highlight (recommended order)","correct":"import Highlight from 'reveal.js/plugin/highlight/highlight.esm.js'"},{"note":"The data-ce attribute must be on a <code> element inside <pre>; otherwise the plugin may not detect it.","wrong":"<code data-ce>... outside <pre>","symbol":"Data attribute (data-ce)","correct":"<pre><code data-ce>code here</code></pre>"}],"quickstart":{"code":"import Reveal from './reveal.js/dist/reveal.esm.js';\nimport Highlight from './reveal.js/plugin/highlight/highlight.esm.js';\nimport CompilerExplorer from './reveal-ce/index.js';\n\nReveal.initialize({\n  ce: {\n    defaultCompiler: 'g142',\n    defaultCompilerOptions: '-O3',\n    defaultLanguage: 'c++',\n    defaultExecutor: false,\n    defaultRemoveRegex: ''\n  },\n  plugins: [CompilerExplorer, Highlight]\n});\n\n/* In HTML:\n<pre><code data-ce data-ce-compiler=\"g142\" data-ce-options=\"-O3\" data-ce-language=\"c++\">\n  int multiply(int a, int b) {\n    return a * b;\n  }\n</code></pre>\n*/","lang":"javascript","description":"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."},"warnings":[{"fix":"Ensure plugins array is [CompilerExplorer, Highlight] (or CompilerExplorer before any other code-modifying plugin).","message":"Plugin order matters: CompilerExplorer must come before Highlight in the plugins array, otherwise code transformations may not work correctly.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Wrap all <code data-ce> blocks in <pre> tags: <pre><code data-ce>...</code></pre>","message":"Data attribute must be on a <code> element inside <pre>; bare <code> without <pre> may not be detected.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use an object with keys as language names: { 'c++': 'g142', rust: 'r1650' }","message":"Using a plain string for defaultCompiler, defaultCompilerOptions, defaultLanguage is deprecated in favor of language-specific objects.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Upgrade to v1.2.0 or later to use data-ce-remove-regex.","message":"From v1.2.0 onwards, data-ce-remove-regex uses a regex pattern; older versions did not support it and may ignore the attribute.","severity":"breaking","affected_versions":"<1.2.0"},{"fix":"Use import syntax and ensure a modern browser or bundler that supports ES modules.","message":"ESM-only: The plugin is distributed as ES modules; CommonJS require() will not work.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Check reveal.js version; use reveal.js 4.x for guaranteed compatibility.","message":"Reveal.js version compatibility: The plugin is designed for reveal.js 4.x. Using with reveal.js 5 may cause issues.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use consistent indentation (spaces recommended) within each code block.","message":"Code indentation handling: The plugin smartly adjusts indentation; code blocks with mixed tabs and spaces may appear misaligned in CE.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Replace require('./reveal-ce/index.js') with import CompilerExplorer from './reveal-ce/index.js'","cause":"Using CommonJS require instead of ES module import.","error":"Uncaught TypeError: CompilerExplorer is not a constructor"},{"fix":"Add CompilerExplorer to plugins array before Highlight: plugins: [CompilerExplorer, Highlight]","cause":"CompilerExplorer plugin is not in the plugins array or is placed after Highlight.","error":"Cannot read properties of undefined (reading 'registerPlugin')"},{"fix":"Set the ce.baseUrl option in Reveal.initialize if using a self-hosted CE; otherwise ensure code block is not malformed.","cause":"The CE link generation uses a default or incorrect CE instance URL.","error":"404 Not Found: compiler-explorer.com?code=..."},{"fix":"Wrap the code block in <pre> tags: <pre><code data-ce>...</code></pre>","cause":"The <code> block is not inside a <pre> element.","error":"data-ce attribute not triggering"},{"fix":"Escape HTML entities in code blocks: use &lt; and &gt; for < and >.","cause":"HTML code block contains unescaped angle brackets causing parse failure.","error":"SyntaxError: Unexpected token '<'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}