Support » Plugin: Code Embed » Code not working

  • Resolved pagegenius

    (@pagegenius)


    Hi. I’m grateful for Code Embed, but having trouble getting it to work.

    I wonder if this is the problem: I’ve looked in my page source, and I find that html elements are being writing inside my script tags. Here’s what I found:

    <p><!-- Code Embed v2.3.2 --><br />
    <script type="module">
    import {Inspector, Runtime} from "https://unpkg.com/@observablehq/notebook-runtime@1.0.1?module";
      import notebook from "https://api.observablehq.com/@ralphlombreglia/zoomable-sunburst@343.js?v=3";</p>
    <p>  const renders = {
        "chart": "#chart",
      };</p>
    <p>  Runtime.load(notebook, (variable) => {
        const selector = renders[variable.name];
        if (selector) {
          return new Inspector(document.querySelector(selector));
        }
      });</p>
    <p></script><br />
    <!-- End of Code Embed output --></p>

    Is that right?

    Here’s the code I put into Code Embed. It works with no problem in a straight HTML page outside WordPress:

    <script type="module">
    
    // Load the Observable runtime and inspector.
    import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
    
    // Your notebook, compiled as an ES module.
    import notebook from "https://api.observablehq.com/@ralphlombreglia/zoomable-sunburst@343.js?v=3";
    
    // Load the notebook, observing its cells with a default Inspector
    // that simply renders the value of each cell into the provided DOM node.
    //new Runtime().module(notebook, Inspector.into(document.body));
    
    // from https://observablehq.com/@observablehq/downloading-and-embedding-notebooks
    new Runtime().module(notebook, name => {
      if (name === "chart") {
        return new Inspector(document.querySelector("#chart"));
     }
    });
    </script>

    Thanks.

Viewing 5 replies - 1 through 5 (of 5 total)
  • pagegenius

    (@pagegenius)

    Additional info: I copied code from two different sources above, so let me do this correctly. The code I’m putting into Code Embed is this:

    <script type="module">
    
    import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
    
    import notebook from "https://api.observablehq.com/@ralphlombreglia/zoomable-sunburst@343.js?v=3";
    
    new Runtime().module(notebook, name => {
      if (name === "chart") {
        return new Inspector(document.querySelector("#chart"));
     }
    
    });
    
    </script>

    The code I see in my rendered page source looks like this:

    `<p><!– Code Embed v2.3.2 –><br />
    <script type=”module”></p>
    <p>import {Runtime, Inspector} from “https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js”;</p>
    <p>import notebook from “https://api.observablehq.com/@ralphlombreglia/zoomable-sunburst@343.js?v=3”;</p>
    <p>new Runtime().module(notebook, name => {
    if (name === “chart”) {
    return new Inspector(document.querySelector(“#chart”));
    }
    });</p>
    <p></script><br />
    <!– End of Code Embed output –></p>`

    Plugin Author David Artiss

    (@dartiss)

    Hi,

    Yeah, I’ve seen this occur a few times before. You have, most likely, a plugin or a theme setting that’s causing this, where it’s adding the tags to anything output. By default, when you add any code to custom fields, these tags won’t be added – and my plugin doesn’t add them, so something else is.

    pagegenius

    (@pagegenius)

    David,

    I’ve turned off all my plugins, and my JS code via Code Embed works.

    Surprising though it sounds, WPBakery Visual Composer seems to be the culprit. When it’s the only plugin activated, I get the unwanted HTML I described.

    The problem is, we have tons of pages authored with Visual Composer, and turning it off is way too much hassle.

    Anybody have any ideas?

    Plugin Author David Artiss

    (@dartiss)

    I did wonder if it was going to be a page builder of some kind – in this case, it’s intercepting the output from this plugin and modifying it. There’s nothing I can do about this, as the fault lies with WPBakery.

    pagegenius

    (@pagegenius)

    Thanks for your answer. Code Embed is a nice tool, but when a common page builder interferes this much with it, it’s a problem. This ate up two of my days, though partly that was because I wasn’t systematic enough in my approach to it.

    I initially tried to use Visual Composer’s “Raw JS” widget to put this code in my pages. When it didn’t work, I immediately gave up on it. What I failed to understand was that I had to disable the Code Embed method before trying the Raw JS method.

    Instead, I adopted the CSS & JavaScript Toolbox for injecting JS into individual page headers. That’s a good tool also, and it worked.

    But then I got around to suspecting that I hadn’t given Visual Composer’s Raw JS widget the proper shot, and tried it once more on a virgin page with no other embedding option in place, and sure enough it works fine.

    Duh. Web life!

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.