Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Directly copying demo app to new project does not work? #17

Open
shanduur opened this issue Apr 24, 2022 · 3 comments
Open

Directly copying demo app to new project does not work? #17

shanduur opened this issue Apr 24, 2022 · 3 comments

Comments

@shanduur
Copy link

In the beginning, I want to state that I have no experience with JS, but I wanted to play with the Reveal and this plugin. I created new node app, copied it to my repo, and tried to start it, but I encountered some issues - it simply does not produce the same output as in the demo inside this repo. Am I missing something?

Repo: Shanduur/DockerTutorial@next

@stanleynguyen
Copy link
Owner

Could you elaborate more on the issue? Maybe a screen recording of the presentation with browser console opened would be great.

@shanduur
Copy link
Author

I run:

~/Repos/shanduur/DockerTutorial next                                                                                                                              
> npm install

up to date, audited 53 packages in 452ms

2 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
~/Repos/shanduur/DockerTutorial next                                                                                                                              
> npm start  

> [email protected] start
> node src/app.js

And then the output in the browser looks like this:

Safari:

image

Microsoft Edge:

image

There are no additional logs in the console, and the html output of the server looks like this:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>reveal-run-in-terminal</title>

    <link rel="stylesheet" href="css/reveal.css">
    <link rel="stylesheet" href="css/theme/black.css">
    <link rel="stylesheet" href="plugin/reveal-run-in-terminal.css">

    <!-- Theme used for syntax highlighting of code -->
    <link rel="stylesheet" href="lib/css/zenburn.css">

    <!-- Printing and PDF exports -->
    <script>
      var link = document.createElement( 'link' );
      link.rel = 'stylesheet';
      link.type = 'text/css';
      link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
      document.getElementsByTagName( 'head' )[0].appendChild( link );
    </script>
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
        <section>
          <h2>reveal-run-in-terminal</h2>
        </section>

        <section data-run-in-terminal="code/node-example.js">
          <h2>Node (With Time!)</h2>
        </section>

        <section data-run-in-terminal="code/node-error-example.js">
          <h2>Node (With An Error!)</h2>
        </section>

        <section
          data-run-in-terminal="code/ruby-argv-example.rb"
          data-run-in-terminal-bin="ruby"
          data-run-in-terminal-args="the quick 'brown fox'"
        >
          <h2>Ruby (With Arguments!)</h2>
        </section>

        <section
          data-run-in-terminal="code/python-example.py"
          data-run-in-terminal-bin="python"
        >
          <h2>Python (Isn't Whitelisted!)</h2>
        </section>

        <section data-run-in-terminal="../far-away.js">
          <h2>Outside Public Directory (Not Allowed!)</h2>
        </section>
      </div>
    </div>

    <script src="lib/js/head.min.js"></script>
    <script src="js/reveal.js"></script>

    <script>
      // More info https://github.com/hakimel/reveal.js#configuration
      Reveal.initialize({
        history: true,

        // More info https://github.com/hakimel/reveal.js#dependencies
        dependencies: [
          { src: 'plugin/reveal-run-in-terminal.js', async: true,
          callback: function() {
            RunInTerminal.init({defaultBin: 'node'});
          } },
          { src: 'plugin/markdown/marked.js' },
          { src: 'plugin/markdown/markdown.js' },
          { src: 'plugin/notes/notes.js', async: true },
          { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
        ]
      });
    </script>
  </body>
</html>

And the developer's console output:

image

@shanduur
Copy link
Author

After some digging, I am able to render basics, but I still have some issues, especially with hljs:
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants