Reveal Compiler Explorer

3.3.0 verified Fri May 01 auth: no javascript

A plugin for reveal.js that integrates the Compiler Explorer (godbolt.org) to display live code compilation and assembly output within presentations. Current stable version 1.6.2 (as of 2021-10-22). The package allows presenters to embed editable code snippets that compile with various compilers (GCC, Clang, MSVC) and show assembly, execution results, and optimizations. Key differentiators include tight integration with reveal.js slide decks, support for multiple languages (C, C++, Rust, etc.), and customizable compiler options. Release cadence appears low with sporadic updates. Compared to standalone Compiler Explorer embeds, this plugin provides seamless navigation and keyboard shortcuts within presentations.

Common errors

error Uncaught TypeError: RevealCompilerExplorer is not a constructor ↓

cause Using the named import instead of default import in an ESM environment.

fix

Change to import RevealCompilerExplorer from 'reveal-compiler-explorer'

error Cannot find module 'reveal-compiler-explorer' ↓

cause Package not installed or not added to dependencies.

fix

Run npm install reveal-compiler-explorer

error The plugin 'RevealCompilerExplorer' is not a function. ↓

cause Using default import with CommonJS require without accessing .default.

fix

Use const RevealCompilerExplorer = require('reveal-compiler-explorer').default

Warnings

gotcha The plugin requires reveal.js version 4.x or higher. Using with older reveal.js versions may cause undefined behavior. ↓

fix Upgrade reveal.js to version 4 or later.

breaking In version 1.6.0, the default export changed from a named export to a default export. Previously, you had to import { RevealCompilerExplorer } from 'reveal-compiler-explorer'. ↓

fix Use import RevealCompilerExplorer from 'reveal-compiler-explorer' instead of the named import.

deprecated The option 'compiler' has been renamed to 'defaultCompiler' in version 1.5.0. Using 'compiler' still works but logs a deprecation warning. ↓

fix Rename 'compiler' to 'defaultCompiler' in the plugin configuration.

Install

npm install reveal-compiler-explorer

yarn add reveal-compiler-explorer

pnpm add reveal-compiler-explorer

Imports

RevealCompilerExplorer

wrong

const RevealCompilerExplorer = require('reveal-compiler-explorer')

correct

import RevealCompilerExplorer from 'reveal-compiler-explorer'

ESM default export. CommonJS require may work depending on bundler but is not officially supported.

RevealCompilerExplorer
wrong
```
const RevealCompilerExplorer = require('reveal-compiler-explorer')
```
correct
```
const RevealCompilerExplorer = require('reveal-compiler-explorer').default
```
When using CommonJS, the default export is under .default. The non-default require returns an object with a default property.
RevealCompilerExplorer
wrong
```
import { RevealCompilerExplorer } from 'reveal-compiler-explorer'
```
correct
```
import RevealCompilerExplorer from 'reveal-compiler-explorer'
```
The package only exports a default export, not a named export. Named import will result in undefined.

Quickstart

Shows how to import the plugin and add it to a reveal.js instance, with optional configuration.

import Reveal from 'reveal.js';
import RevealCompilerExplorer from 'reveal-compiler-explorer';

let deck = new Reveal({
  plugins: [ RevealCompilerExplorer ],
  // Optional: configure the plugin
  revealCompilerExplorer: {
    defaultCompiler: 'g82',
    defaultLanguage: 'c++'
  }
});
deck.initialize();