├── README.md
└── externalcode.js


/README.md:
--------------------------------------------------------------------------------
 1 | # reveal.js-external-code
 2 | 
 3 | Let's you use code from source files instead of having to copy them into your presentation. I'm using this for a class I'll be teaching in Fall 2020 ([teaching.mrsharky.com](https://teaching.mrsharky.com/)). I was getting tired of putting code examples and then having to change them, and then also change the slides. You'll see a ton of examples of me using this there.
 4 | 
 5 | Note: This code uses `fetch` so you can't load code from other domains than the one you're hosting on. This also makes it incompatible with loading code if your just opening the html file on a computer and not via an http server.
 6 | 
 7 | My simple workaround for testing it locally:
 8 | 
 9 | - Install live-server: `sudo npm install -g live-server`
10 | - Run it from your project folder: `live-server`
11 | 
12 | ## Installation
13 | 
14 | Copy the `externalcode.js` file into your reveal.js plugins directory (recommended: `plugin/externalcode/externalcode.js`)
15 | 
16 | ## Adding to your presentation
17 | 
18 | Before the script section that calls `Reveal.initialize({ ...` in your html add the following:
19 | 
20 | ```html
21 | <script src="plugin/externalcode/externalcode.js"></script>
22 | ```
23 | 
24 | Add the plugin to your list of plugins:
25 | ```javascript
26 | plugins: [
27 |     Externalcode,
28 |     RevealHighlight,
29 | ],
30 | ```
31 | Add a `data-code` section to `code` giving the relative location
32 | 
33 | ```html
34 | <pre class="language-python"
35 | ><code class="hljs" data-code="python/pandas_examples.py" data-line-numbers="|1|3-5|6|7-13|14|15-21|">
36 | </code></pre>
37 | ```
38 | 


--------------------------------------------------------------------------------
/externalcode.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  *  Copyright 2020 Julien Pierret
 3 |  *
 4 |  *  Licensed under the Apache License, Version 2.0 (the "License");
 5 |  *  you may not use this file except in compliance with the License.
 6 |  *  You may obtain a copy of the License at
 7 |  *
 8 |  *      http://www.apache.org/licenses/LICENSE-2.0
 9 |  *
10 |  *  Unless required by applicable law or agreed to in writing, software
11 |  *  distributed under the License is distributed on an "AS IS" BASIS,
12 |  *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 |  *  See the License for the specific language governing permissions and
14 |  *  limitations under the License.
15 |  *
16 |  */
17 | 
18 | const Externalcode = {
19 |     id: "externalcode",
20 |     init: (reveal) => {
21 |       function fetchDataCodeSection(section) {
22 |         url = section.getAttribute("data-code");
23 |         return fetch(url)
24 |           .then((response) => response.text())
25 |           .then((data) => {
26 |             section.textContent = data;
27 |           });
28 |       }
29 | 
30 |       function fetchHtmlSection(section) {
31 |         url = section.getAttribute("html-insert");
32 |         return fetch(url)
33 |           .then((response) => response.text())
34 |           .then((data) => {
35 |             section.innerHTML = data;
36 |           });
37 |       }
38 |   
39 |       var sections = document.querySelectorAll("[data-code], [html-insert]");
40 |       var promiseArray = new Array(sections.length);
41 |   
42 |       for (var i = 0, len = sections.length; i < len; i++) {
43 |         section = sections[i];
44 |         if (section.getAttribute("data-code") != null) {
45 |           promiseArray[i] = fetchDataCodeSection(section);
46 |         }
47 | 
48 |         if (section.getAttribute("html-insert") != null) {
49 |           promiseArray[i] = fetchHtmlSection(section);
50 |         }
51 |       }
52 |       return Promise.all(promiseArray);
53 |     },
54 |   };
55 |   


--------------------------------------------------------------------------------