Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/qomponent/qui-code-block below:

qomponent/qui-code-block: Code block component built on Code mirror 6

The code block UI component is based on codemirror 6, wrapped in a Lit webcomponent.

npm i @qomponent/qui-code-block

import '@qomponent/qui-code-block';

<qui-code-block mode="properties" theme="dark">
      <slot>
foo = bar
      </slot>
    </qui-code-block>

• properties
• js
• java
• xml
• json
• yaml
• sql
• html
• css
• sass
• markdown

Add showLineNumbers attribute. Example:

<qui-code-block mode="properties" theme="dark" showLineNumbers>
      <slot>
foo = bar
      </slot>
    </qui-code-block>

Add editable attribute. Example:

<qui-code-block id="code" mode="properties" theme="dark" value='${this._value}' editable>
      <slot>
foo = bar
      </slot>
    </qui-code-block>

You can get the value at any time by looking at the value attribute that you set (it's reflective) or you can add a listener shiftEnter that will contain the new value in event.detail.content when Shift-Enter is pressed.

let newValue = this.shadowRoot.getElementById('code').getAttribute('value');

Add attribute theme. Value can be dark or light;

To run the example:

Then go to http://localhost:8080/example

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Apache 2

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4