<light-code>

LightCode is a minimal wrapper around Prism for displaying code highlighting

Examples

If you check the source code in the above example, you’ll notice a </script>.

For more on why script tags are used, check out Why script tags for further reading.

Using the “code” attribute

By setting the code attribute, we can achieve the same as slotting elements.

Highlighting Lines

Line highlighting accepts 2 syntaxes, the number itself:

highlight-lines="{1}" or using a range: highlight-lines="{1-3}" and you can combine ranges and numbers like so:

<light-code highlight-lines="{1, 4-8, 12}"></light-code>

Line ranges are inclusive. Line numbers are also 1-indexed.

Writings diffs

Inserted lines

Inserted lines can be highlighted via inserted-lines attribute.

Deleted lines

Deleted lines can be highlighted via deleted-lines attribute.

Combining inserted and deleted lines

Deleted lines can be highlighted via deleted-lines attribute.

Disable Line Numbers

Starting counting lines at a specific index

Sometimes you may not want to start counting lines at 1, for example, we can start counting lines at 10 in the following snippet:

Line Wrapping

By default <light-preview> will “soft wrap” lines for you. Meaning, code will wrap and not overflow the container. If this is undesirable, you can pass wrap="hard" and lines will not wrap.

Here’s a preview of soft wrapping vs hard wrapping.

No JS fallback

A no JS fallback could be something like this:

light-code:defined > [slot="code"] {
  display: none;
}

light-code > [slot="code"] {
  display: block;
  overflow: auto;
  /* this stops line-wrapping. */
  white-space: pre;
  word-break: break-all;
}

light-code[wrap="soft"] > [slot="code"] {
  /* this creates "soft" line-wrapping. */
  word-break: break-word;
  white-space: pre-wrap;
}

API Reference

Imports

<!-- Auto registers as <light-code> -->
<script type="module" src="https://cdn.jsdelivr.net/npm/light-pen/exports/components/light-code/light-code-register.js"></script>

<script type="module">
  // Auto registers as <light-code>
  import "https://cdn.jsdelivr.net/npm/light-pen/exports/components/light-code/light-code-register.js"

  // Manual Register
  import LightCode from "https://cdn.jsdelivr.net/npm/light-pen/exports/components/light-code/light-code.js"
  LightCode.define()
  // => Registers as <light-code>
</script>

// Auto registers as <light-code>
import "light-pen/exports/components/light-code/light-code-register.js"

// Manual Register
import LightCode "light-pen/exports/components/light-code/light-code.js"
LightCode.define()
// => Registers as <light-code>

Slots

Attributes

Functions

Parts