bandolier-template/admin/bando/demos/Code.svelte

<script>
  import Code from "$/client/components/Code.svelte";
  import Spinner from "$/client/components/Spinner.svelte";
  import CodeFormatter from "$/client/components/CodeFormatter.svelte";

  let code = "";
  let test_code = "/test.js";
  let message = "";
  let timer;

  const load_code = async () => {
    let res = await fetch(test_code);
    code = res.status == 200 ? await res.text() : `Error getting /test.js: ${res.status}`;
  }

  const code_copied = () => {
    if(timer) clearTimeout(timer);
    message = "You copied it!";
    timer = setTimeout(() => message = "", 2000);
  }

  let code_promise = load_code();
</script>

{#await code_promise}
  <Spinner />
{:then}
  <p>You can display code with color, line numbers, and clipboard copying with <code>Code</code>, and you can click on the code to copy it to your clipboard:</p>
  <Code content={ code } on:copy={ code_copied } language="javascript" />

<hr>

<p>It's designed similar to the <code>Markdown</code> component in that you can put the code in <code>content=""</code>, the inner slot, or as a <code>src=""</code> url to load.</p>

<Code on:copy={ code_copied } language="javascript">
  { code }
</Code>

<hr/>

<p>Here is the same code in <code>test.js</code> being loaded via a <code>src=""</code>.<p>
</p>

<Code src={ test_code } on:copy={ code_copied }  language="javascript"/>

{#if message}
<toast class="bottom-right">
{ message }
</toast>
{/if}

<CodeFormatter />
{/await}