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