<!--
/**
 * @name            README
 * @namespace       doc
 * @type            Markdown
 * @platform        md
 * @status          stable
 * @menu            Documentation           /doc/readme
 *
 * @since           2.0.0
 * @author    Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
 */
-->

{{#> layout-readme }}

## SCodeExampleComponent

This package expose a simple `SCodeExampleComponent` custom element that you can define and use in your pages easily.

## Features

-   Framework agnostic. Simply webcomponent.
-   Syntax highlithing using the amazing [highlight.js](https://highlightjs.org/) library
-   Out of the box support for `js`, `html`, `css`, `scss`, `php` and `shell`
-   Possibility to register new languages easily
-   Support tabs
-   Responsive props [see more](/doc/components/responsive)
-   And more...

## Usage

First, simply import and define the component in your js/ts file:

```js
import { define } from '@coffeekraken/s-code-example-component';
define();
```

Make use of it in your pages:

```html
<s-code-example>
    <!-- can be a "template" tag as well -->
    <textarea lang="js">
        console.log('Hello world');
    </textarea>
</s-code-example>
```

## Attributes

{{> interface namespace='@coffeekraken.s-code-example-component.js.interface.SCodeExampleComponentInterface' }}

## API

For more information about the API, please check out [the API documentation](/api/@coffeekraken.s-code-example-component.js.SCodeExampleComponent)

{{/ layout-readme }}
