A small but useful isolated code demo element

<code-demo>

A small but useful isolated code demo element. Uses <iframe> to create an isolated space where HTML and JavaScript code can run without affecting other parts of the page.

<code-demo> uses <code-demo> to render the code as from Markdown.

Set up

Install and save to package.json:

npm i --save @intcreator/code-demo

Import where needed:

import '@intcreator/code-demo';

Usage

code property

The code source is taken directly from the code property supplied to the element. The code supplied can be dynamically updated to change the rendered code.

<code-demo code="<button>Click me!</button>"></code-demo>

src attribute

The src attribute can be used to load a markdown file through AJAX. It overrides the code attribute. The source can be dynamically updated to change the markdown file displayed.

<code-demo src="./demo.html"></code-demo>

<script> tag

A <script> tag can be inserted inside of the <code-demo> to provide the code source. It overrides the code and src attributes. Support for changing this code source dynamically is not yet implemented.

<code-demo>
    <script type="text/markdown">
        <p>This demo uses a <code>&lt;script&gt;</code> tag.</p>
    </script>
</code-demo>

Roadmap to 1.0

Here are a few issues that need to be resolved before the 1.0 release:

  • Dynamically update markdown when changed in the script tag (if possible) or find another way to dynamically update multiline-markdown
  • Actually use an <iframe> to render the code instead of just sticking it in the template
  • Figure out how to support different kinds of code (right now just HTML with embedded <script> tags)

Contributing

Let's make this element even better! Want to help? Found a problem? Open an issue or contact me on the Polymer Slack, Twitter, etc. @intcreator.

Install

Link to this version
ImportedReleased 25 July 2018BSD 3-clause "New" or "Revised" License
Framework Support
Polymer 3.0+
Browser Independent
Install with
npm install @intcreator/code-demo"@0.1.0"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 0.1.0

Dependencies

  • @intcreator/markdown-element#^0.3.3
  • @polymer/lit-element#^0.5.2
  • @polymer/polymer#^3.0.2