How to convert code samples to be "live"

MDN has a "live sample" system, where the code sample shown on a page is directly used to display the output of that same sample. However, many existing articles have code samples that do not yet use this system, and need to be converted.

Live samples, which let you see what a sample's output looks like, make documentation more dynamic and instructive. This guide covers how to take existing samples and add "live" functionality to them.

Where does it need to be done?

Articles tagged NeedsLiveSample

What do you need to know to do the task?

• Understanding of HTML, CSS and/or JavaScript, depending on the code sample.
• Ability to use KumaScript macros within MDN articles.

What are the steps to do the task?

1. Pick an article from the list of articles that are tagged NeedsLiveSample, where the code sample is for a feature you feel familiar with.
2. Convert the code sample to be "live".
3. Delete whatever code or image was previously used to display the output of the sample.

For more information on creating and editing Live Samples, see Using the live sample system