Trying to add a Motoko snippet to an edX page and only the HTML is being parsed

Question

This is the current snippet that is not running any of the Motoko scripts in edX when inserted onto a page.

All that is being parsed currently is the Html part.

Are the scripts pointing to the correct file locations or have I done something wrong during the upload process?

    <div id="counter" class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-motoko hljs" data-lang="motoko">actor Counter {
​
  var value = 0;
​
  public func inc() : async Nat {
    value += 1;
    return value;
  };
}</code></pre>
</div>
</div>
​
​
<!-- Start of dfinity Zendesk Widget script -->
<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=53121947-c10a-484c-b99b-f89a9fb6f63e"> </script>
<!-- End of dfinity Zendesk Widget script -->
<script async type="text/javascript" src="https://courses.edx.org/asset-v1:DFINITY+IC001+3T2021a+type@[email protected]"></script>
<script async type="text/javascript" src="https://courses.edx.org/asset-v1:DFINITY+IC001+3T2021a+type@[email protected]"></script>
​
<script type="text/javascript" src="https://courses.edx.org/asset-v1:DFINITY+IC001+3T2021a+type@asset+block@run_repl.js"></script>
​
<script type="module">
  import {CodeJar} from 'https://cdn.jsdelivr.net/npm/[email protected]/codejar.min.js';
  import {withLineNumbers} from 'https://cdn.jsdelivr.net/npm/[email protected]/linenumbers.js';
  window.CodeJar = CodeJar;
  window.withLineNumbers = withLineNumbers;
</script> 
<script type="module">
  import {CodeJar} from 'https://medv.io/codejar/codejar.js'
</script>
<script type="text/javascript">
async function addPackage(name, repo, version, dir) {
  const meta_url = `https://data.jsdelivr.com/v1/package/gh/${repo}@${version}/flat`;
  const base_url = `https://cdn.jsdelivr.net/gh/${repo}@${version}`;
  const response = await fetch(meta_url);
  const json = await response.json()
  const promises = [];
  const fetchedFiles = [];
  for (const f of json.files) {
    if (f.name.startsWith(`/${dir}/`) && /\.mo$/.test(f.name)) {
      const promise = (async () => {
        const content = await (await fetch(base_url + f.name)).text();
        const stripped = name + f.name.slice(dir.length + 1);
        fetchedFiles.push(stripped);
        Motoko.saveFile(stripped, content);
      })();
      promises.push(promise);
    }
  }
  Promise.all(promises).then(() => {
    Motoko.addPackage(name, name + '/');
    console.log(`Loaded motoko library "${name}"`);
    changeCodeBlock(); // from run_repl.js
  });
}
function loadBase() {
  addPackage('base', 'dfinity/motoko-base', 'dfx-0.8.4', 'src');
}
</script>
​
<script async src="https://courses.edx.org/asset-v1:DFINITY+IC001+3T2021a+type@[email protected]" onload="loadBase()"></script>

Answer 1

There is an easier solution now!

https://embed.smartcontracts.org/motoko/g/3oBbKveNbudpGgKMb2A5wADMcv3U6CDvxfjKMvASfcmkuXEk9j7UtFCn2DpHrUVJ3dSJYEMu2bW54vZRiPhYk4MDgdXkQhHwt1HhmcLi3GpCowBeaYus4BUpMZNDMLKezqBwcMg7EXFbVvNYR5xp57dViryE9uawnFjkuZacyor5jp?lines=10

Copy the iframe code and embed it into a raw HTML page on EDX.

Answer 2

after looking through your code there's a few missing pieces that may solve the problem.

1. The hightjs script is missing, which you can either attach to the head or body. You can choose to include their stylesheet or not. https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js

2. The run_repl here (https://courses.edx.org/asset-v1:DFINITY+IC001+3T2021a+type@asset+block@run_repl.js) has unexpected characters (backslashes) such that the file is not truly working. Please copy and replicate from here: https://github.com/dfinity/antora-sdk/blob/master/src/js/vendor/run_repl.js

3. There's some styling added inside Dfinity's website, which has been referenced. I've pulled it into a stylesheet on this replit project. Take a look!

https://replit.com/@Sue-AnnAnn/Motoko-highlight#index.html