Skip to content
Home of the MDN live code editor interactive examples
JavaScript HTML CSS Shell
Branch: master
Clone or download
Pull request Compare This branch is 675 commits behind mdn:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
__tests__
bin
css
js
lib
live-examples
media
tmpl
.all-contributorsrc
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.stylelintignore
.stylelintrc
.travis.yml
CODE_OF_CONDUCT.md
CONTRIBUTING.md
CSS-Example-Style-Guide.md
JS-Example-Style-Guide.md
Jenkinsfile
LICENSE
README.md
index.js
package-lock.json
package.json
site.json
travis-deploy-pages

README.md

interactive-examples

Build Status

code style: prettier

Home of the MDN interactive code examples.

Folder structure

  • [css] - This contains the CSS used by the base templates.
  • [js] - This contains the JS used by the base templates.
  • [live-examples] - This contains the live example CSS and JS fragments.
  • [media] - The contains images used by the live examples and templates.
  • [tmpl] - The base templates.

The dynamically generated pages, their dependencies, and assets are generated to the gh-pages branch.

site.json

This describes the pages and bundles that make up the live examples.

Bundles

Bundles are mainly used by the base templates, and look like so:

"cssExamplesBase": {
    "javascript": ["js/lib/prism.js", "js/editable-css.js"],
    "css": ["css/editable-css.css", "css/libs/prism.css"],
    "destFileName": "css-examples-base"
},
  • javascript - This is an array of JS files that will be concatenated and Uglified.
  • css - This is an array of CSS files that will be concatenated.
  • destFileName - The file name to use for the generated bundle; .css or .js will be appended as appropriate.

Pages

This section is used to describe live example pages that will be generated. The schema is as follows:

"arrayFind": {
    "baseTmpl": "tmpl/live-js-tmpl.html",
    ["cssExampleSrc": "../../live-examples/css-examples/css/animation.css",]
    ["jsExampleSrc": "../../live-examples/js-examples/array-find.js",]
    ["exampleCode": "live-examples/css-examples/border-top-color.html",]
    "fileName": "array-find.html",
    "type": "js"
},
  • baseTmpl - The base template to use for this example.
  • cssExampleSrc - The file location that will be used as the value for the href attribute of a link tag.
  • jsExampleSrc - The file location that will be used as the value for the src attribute of a script tag.
  • exampleCode - This is currently only used by the CSS examples, and points to the location of the relevant live example HTML file.
  • fileName - This is the file name that will be used for the generated live example page.
  • type - The type of example; currently the only available types are js (JavaScript) or css.

Browser support baseline

The following is a list of browser/version combinations that are supported by the interactive editor. In browsers that do not meet the criteria, the editor degrades gracefully to displaying static examples.

  • Firefox - Latest three release versions.
  • Chrome - Latest three release versions.
  • Opera - Latest two release versions.
  • Safari - Latest two release versions.
  • Internet Explorer - version 11.
  • Edge - Latest release version.

Contributing

If you're interested in contributing to this project, great! Please see the CONTRIBUTING document.

Contributors

Thanks goes to these wonderful people (emoji key):


Schalk Neethling

💻 📖 ⚠️

Mark Boas

💻 📖

William Bamberg

💻 📖

Stephanie Hobson

💻

Josh Mize

💻

Chris Mills

📖

Dave Parfitt

💻

Normal Human

📖

Gal Pasternak

📖

SphinxKnight

💻

Ayush Gupta

💻

John Whitlock

💻 🚇

mfluehr

💻 📖

Paul Irish

💻

Dhruv Jain

💻

Ivan Ng

💻

CShepartd

💻

Kenrick

💻 ⚠️

Anton Boyko

💻

Daniel Hickman

💻

Rachel Andrew

💻

Helmut Granda

💻

Dominic Duffin

💻

Darek Antkowicz

💻

Ben

💻

Ben Stokes

💻

Veekas Shrivastava

💻

Brian Macdonald

💻

This project follows the all-contributors specification. Contributions of any kind welcome!

You can’t perform that action at this time.