code-bed

1.0.5 • Public • Published

code-bed

A web component for embedded CodePens.

Try it out!

Usage

Via script tag

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>code-bed usage</title>
</head>
<body>
    <code-bed
        data-slug-hash="RwWxWNB"
        data-height="150">
    </code-bed>

    <script async src="https://cdn.jsdelivr.net/npm/code-bed@1.0.5/dist/codebed.min.js"></script>
</body>
</html>

Via module bundler

  1. Install package via package manager of your choice.
npm install code-bed
  1. import 'code-bed' as part of your app module, it should then be included as part of your bundle.
import 'code-bed';

// Rest of your code...
  1. You can now use <code-bed></code-bed> in your app views!

Customization

All parameters into the code-bed web component are done so via attributes on the <code-bed></code-bed> HTML element.

The set of attributes used are the same ones used by the CodePen embed itself:

The only absolutely required attribute is:

  • data-slug-hash - The identifier for the CodePen (ex. wbVzQG)

Readme

Keywords

none

Package Sidebar

Install

npm i code-bed

Weekly Downloads

1

Version

1.0.5

License

MIT

Unpacked Size

34.8 kB

Total Files

9

Last publish

Collaborators

  • rcasto