Unable to use codepen or jsfiddle in translated MDN document

MDN
#1

Hi,

I am a volunteer translator from China. When I try to translate the document of linear-gradient(), I found that the codepen/jsfiddle code snippet cannot be applied to the translated page. Like below,

Inline images 1
image.png751×1208 87.4 KB

The same problem happens on Japanese version and Korean version, as well. I am not sure whether it is a bug or my mistakenly delete something.

Could you please help me to check it?

Thanks a lot.

Best Regards,

Yuxuan He

#2

Hi @kmokidd,

This part of the page is automatically generated by a “macro” (actually, if you switch to edit mode, you’ll see something with {{EmbedLiveSample(...)}}).
This macro takes a parameter to create the codepen/jsfiddle and live sample. This parameter is the culprit here: it should be the id of the closest heading element that encloses every code block (whether it’s HTML / CSS or JS) necessary for the example.

To be honest, if you’re working on a new translation, you can’t do anything but guess the ID. If the page has been generated with the headings, your best option is to switch to “Source mode” and get the ID there.

All of this is documented here: https://developer.mozilla.org/en-US/docs/MDN/Contribute/Structures/Live_samples

I hope this helps, please tell me if you need help doing this :slight_smile:
Respectfully,
Julien / Sphinx

#3

Hi there Yuxuan He,

Very nice to hear from you.

I can help you with this. In the English version, let’s look at the first embedded sample as an example. There are two things you need to do, in each case.

1.

The macro call that creates the live sample is this:

{{EmbedLiveSample(“Gradient_at_a_45-degree_angle”)}}

what it does is grab the code in the section of the document underneath the heading with an ID of “Gradient_at_a_45-degree_angle”, and embed the rendered result inside an <iframe>.

If you look at the source code of the document, you’ll be able to find these. There is a heading above the embedded example like so:

<h3 id=“Gradient_at_a_45-degree_angle”>Gradient at a 45-degree angle</h3>

Below this heading are the following code blocks:

<div style=“width: 200px; height: 200px;”></div>

div {
background: linear-gradient(135deg, red, blue);
}

These are blocks that are rendered inside the iframe.

SO

You need to update the IDs inside the macro calls in the zh-CN translation so they are equal to the zh-CN IDs, NOT the English IDs.

2.

You need to label the code blocks with the correct syntax highlighting for each one (HTML, CSS, etc.) This is done by placing your cursor inside the syntax block, and selecting the right option from the drop-down menu to the right of the “h5” button. when you successfully apply the highlighting, it will be shown in the top right of the code block in the edit mode.

I’ve highlighted both of these in the following screenshot.

MDN-interface.png763×546 90.2 KB

I’ve done this one for you as an example:

3 Likes
#4

Well @chrisdavidmills is more helpful :smiley: and provides clearer hints :smiley:

#5

Thanks for the explanation, I made it successfully :grinning:

1 Like
#6

Wow, so kind of you! I totally know about how to deal with that kind problem right now. :grinning:

#7

You are welcome. Thank YOU for your great work!

And also thanks to @sphinx_knight for his answer, which was probably a lot more efficient than mine :wink:

1 Like