Code Editor Basic

Set highlighter and codeStylesheet for syntax highlighting.

const message = "Hello World!";
console.log(message);

Code

The following example assumes that you have imported the component and set up the theme.

5 collapsed lines
<!-- Light theme -->
<link class="hljs-default-style-light" href="highlight.js/styles/atom-one-light.min.css" inline rel="stylesheet" />

<!-- Dark theme -->
<link class="hljs-default-style-dark" href="highlight.js/styles/atom-one-dark.min.css" inline rel="stylesheet" />

<sv-code-editor expand linenumbers>
  <pre>
const message = "Hello World!";
console.log(message);
  </pre>
</sv-code-editor>

<script type="module">
  import hljs from "highlight.js/lib/core";
  import typescript from "highlight.js/lib/languages/typescript";

  hljs.registerLanguage("typescript", typescript);

  const editor = document.querySelector("sv-code-editor");

  editor.highlighter = code => {
    return hljs.highlight(code, { language: "typescript" }).value;
  };

  // User's preferred color scheme
  let currentColorScheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";

  // User's stored color scheme
  const rootColorScheme = document.documentElement.style.colorScheme;
  if (rootColorScheme === "dark" || rootColorScheme === "light") {
    currentColorScheme = rootColorScheme;
  }

  editor.codeStylesheet = `.hljs-default-style-${currentColorScheme}`;

  // Update color scheme
  document.addEventListener("color-scheme-changed", event => {
    const newColorScheme = event.detail;
    editor.codeStylesheet = `.hljs-default-style-${newColorScheme}`;
  });
</script>