code-bed
A web component for embedded CodePens.
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
- Install package via package manager of your choice.
npm install code-bed
-
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...- 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)