Embed existing element not work

When i try to use attaching Runkit to an existing element examle in my WordPress blog, double quotes or single quotes characters are updated so code editor appears but example in it fails. Can you please help me?

Below sample embed script is not working wordpress blog.

<script src="https://embed.runkit.com" data-element-id="my-element"></script>

<!-- anywhere else on your page -->
<div id="my-element">// GeoJSON!
var getJSON = require("async-get-json");

await getJSON("https://storage.googleapis.com/maps-devrel/google.json");</div>

Hi!

Can you be a little more specific? What exactly is happening with your quotes causing it to not work?

- Randy

Hi

I added the following screenshot from my wordpress blog. After I add your embed example code, it looks like this. Quote characters are updated. So, code is failing due to unexpected character. This is an encoding issue. What should I do?

I posted a sample post in my blog with runkit embed code. So, you can see as well.
https://kenanhancer.com/2019/12/22/runkit-test/

I think that this is very big issue. Can anyone check it please?

This is likely a problem with your wordpress. Just looking at the markup generated I see:

<div id="my-element">// GeoJSON!
var getJSON = require(&#8220;async-get-json&#8221;);

await getJSON(&#8220;https://storage.googleapis.com/maps-devrel/google.json&#8221;);</div>
			</div>

as you can see, the quotes being used are “smart quotes”. If you were top copy that code into your own text editor, you’d likely see the same thing.

The RunKit embed is just using what’s already there. You’ll need to prevent wordpress from converting the quotes to smart quotes.

Hope that helps!
- Randy

Ohhh thank you very much for help. I just installed “wpuntexturize” pugin in wordpress then this issue is resolved. :slight_smile: