svelte-codejar

Description

Svelte Binding for the embeddable code editor CodeJar

Demo

See a demo at novacbn.github.io/svelte-codejar/demo

Sample

<script>
    import {CodeJar} from "@novacbn/svelte-codejar";

    let value = `console.log("Hello World!");`;
</script>

<!--
    `CodeJar` options with their defaults
    See more information at: https://github.com/antonmedv/codejar#getting-started
-->

<!--
    **NOTE**: Syntax highlighting is optional and must be provided by you. See the
    sample below on how to use it

    **NOTE2**: When setting `CodeJar.tab`, if you're using escape characters such
    as `\t`, you need encapsulate it as a raw string (see below). Otherwise the Svelte
    compiler will escape the value when it parses your code
-->

<CodeJar addClosing={true} indentOn={/{$/} spellcheck={false} tab={"\t"} bind:value />

Syntax Highlighting

highlight.js

NOTE: The sample below uses highlight.js, see the link for more information.

<script context="module">
    // We need to configure highlight.js for Javascript, and then alias the
    // exports to match the function signatures that `CodeJar` Component expects
    import hljs from "highlight.js/lib/core";
    import javascript from "highlight.js/lib/languages/javascript";

    hljs.registerLanguage("javascript", javascript);

    // `highlight` takes the input code and returns the highlighted HTML markup
    const highlight = (code, syntax) =>
        hljs.highlight(code, {
            language: syntax,
        }).value;
</script>

<script>
    import {CodeJar} from "@novacbn/svelte-codejar";

    let value = `console.log("Hello World!");`;
</script>

<!--
    Now we pass `CodeJar` our syntax highlighting functions along with the
    language syntax used for highlighting

    We also need to pass the `hljs` class so highlight.js knows which element
    to style
-->

<CodeJar class="hljs" syntax="javascript" {highlight} {value} />

PrismJS

NOTE: The code is the same as above, but with PrismJS calls instead of highlight.js

<script context="module">
    import Prism from "prismjs";

    const highlight = (code, syntax) => Prism.highlight(code, Prism.languages[syntax], syntax);
</script>

<script>
    import {CodeJar} from "@novacbn/svelte-codejar";

    let value = `console.log("Hello World!");`;
</script>

<CodeJar syntax="javascript" {highlight} {value} />

FAQ

SvelteKit — ReferenceError: window is not defined

When using the library with SvelteKit with SSR (serverside rendering) enabled you might get this error:

[vite] Error when evaluating SSR module /node_modules/codejar/codejar.js?v=4f67a3d5:
ReferenceError: window is not defined

Nothing much can do about that, CodeJar makes a window assignment in its module scope. However you can do a workaround via onMount or other similar workflows:

<script>
    import {onMount} from "@novacbn/svelte-codejar";

    export let value = "";

    // **NOTE:** Since `onMount` is only called on the client, we can just
    // make our import there. And assign to our Component's scope
    let CodeJar;
    onMount(async () => {
        ({CodeJar} = await import("@novacbn/svelte-codejar"));
    });
</script>

{#if CodeJar}
<CodeJar bind:value />
{:else}
<!--
    **NOTE:** Normally the `CodeJar` Svelte handles fall through for us, and
    renders / syntax highlights without an editor during SSR / non-JS enabled clients
-->
<pre><code>{value}</code></pre>
{/if}

Only downside being you have to manually syntax highlight your code in the {:else} block for SSR / non-JS enabled clients.

Developer

Installation

Open your terminal and install via npm:

npm install @novacbn/svelte-codejar

Properties

| Name | Typing | Default | Description | | ---------- | ------------------------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------- | | addClosing | boolean | true | Sets whether the Editor automatically adds closing delimiters, like brackets, quotes, etc... | | indentOn | RegExp | /{$/ | Represents what expression is used to detect when the Editor needs to auto indent with the configured tab characters | | spellcheck | boolean | false | Sets whether to enable the Browser's spellcheck or not | | tab | string | \t | Sets the characters inserted whenever the end-user pressed the tab key | | highlight | (code: string, syntax?: string) => string | null | Callback is called to highlight the current code and return the rendered HTML markup | | syntax | string | undefined | Sets the current language mode of the Editor | | value | string | "" | Sets the current text of the Editor | | class | string | "" | Applies class="" to the <pre> container element | | style | string | undefined | Applies style="" to the <pre> container element |

Events

| Name | Typing | Description | | -------- | ------------------------------ | --------------------------------------------- | | change | CustomEvent<{value: string}> | Fires whenever the end-user changes the input |

API

• Components

  • CodeJar