A reveal.js plugin that adds support for Railroad-diagrams. It is a thin wrapper around the amazing Railroad-diagram Generator project.

<script type="application/railroad">
  Diagram(
    'function',
    NonTerminal('identifier'),
    '(', ZeroOrMore('param', ','), ')',
    '{', ZeroOrMore(NonTerminal('statement')), '}');
</script>

Important notes:

• We chose the "holder" to be <script type="application/railroad">
• The containment script is executed using eval. This could be an enormous security risk if you don't know the authors of your slides.

This plugin is published to, and can be installed from, npm.

npm install add @edc4it/reveal.js-railroad

Or using yarn

yarn add @edc4it/reveal.js-railroad

import Reveal from 'reveal.js';
import ClipCode from '@edc4it/reveal.js-clipcode';

Reveal.initialize({
  railroad: {
    // Default values
    bg: 'unset',
    pathStroke: '#82e4ff',
    rectFill: '#00a6ff',
    rectStroke: 'white',
    textFill: 'white',
  },
  plugins: [RailRoad],
});

For the full syntax of "components" see Railroad-Diagram components

<script type="application/railroad">
  Diagram(
    'function',
    NonTerminal('identifier'),
    '(', ZeroOrMore('param', ','), ')',
    '{', ZeroOrMore(NonTerminal('statement')), '}');
</script>

Reveal.initialize({
  railroad: {
    // Default values
    bg: 'unset',
    pathStroke: '#82e4ff',
    rectFill: '#00a6ff',
    rectStroke: 'white',
    textFill: 'white',
  },
  plugins: [RailRoad],
});

• bg: the background of the diagram
• pathStroke: the color used for the "path" of the railroad diagram,
• rectFill: 'the fill/background color of the components
• rectStroke: 'the stroke color of the components,
• textFill: color of the text inside the components,