@edc4it/reveal.js-railroad
v1.0.2
Published
[![Version](https://img.shields.io/npm/v/@edc4it/reveal.js-railroad)](#)
Downloads
159
Readme
Reveal.js Railroad-diagram
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.
Quickstart
Installation
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
Initialise (as npm library)
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],
});
Add a diagram
For the full syntax of "components" see Railroad-Diagram components
<script type="application/railroad">
Diagram(
'function',
NonTerminal('identifier'),
'(', ZeroOrMore('param', ','), ')',
'{', ZeroOrMore(NonTerminal('statement')), '}');
</script>
Global options
Reveal.initialize({
railroad: {
// Default values
bg: 'unset',
pathStroke: '#82e4ff',
rectFill: '#00a6ff',
rectStroke: 'white',
textFill: 'white',
},
plugins: [RailRoad],
});
bg
: the background of the diagrampathStroke
: the color used for the "path" of the railroad diagram,rectFill
: 'the fill/background color of the componentsrectStroke
: 'the stroke color of the components,textFill
: color of the text inside the components,