A container for content representing programming languages.
<nve-codeblock language="typescript"> function getTime(): number { return new Date().getTime(); } </nve-codeblock>
<nve-codeblock language="typescript"> function getTime(): number { return new Date().getTime(); } </nve-codeblock>
function getTime(): number { return new Date().getTime(); }
Installation
Note: import the language before the codeblock
// only import languages that you need
import '@nvidia-elements/code/codeblock/languages/bash.js';
import '@nvidia-elements/code/codeblock/languages/css.js';
import '@nvidia-elements/code/codeblock/languages/go.js';
import '@nvidia-elements/code/codeblock/languages/html.js';
import '@nvidia-elements/code/codeblock/languages/javascript.js';
import '@nvidia-elements/code/codeblock/languages/json.js';
import '@nvidia-elements/code/codeblock/languages/markdown.js';
import '@nvidia-elements/code/codeblock/languages/python.js';
import '@nvidia-elements/code/codeblock/languages/toml.js';
import '@nvidia-elements/code/codeblock/languages/typescript.js';
import '@nvidia-elements/code/codeblock/languages/xml.js';
import '@nvidia-elements/code/codeblock/languages/yaml.js';
// import component
import '@nvidia-elements/code/codeblock/define.js';
// only import languages that you need
import '@nvidia-elements/code/codeblock/languages/bash.js';
import '@nvidia-elements/code/codeblock/languages/css.js';
import '@nvidia-elements/code/codeblock/languages/go.js';
import '@nvidia-elements/code/codeblock/languages/html.js';
import '@nvidia-elements/code/codeblock/languages/javascript.js';
import '@nvidia-elements/code/codeblock/languages/json.js';
import '@nvidia-elements/code/codeblock/languages/markdown.js';
import '@nvidia-elements/code/codeblock/languages/python.js';
import '@nvidia-elements/code/codeblock/languages/toml.js';
import '@nvidia-elements/code/codeblock/languages/typescript.js';
import '@nvidia-elements/code/codeblock/languages/xml.js';
import '@nvidia-elements/code/codeblock/languages/yaml.js';
// import component
import '@nvidia-elements/code/codeblock/define.js';
<nve-codeblock language="typescript">
function getTime(): number {
return new Date().getTime();
}
</nve-codeblock>
<nve-codeblock language="typescript">
function getTime(): number {
return new Date().getTime();
}
</nve-codeblock>
Code
Text code to be process into a codeblock.
Code Description string \n"}
Codeblock using the code property for programmatic/dynamic usage.
<nve-codeblock language="typescript" id="code-property"></nve-codeblock>
<script type="module">
import "@nvidia-elements/code/codeblock/define.js";
import "@nvidia-elements/code/codeblock/languages/typescript.js";
const codeblock = document.querySelector("nve-codeblock#code-property");
codeblock.code = 'console.log("hello, world!")';
</script>
<nve-codeblock language="typescript" id="code-property"></nve-codeblock>
<script type="module">
import "@nvidia-elements/code/codeblock/define.js";
import "@nvidia-elements/code/codeblock/languages/typescript.js";
const codeblock = document.querySelector("nve-codeblock#code-property");
codeblock.code = 'console.log("hello, world!")';
</script>
Container
Determines the container styles of component. Flat enables nesting within other containers.
Container Description flat inline Codeblock with flat container styling for minimal visual emphasis.
<nve-codeblock container="flat" language="typescript">
function getTime(): number { return new Date().getTime(); }
</nve-codeblock>
<nve-codeblock container="flat" language="typescript">
function getTime(): number { return new Date().getTime(); }
</nve-codeblock>
function getTime(): number { return new Date().getTime(); }
Theme
You can set a Theme independent of the global theme using the nve-theme attribute.
Light and dark theme variations for different UI contexts.
<nve-codeblock nve-theme="light" language="typescript">
function getTime(): number { return new Date().getTime(); }
</nve-codeblock>
<br />
<nve-codeblock nve-theme="dark" language="typescript">
function getTime(): number { return new Date().getTime(); }
</nve-codeblock>
<nve-codeblock nve-theme="light" language="typescript">
function getTime(): number { return new Date().getTime(); }
</nve-codeblock>
<br />
<nve-codeblock nve-theme="dark" language="typescript">
function getTime(): number { return new Date().getTime(); }
</nve-codeblock>
function getTime(): number { return new Date().getTime(); }
function getTime(): number { return new Date().getTime(); }
Line Numbers
Adds styling to show the line numbers of the codeblock.
LineNumbers Description boolean Codeblock with line numbers for easier code reference and debugging.
<nve-codeblock language="typescript" line-numbers>
function getTime(): number { return new Date().getTime(); }
</nve-codeblock>
<nve-codeblock language="typescript" line-numbers>
function getTime(): number { return new Date().getTime(); }
</nve-codeblock>
function getTime(): number { return new Date().getTime(); }
Highlight
Adds styling to highlight the provided code lines.For many lines: use Comma seperated values, ex: (1,5,7).For range of lines, use hyphen seperated values, ex: (1-5).You can combine both such as: ex: (1,5,10-15,20).
Highlight Description string Codeblock with specific line highlighting to draw attention to important code sections.
<nve-codeblock language="typescript" line-numbers highlight="2">
function getTime(): number { return new Date().getTime(); }
</nve-codeblock>
<nve-codeblock language="typescript" line-numbers highlight="2">
function getTime(): number { return new Date().getTime(); }
</nve-codeblock>
function getTime(): number { return new Date().getTime(); }
Overflow
Codeblock with constrained height for scrollable overflow behavior with long code.
<nve-codeblock language="typescript" line-numbers highlight="2" style="height: 100px">
import{LitElement as t,html as e}from"lit";import{property as s}from"lit/decorators/property.js";import{state as
o}from"lit/decorators/state.js"; import{unsafeHTML as i}from"lit/directives/unsafe-html.js"; import{useStyles as
r,shiftLeft as n}from"@nvidia-elements/core/internal"; import l from"./codeblock.css.js"; import a
from"highlight.js/lib/core"; import h from"highlight.js/lib/languages/shell";
</nve-codeblock>
<nve-codeblock language="typescript" line-numbers highlight="2" style="height: 100px">
import{LitElement as t,html as e}from"lit";import{property as s}from"lit/decorators/property.js";import{state as
o}from"lit/decorators/state.js"; import{unsafeHTML as i}from"lit/directives/unsafe-html.js"; import{useStyles as
r,shiftLeft as n}from"@nvidia-elements/core/internal"; import l from"./codeblock.css.js"; import a
from"highlight.js/lib/core"; import h from"highlight.js/lib/languages/shell";
</nve-codeblock>
import{LitElement as t,html as e}from"lit";import{property as s}from"lit/decorators/property.js";import{state as o}from"lit/decorators/state.js"; import{unsafeHTML as i}from"lit/directives/unsafe-html.js"; import{useStyles as r,shiftLeft as n}from"@nvidia-elements/core/internal"; import l from"./codeblock.css.js"; import a from"highlight.js/lib/core"; import h from"highlight.js/lib/languages/shell";
Line Wrap