Code Block
There are 3 ways to provide the code:
- Providing content as a child (inside slot)
- Get remote content from a URL
- Providing content in a attribute
Code block can be editable
Theme options:
Providing content as a child (inside slot)
Properties:
This code:
<qui-code-block mode="properties" theme="dark">
<slot>
foo = bar
</slot>
</qui-code-block>
Will create this output:
foo = bar
JavaScript:
This code:
<qui-code-block mode="js" theme="dark">
<slot>
const foo = "bar";
</slot>
</qui-code-block>
Will create this output:
const foo = "bar";
Java:
This code:
<qui-code-block mode="java" theme="dark">
<slot>
private String foo = "bar";
</slot>
</qui-code-block>
Will create this output:
private String foo = "bar";
XML:
This code:
<qui-code-block mode="xml" theme="dark" showLineNumbers>
<slot>
<foo>
bar
</foo>
</slot>
</qui-code-block>
Will create this output:
<foo>
bar
</foo>
Json:
This code:
<qui-code-block mode="json" theme="dark">
<slot>
{
"foo":"bar"
}
</slot>
</qui-code-block>
Will create this output:
{
"foo":"bar"
}
Yaml:
This code:
<qui-code-block mode="yaml" theme="dark">
<slot>
---
foo: 'bar'
</slot>
</qui-code-block>
Will create this output:
---
foo: 'bar'
SQL:
This code:
<qui-code-block mode="sql" theme="dark">
<slot>
select foo from bar;
</slot>
</qui-code-block>
Will create this output:
select foo from bar;
CSS:
This code:
<qui-code-block mode="css" theme="dark">
<slot>
.foo {
display: flex;
}
</slot>
</qui-code-block>
Will create this output:
.foo {
display: flex;
}
SASS:
This code:
<qui-code-block mode="sass" theme="dark">
<slot>
$bar: flex;
.foo {
display: $bar
}
</slot>
</qui-code-block>
Will create this output:
$bar: flex;
.foo {
display: $bar
}
Markdown:
This code:
<qui-code-block mode="markdown" theme="dark">
<slot>
# Foo
- bar
- baz
</slot>
</qui-code-block>
Will create this output:
# Foo
- bar
- baz
Get remote content from a URL
Properties:
This code:
<qui-code-block mode="properties" src="http://localhost:8080/example/example.properties" theme="dark"></qui-code-block>
Will create this output:
JavaScript:
This code:
<qui-code-block mode="js" src="http://localhost:8080/example/example.js" theme="dark"></qui-code-block>
Will create this output:
Java:
This code:
<qui-code-block mode="java" src="http://localhost:8080/example/example.java" theme="dark"></qui-code-block>
Will create this output:
XML:
This code:
<qui-code-block mode="xml" src="http://localhost:8080/example/example.xml" theme="dark"></qui-code-block>
Will create this output:
Json:
This code:
<qui-code-block mode="json" src="http://localhost:8080/example/example.json" theme="dark"></qui-code-block>
Will create this output:
Yaml:
This code:
<qui-code-block mode="yaml" src="http://localhost:8080/example/example.yaml" theme="dark"></qui-code-block>
Will create this output:
SQL:
This code:
<qui-code-block mode="sql" src="http://localhost:8080/example/example.sql" theme="dark"></qui-code-block>
Will create this output:
CSS:
This code:
<qui-code-block mode="css" src="http://localhost:8080/example/example.css" theme="dark"></qui-code-block>
Will create this output:
SASS:
This code:
<qui-code-block mode="sass" src="http://localhost:8080/example/example.sass" theme="dark"></qui-code-block>
Will create this output:
Markdown:
This code:
<qui-code-block mode="markdown" src="http://localhost:8080/example/example.md" theme="dark"></qui-code-block>
Will create this output:
Provide content in an attribute
Properties:
This code:
<qui-code-block mode="properties" content="foo = bar" theme="dark"></qui-code-block>
Will create this output:
JavaScript:
This code:
<qui-code-block mode="js" content="const foo = 'bar';" theme="dark"></qui-code-block>
Will create this output:
Java:
This code:
<qui-code-block mode="java" content='private String foo = "bar";' theme="dark"></qui-code-block>
Will create this output:
XML:
This code:
<qui-code-block mode="xml" content="<foo>
bar
</foo>" theme="dark"></qui-code-block>
Will create this output:
Json:
This code:
<qui-code-block mode="json" content='{
"foo":"bar"
}' theme="dark"></qui-code-block>
Will create this output:
Yaml:
This code:
<qui-code-block mode="yaml" content="---
foo: 'bar'" theme="dark"></qui-code-block>
Will create this output:
SQL:
This code:
<qui-code-block mode="sql" content="select foo from bar;" theme="dark"></qui-code-block>
Will create this output:
CSS:
This code:
<qui-code-block mode="css" content=".foo {
display: flex;
}" theme="dark"></qui-code-block>
Will create this output:
SASS:
This code:
<qui-code-block mode="sass" content="$bar: flex;
.foo {
display: $bar
}" theme="dark"></qui-code-block>
Will create this output:
Markdown:
This code:
<qui-code-block mode="markdown" content="# Foo
- bar
- baz" theme="dark"></qui-code-block>
Will create this output:
Editable code blocks
This code:
<qui-code-block mode="properties" theme="dark" editable>
<slot>
foo = bar
</slot>
</qui-code-block>
Will create this output:
foo = bar
Value will appear here when Shift-Enter is pressed in the editor