{"id":16227342,"url":"https://github.com/novacbn/svelte-codejar","last_synced_at":"2025-10-15T20:10:11.149Z","repository":{"id":43367499,"uuid":"317436078","full_name":"novacbn/svelte-codejar","owner":"novacbn","description":"Svelte Binding for the embeddable code editor CodeJar","archived":false,"fork":false,"pushed_at":"2022-03-05T09:49:55.000Z","size":721,"stargazers_count":23,"open_issues_count":2,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-08T20:25:10.633Z","etag":null,"topics":["code-editor","codejar","svelte","svelte-components"],"latest_commit_sha":null,"homepage":"https://novacbn.github.io/svelte-codejar","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/novacbn.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-12-01T05:37:32.000Z","updated_at":"2024-06-22T20:23:12.000Z","dependencies_parsed_at":"2022-07-10T17:02:39.132Z","dependency_job_id":null,"html_url":"https://github.com/novacbn/svelte-codejar","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/novacbn/svelte-codejar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/novacbn%2Fsvelte-codejar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/novacbn%2Fsvelte-codejar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/novacbn%2Fsvelte-codejar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/novacbn%2Fsvelte-codejar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/novacbn","download_url":"https://codeload.github.com/novacbn/svelte-codejar/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/novacbn%2Fsvelte-codejar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279110684,"owners_count":26105907,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-15T02:00:07.814Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code-editor","codejar","svelte","svelte-components"],"created_at":"2024-10-10T12:52:29.025Z","updated_at":"2025-10-15T20:10:11.102Z","avatar_url":"https://github.com/novacbn.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `svelte-codejar`\n\n## Description\n\nSvelte Binding for the embeddable code editor CodeJar\n\n## Demo\n\nSee a demo at [novacbn.github.io/svelte-codejar/demo](https://novacbn.github.io/svelte-codejar/demo)\n\n## Sample\n\n```html\n\u003cscript\u003e\n    import {CodeJar} from \"@novacbn/svelte-codejar\";\n\n    let value = `console.log(\"Hello World!\");`;\n\u003c/script\u003e\n\n\u003c!--\n    `CodeJar` options with their defaults\n    See more information at: https://github.com/antonmedv/codejar#getting-started\n--\u003e\n\n\u003c!--\n    **NOTE**: Syntax highlighting is optional and must be provided by you. See the\n    sample below on how to use it\n\n    **NOTE2**: When setting `CodeJar.tab`, if you're using escape characters such\n    as `\\t`, you need encapsulate it as a raw string (see below). Otherwise the Svelte\n    compiler will escape the value when it parses your code\n--\u003e\n\n\u003cCodeJar addClosing={true} indentOn={/{$/} spellcheck={false} tab={\"\\t\"} bind:value /\u003e\n```\n\n## Syntax Highlighting\n\n### highlight.js\n\n\u003e **NOTE**: The sample below uses [highlight.js](https://highlightjs.org/), see the link for more information.\n\n```html\n\u003cscript context=\"module\"\u003e\n    // We need to configure highlight.js for Javascript, and then alias the\n    // exports to match the function signatures that `CodeJar` Component expects\n    import hljs from \"highlight.js/lib/core\";\n    import javascript from \"highlight.js/lib/languages/javascript\";\n\n    hljs.registerLanguage(\"javascript\", javascript);\n\n    // `highlight` takes the input code and returns the highlighted HTML markup\n    const highlight = (code, syntax) =\u003e\n        hljs.highlight(code, {\n            language: syntax,\n        }).value;\n\u003c/script\u003e\n\n\u003cscript\u003e\n    import {CodeJar} from \"@novacbn/svelte-codejar\";\n\n    let value = `console.log(\"Hello World!\");`;\n\u003c/script\u003e\n\n\u003c!--\n    Now we pass `CodeJar` our syntax highlighting functions along with the\n    language syntax used for highlighting\n\n    We also need to pass the `hljs` class so highlight.js knows which element\n    to style\n--\u003e\n\n\u003cCodeJar class=\"hljs\" syntax=\"javascript\" {highlight} {value} /\u003e\n```\n\n### PrismJS\n\n\u003e **NOTE**: The code is the same as above, but with [PrismJS](https://prismjs.com/) calls instead of highlight.js\n\n```html\n\u003cscript context=\"module\"\u003e\n    import Prism from \"prismjs\";\n\n    const highlight = (code, syntax) =\u003e Prism.highlight(code, Prism.languages[syntax], syntax);\n\u003c/script\u003e\n\n\u003cscript\u003e\n    import {CodeJar} from \"@novacbn/svelte-codejar\";\n\n    let value = `console.log(\"Hello World!\");`;\n\u003c/script\u003e\n\n\u003cCodeJar syntax=\"javascript\" {highlight} {value} /\u003e\n```\n\n## FAQ\n\n### SvelteKit — `ReferenceError: window is not defined`\n\nWhen using the library with [SvelteKit](https://kit.svelte.dev) with SSR (serverside rendering) enabled you might get this error:\n\n```\n[vite] Error when evaluating SSR module /node_modules/codejar/codejar.js?v=4f67a3d5:\nReferenceError: window is not defined\n```\n\nNothing much can do about that, CodeJar [makes a `window` assignment](https://github.com/antonmedv/codejar/blob/b037e29b6565269a2f797e62f51966d77cdf3978/codejar.ts#L1) in its module scope. However you can do a workaround via [`onMount`](https://svelte.dev/docs#onMount) or other similar workflows:\n\n```html\n\u003cscript\u003e\n    import {onMount} from \"@novacbn/svelte-codejar\";\n\n    export let value = \"\";\n\n    // **NOTE:** Since `onMount` is only called on the client, we can just\n    // make our import there. And assign to our Component's scope\n    let CodeJar;\n    onMount(async () =\u003e {\n        ({CodeJar} = await import(\"@novacbn/svelte-codejar\"));\n    });\n\u003c/script\u003e\n\n{#if CodeJar}\n\u003cCodeJar bind:value /\u003e\n{:else}\n\u003c!--\n    **NOTE:** Normally the `CodeJar` Svelte handles fall through for us, and\n    renders / syntax highlights without an editor during SSR / non-JS enabled clients\n--\u003e\n\u003cpre\u003e\u003ccode\u003e{value}\u003c/code\u003e\u003c/pre\u003e\n{/if}\n```\n\nOnly downside being you have to manually syntax highlight your code in the `{:else}` block for SSR / non-JS enabled clients.\n\n## Developer\n\n### Installation\n\nOpen your terminal and install via `npm`:\n\n```bash\nnpm install @novacbn/svelte-codejar\n```\n\n### Properties\n\n| Name       | Typing                                      | Default     | Description                                                                                                          |\n| ---------- | ------------------------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------- |\n| addClosing | `boolean`                                   | `true`      | Sets whether the Editor automatically adds closing delimiters, like brackets, quotes, etc...                         |\n| indentOn   | `RegExp`                                    | `/{$/`      | Represents what expression is used to detect when the Editor needs to auto indent with the configured tab characters |\n| spellcheck | `boolean`                                   | `false`     | Sets whether to enable the Browser's spellcheck or not                                                               |\n| tab        | `string`                                    | `\\t`        | Sets the characters inserted whenever the end-user pressed the tab key                                               |\n| highlight  | `(code: string, syntax?: string) =\u003e string` | `null`      | Callback is called to highlight the current code and return the rendered HTML markup                                 |\n| syntax     | `string`                                    | `undefined` | Sets the current language mode of the Editor                                                                         |\n| value      | `string`                                    | `\"\"`        | Sets the current text of the Editor                                                                                  |\n| class      | `string`                                    | `\"\"`        | Applies `class=\"\"` to the `\u003cpre\u003e` container element                                                                  |\n| style      | `string`                                    | `undefined` | Applies `style=\"\"` to the `\u003cpre\u003e` container element                                                                  |\n\n### Events\n\n| Name     | Typing                         | Description                                   |\n| -------- | ------------------------------ | --------------------------------------------- |\n| `change` | `CustomEvent\u003c{value: string}\u003e` | Fires whenever the end-user changes the input |\n\n### API\n\n-   Components\n\n    -   `CodeJar`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnovacbn%2Fsvelte-codejar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnovacbn%2Fsvelte-codejar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnovacbn%2Fsvelte-codejar/lists"}