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:

npm install
npm start

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