Highlighting data returned from fetch

[3goats]

So I need to highlight some date retuned from a remote endpoint using fetch. Could you show and example for hi-lighting the JSON returned in this REPL example:

https://svelte.dev/repl/a74f1ed8e3eb4aec82cb743e13443ee4?version=3.48.0

[metonym]

<script>
  import Highlight from "svelte-highlight";
  import json from "svelte-highlight/languages/json";
  import github from "svelte-highlight/styles/github";

  let url = "https://www.swapi.tech/api/people/1";

  import fetchStore from "./fetch.js";
  const [data, loading, error, get] = fetchStore(url);
</script>

<button on:click={get}> Fetch again </button>

{#if $loading}
  Loading: {$loading}
{:else if $error}
  Error: {$error}
{:else}
  <Highlight language={json} code={JSON.stringify($data, null, 2)} />
{/if}

<svelte:head>
  {@html github}
</svelte:head>

[3goats]

Thanks very much. I thought I tried this, but must have been doing something stupid. If I want to highlight an editable div before sending it as the fetch POST body/data. Is there a best way to do this ? I'm still trying to learn Svelte, so some of the concepts are new to me.

[metonym]

If you're seeking a proper code editor, I would recommend CodeMirror, which is what I believe the Svelte REPL uses. I don't think this library serves as an appropriate text editor.

Another example is sveld, which uses both CodeMirror and Svelte Highlight. The editable content on the left is powered by CodeMirror while the static text on the right is highlighted by this library.

[3goats]

Thanks for the direction here. I took a look at this. I couldn't seem to find any examples for sveld. Also these might be an overkill for my use case at this stage. I will be repopulating the content for the POST body and only need to change a couple of the values, so really just looking for something super easy for now - Especially since I'm still trying to learn svelt.

Really just to hook a button up to the div content and have it sent to fetch.

[3goats]

Arh - I can see the screenshot is an example. I will take a look now.

[metonym]

Code editor: https://github.com/carbon-design-system/sveld/blob/main/playground/CodeEditor.svelte Code highlighter: https://github.com/carbon-design-system/sveld/blob/main/playground/CodeHighlighter.svelte

[3goats]

Excellent. Thanks again. Is there a way to easily hook these up to the input and output of fetch ? i.e. Have the content of the editor sent as a POST and then hi-light the response.

[3goats]

Is there a way to use/access svelte-highlight from within the

[metonym]

No – you would have to use the highlight.js API directly.

https://github.com/metonym/svelte-highlight/blob/c29cf2010a235749defdff6408bb82a6c51ffd72/src/Highlight.svelte#L80-L81