A reveal.js plugin to load code from the server. This is helpful when code samples/demos are part of your reveal.js presentation. This way your demos and slides stay in sync.
You will need to run your slides from a server.
This plugin is published to, and can be installed from, npm.
npm install add @edc4it/reveal.js-external-code
Or using yarn
yarn add @edc4it/reveal.js-external-code
import Reveal from 'reveal.js';
import RevealHighlight from 'reveal.js/plugin/highlight/highlight';
import ExternalCode from '@edc4it/reveal.js-external-code';
Reveal.initialize({
externalCode: {},
plugins: [ExternalCode, RevealHighlight], // makes sure this plugin preceeds Hljs
});
Instead of adding pre > code
, you add an object[type="reveal.js/code"]
.
This object
element will be replaced by a wrapper div.external-code-wrapper
containing pre > code
.
You can use any of the data-*
attributes used by reveal.js (see docs); below we are
adding data-line-numbers
.
In fact all attributes will be added to the pre > code
element (except its class
attribute, see below).
<object type="reveal.js/code" data-src="code-samples/k8s.yaml" data-line-numbers="1">
</object>
Any known fragments classes on the object
are applied to the div.external-code-wrapper
element.
<object class="fragment" type="reveal.js/code" data-src="code-samples/k8s.yaml" data-line-numbers="1">
</object>
By default, all lines in the data-src
are displayed (except the one with an optional @reveal.js/code
annotation, see below).
You can define a range to limit only certain lines.
Skipped lines are shown using an ellipsis: "โฆ" (Unicode Character U+2026)
The range is a comma-separate list of:
- single line number:
n
- line range
start-end
Examples:
1
1, 5
1-2, 3
1-2, 3, 7-9
This range can be set on two levels, in order of precedence:
- inside the file
- on the
object[type="reveal.js/code"]
using thedata-lines
attributes
On the first line of the file add a @reveal.js/code
"annotation"
(most likely you'll use your code's syntax for a comment as below --
for Haskel)
-- @reveal.js/code
fib :: Int -> Int
fib 0 = 0
fib 1 = 1
fib n = fib (n - 1) + fib (n - 2)
This line is stripped from the resulting code block. By itself, this annotation might be helpful to remind yourself that this file is used on slides. It can also include a range:
-- @reveal.js/code lines=2-4
fib :: Int -> Int
fib 0 = 0
fib 1 = 1
fib n = fib (n - 1) + fib (n - 2)
Below is an example using
<object type="reveal.js/code"
data-src="code-samples/k8s.yaml"
data-lines="1"
>
Reveal.initialize({
externalCode: {
basePath: "/",
enableNotify: true,
local: {
absPath: "/home/rparree/projects/foss-edc4it/reveal.js-external-code/public",
scheme: 'vscode://file//', // default
},
codeBlock: {
trim: true,
additionalClasses: ["stretch"]
}
},
plugins: [ExternalCode, RevealHighlight],
})
basePath
: path prefix for fetching remote content (/
)enableNotify
: enable "toaster" error notification using simple-notify for when the file cannot be loaded (true
)local
: configures local copy on the presenter's machinescheme
: ('vscode://file//'
)absPath
: the full path on the local machine (you probably want to use a cookie value for this, so it can be changed)
codeBlock
trim
: set tofalse
to keep whitespace before first character/after last characteradditionalClasses
: array of additional css classes to add to thecode
element