How to convert code samples to be "live"

MDN now 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?

For a complete description of the live sample system, including how to create live samples, see Using the live sample system.

  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.



Document Tags and Contributors

Contributors to this page: jswisher, Sheppy, stephaniehobson, ilyakamens
Last updated by: stephaniehobson,
Hide Sidebar