https://github.com/sashafirsov/html-demo-element
inserts syntax colored HTML in demo-element before actual dom
https://github.com/sashafirsov/html-demo-element
Last synced: 3 months ago
JSON representation
inserts syntax colored HTML in demo-element before actual dom
- Host: GitHub
- URL: https://github.com/sashafirsov/html-demo-element
- Owner: sashafirsov
- License: apache-2.0
- Created: 2021-02-22T05:22:11.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-11-28T16:11:07.000Z (over 3 years ago)
- Last Synced: 2024-04-23T11:54:40.833Z (about 1 year ago)
- Language: JavaScript
- Size: 284 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# html-demo-element
web component inserts [prism JS syntax colored](https://prismjs.com/) HTML in demo-element before rendered UI for this HTML
[![NPM version][npm-image]][npm-url]
[![Published on webcomponents.org][wc-image]][wc-url]
Dependent prism script is located on unpkg.com CDN.
## Sample
The code
```html
Loading... ⏳
Something went wrong. 😭
```
renders following content:
# Use
If do not want to use template, include the script BEFORE inner content is modified. I.e. immediately after HTML and before scripts with components.
The use of `template` would defer the demo code injection after the source is rendered:
```html
Candle 🕯️
```
When you want to control where the source is located and where to render the code text, use slots:
```html
ignored
Croissant 🥐️
slot="source" defines where to get code
slot="demo" inject the html from source:
replaced with tasty demo
slot="text" inject colored code text:
replaced with colored code
```
# Live demo
* https://unpkg.com/[email protected]/demo/index.html
* https://unpkg.com/[email protected]/demo/advanced.html
* https://unpkg.com/[email protected]/demo/index.html
# API
## Slots
* `source` - the source code node. If omitted it would be taken either from embedded `template` content or
from embedded into `html-demo-element` dom.
* `text` - placeholder where the highlighted code would be rendered. If omitted the text would be rendered on
top of template or top of `html-demo-element` content.
* `demo` - placeholder where the code would be moved into for displaying live DOM( for HTML type ).
If omitted it would be placed beneath of `text` slot
* `legend` - placeholder where the value of `legend` attribute would be rendered as H3.
When omitted, it would be placed on top.
* `description` - placeholder where the value of `description` attribute would be rendered as dd.
When omitted, it would be placed on beneath of description.
## Properties and attributes
* `source` - the source code text. If the attribute is not defined, it would be initialized from `source` slot ^^
* `type` - one of [prism js supported languages](https://prismjs.com/#supported-languages) or `auto`.
`html`, `css`, `js` imported by default. When omitted, assumed `html`.
* `legend` - optional heading for `html-demo-element`
* `description` - additional text in title, bellow the legend
* `src` - optional url to retrieve the source. When `type` is omitted, it is detected from `content-type` or extension.
[npm-image]: https://img.shields.io/npm/v/html-demo-element.svg
[npm-url]: https://npmjs.org/package/html-demo-element
[wc-image]: https://img.shields.io/badge/webcomponents.org-published-blue.svg
[wc-url]: https://www.webcomponents.org/element/html-demo-element