# dp-content
Renders user-supplied text as safe rich content: emoji shortcodes, GitHub-flavored markdown,
then `DOMPurify` sanitisation, then media embeds (images, video, YouTube), mentions, and
autolinks. It wraps the shared `contentRenderer` engine (`static/js/ContentRenderer.js`) - the
same pipeline used by the site's `data-render` attribute - exposed as a custom element.
Source: `static/js/components/AppContent.js`.
## Behaviour
- On connection the element reads its own text, renders it once, and replaces its contents with
the sanitised HTML; code blocks are highlighted.
- Sanitisation is fail-closed: rendering throws if `DOMPurify` is unavailable rather than
emitting unsanitised HTML.
- Equivalent to putting `data-render` on a server-rendered element, but as a self-contained
element you can drop in directly.
## Usage
Put markdown (or plain text) as the element's text. Escape any literal HTML you do not want
treated as live markup:
```html
<dp-content>
# Hello
Visit **DevPlace** :rocket: and watch https://youtu.be/dQw4w9WgXcQ
</dp-content>
```
Live example
## Markdown, rendered live
This is **bold**, this is _italic_, and here is a shortcode :rocket: :fire:.
- a list item
- another with `inline code`
- a mention of @alice_test and a link to https://example.com
```js
const answer = 42;
```