JSPM – @polymer/marked-element@3.0.1

Package Exports

@polymer/marked-element
@polymer/marked-element/marked-element
@polymer/marked-element/marked-element.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@polymer/marked-element) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

<marked-element>

Element wrapper for the marked library.

<marked-element> accepts Markdown source, and renders it to a child element with the slot markdown-html. This child element can be styled as you would a normal DOM element. If you do not provide a child element with the markdown-html slot, the Markdown source will still be rendered, but to a shadow DOM child that cannot be styled.

See: Documentation, Demo.

Usage

Installation

npm install --save @polymer/marked-element

In an html file

<html>
  <head>
    <script type="module">
      import '@polymer/marked-element/marked-element.js';
    </script>
    <style>
      [slot="markdown-html"] p {
        color: red;
      }
    </style>
  </head>
  <body>
    <marked-element>
      <div slot="markdown-html"></div>
      <script type="text/markdown">
        Check out my markdown!

        We can even embed elements without fear of the HTML parser mucking up their
        textual representation:

        ```html
        <awesome-sauce>
          <div>Oops, I'm about to forget to close this div.
        </awesome-sauce>
        ```
      </script>
    </marked-element>
  </body>
</html>

In a Polymer 3 element

import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/marked-element/marked-element.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <style>
        [slot="markdown-html"] p {
          color: red;
        }
      </style>
      <marked-element>
        <div slot="markdown-html"></div>
        <script type="text/markdown">
          Check out my markdown!

          We can even embed elements without fear of the HTML parser mucking up their
          textual representation:

          \`\`\`html
          <awesome-sauce>
            <div>Oops, I'm about to forget to close this div.
          </awesome-sauce>
          \`\`\`
        </script>
      </marked-element>
    `;
  }
}
customElements.define('sample-element', SampleElement);

Contributing

If you want to send a PR to this element, here are the instructions for running the tests and demo locally:

Installation

git clone https://github.com/PolymerElements/marked-element
cd marked-element
npm install
npm install -g polymer-cli

Running the demo locally

polymer serve --npm
open http://127.0.0.1:<port>/demo/

Running the tests

polymer test --npm