{"id":16791989,"url":"https://github.com/metonym/svelte-highlight","last_synced_at":"2025-05-15T04:04:26.576Z","repository":{"id":38866240,"uuid":"220710556","full_name":"metonym/svelte-highlight","owner":"metonym","description":"Syntax Highlighting for Svelte using highlight.js","archived":false,"fork":false,"pushed_at":"2025-05-09T20:26:38.000Z","size":8221,"stargazers_count":292,"open_issues_count":15,"forks_count":14,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-09T21:27:25.793Z","etag":null,"topics":["code","highlight","highlight-js","svelte","svelte-component","syntax","syntax-highlighting","typescript"],"latest_commit_sha":null,"homepage":"https://svhe.onrender.com","language":"Svelte","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/metonym.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":"SUPPORTED_LANGUAGES.md","governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-11-09T22:15:10.000Z","updated_at":"2025-05-09T20:26:41.000Z","dependencies_parsed_at":"2023-11-22T17:31:06.813Z","dependency_job_id":"b3308233-ed7d-43b2-a256-a0bd0458b636","html_url":"https://github.com/metonym/svelte-highlight","commit_stats":{"total_commits":609,"total_committers":5,"mean_commits":121.8,"dds":"0.20853858784893264","last_synced_commit":"99db12170557eae29b1924522a378fda3d44f4c5"},"previous_names":[],"tags_count":76,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metonym%2Fsvelte-highlight","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metonym%2Fsvelte-highlight/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metonym%2Fsvelte-highlight/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metonym%2Fsvelte-highlight/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/metonym","download_url":"https://codeload.github.com/metonym/svelte-highlight/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254270641,"owners_count":22042858,"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","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","highlight","highlight-js","svelte","svelte-component","syntax","syntax-highlighting","typescript"],"created_at":"2024-10-13T08:43:46.437Z","updated_at":"2025-05-15T04:04:26.463Z","avatar_url":"https://github.com/metonym.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-highlight\n\n[![NPM][npm]][npm-url]\n![npm](https://img.shields.io/npm/dt/svelte-highlight?color=ff3e00\u0026style=for-the-badge)\n\n\u003e Syntax highlighting for Svelte using [highlight.js](https://github.com/highlightjs/highlight.js).\n\nTry it in the [Svelte REPL](https://svelte.dev/playground/535d6bf354da499389140dbfcb12004f) or [StackBlitz](https://stackblitz.com/edit/svelte-highlight?file=src%2Froutes%2Findex.svelte).\n\n## [Documentation](https://svhe.onrender.com)\n\nThe Changelog is [available on GitHub](https://github.com/metonym/svelte-highlight/blob/master/CHANGELOG.md).\n\n## Installation\n\n```bash\n# npm\nnpm i svelte-highlight\n\n# pnpm\npnpm i svelte-highlight\n\n# Bun\nbun i svelte-highlight\n\n# Yarn\nyarn add svelte-highlight\n```\n\n## Basic Usage\n\nThe `Highlight` component requires two props:\n\n- `code`: text to highlight\n- `language`: language grammar used to highlight the text\n\nImport languages from `svelte-highlight/languages`.\n\nSee [SUPPORTED_LANGUAGES.md](SUPPORTED_LANGUAGES.md) for a list of supported languages.\n\n```svelte\n\u003cscript\u003e\n  import Highlight from \"svelte-highlight\";\n  import typescript from \"svelte-highlight/languages/typescript\";\n\n  const code = \"const add = (a: number, b: number) =\u003e a + b;\";\n\u003c/script\u003e\n\n\u003cHighlight language={typescript} {code} /\u003e\n```\n\n## Styling\n\nImport styles from `svelte-highlight/styles`. See [SUPPORTED_STYLES.md](SUPPORTED_STYLES.md) for a list of supported styles.\n\nThere are two ways to apply `highlight.js` styles.\n\n1. Injected styles through [svelte:head](https://svelte.dev/docs#template-syntax-svelte-head)\n2. CSS StyleSheets\n\n### Injected Styles\n\nThis component exports `highlight.js` themes in JavaScript. Import the theme from `svelte-highlight/styles` and inject it using the [svelte:head](https://svelte.dev/docs#svelte_head) API.\n\n```svelte\n\u003cscript\u003e\n  import Highlight from \"svelte-highlight\";\n  import typescript from \"svelte-highlight/languages/typescript\";\n  import github from \"svelte-highlight/styles/github\";\n\n  const code = \"const add = (a: number, b: number) =\u003e a + b;\";\n\u003c/script\u003e\n\n\u003csvelte:head\u003e\n  {@html github}\n\u003c/svelte:head\u003e\n\n\u003cHighlight language={typescript} {code} /\u003e\n```\n\n### CSS StyleSheet\n\nDepending on your set-up, importing a CSS StyleSheet in Svelte may require a CSS file loader. SvelteKit/Vite automatically supports this. For Webpack, refer to [examples/webpack](examples/webpack).\n\n```svelte\n\u003cscript\u003e\n  import { Highlight } from \"svelte-highlight\";\n  import typescript from \"svelte-highlight/languages/typescript\";\n  import \"svelte-highlight/styles/github.css\";\n\n  const code = \"const add = (a: number, b: number) =\u003e a + b;\";\n\u003c/script\u003e\n\n\u003cHighlight language={typescript} {code} /\u003e\n```\n\n#### Linking from a CDN\n\nCSS StyleSheets can also be externally linked from a Content Delivery Network (CDN) like [unpkg.com](https://unpkg.com/).\n\n\u003e [!WARNING]\n\u003e Using a CDN is best suited for prototyping and not recommended for production use.\n\n**HTML**\n\n```html\n\u003chead\u003e\n  \u003clink\n    rel=\"stylesheet\"\n    href=\"https://unpkg.com/svelte-highlight/styles/github.css\"\n  /\u003e\n\u003c/head\u003e\n```\n\n**svelte:head**\n\n```svelte\n\u003csvelte:head\u003e\n  \u003clink\n    rel=\"stylesheet\"\n    href=\"https://unpkg.com/svelte-highlight/styles/github.css\"\n  /\u003e\n\u003c/svelte:head\u003e\n```\n\n## Svelte Syntax Highlighting\n\nUse the `HighlightSvelte` component for Svelte syntax highlighting.\n\n```svelte\n\u003cscript\u003e\n  import { HighlightSvelte } from \"svelte-highlight\";\n  import github from \"svelte-highlight/styles/github\";\n\n  const code = `\u003cbutton on:click={() =\u003e { console.log(0); }}\u003eIncrement {count}\u003c/button\u003e`;\n\u003c/script\u003e\n\n\u003csvelte:head\u003e\n  {@html github}\n\u003c/svelte:head\u003e\n\n\u003cHighlightSvelte {code} /\u003e\n```\n\n## Auto-highlighting\n\nThe `HighlightAuto` component uses the [highlightAuto API](https://highlightjs.readthedocs.io/en/latest/api.html#highlightauto) and attempts to guess what grammar to use based on the provided `code`.\n\n\u003e [!WARNING]\n\u003e Auto-highlighting will result in a larger bundle size. Specify a language if possible.\n\n```svelte\n\u003cscript\u003e\n  import { HighlightAuto } from \"svelte-highlight\";\n  import github from \"svelte-highlight/styles/github\";\n\n  const code = `body {\\n  padding: 0;\\n  color: red;\\n}`;\n\u003c/script\u003e\n\n\u003csvelte:head\u003e\n  {@html github}\n\u003c/svelte:head\u003e\n\n\u003cHighlightAuto {code} /\u003e\n```\n\n## Line Numbers\n\nUse the `LineNumbers` component to render the highlighted code with line numbers.\n\n```svelte\n\u003cscript\u003e\n  import Highlight, { LineNumbers } from \"svelte-highlight\";\n  import typescript from \"svelte-highlight/languages/typescript\";\n  import atomOneDark from \"svelte-highlight/styles/atom-one-dark\";\n\n  const code = \"const add = (a: number, b: number) =\u003e a + b\";\n\u003c/script\u003e\n\n\u003csvelte:head\u003e\n  {@html atomOneDark}\n\u003c/svelte:head\u003e\n\n\u003cHighlight language={typescript} {code} let:highlighted\u003e\n  \u003cLineNumbers {highlighted} /\u003e\n\u003c/Highlight\u003e\n```\n\n### Hidden Border\n\nSet `hideBorder` to `true` to hide the border of the line numbers column.\n\n```svelte\n\u003cHighlight language={typescript} {code} let:highlighted\u003e\n  \u003cLineNumbers {highlighted} hideBorder /\u003e\n\u003c/Highlight\u003e\n```\n\n### Wrapped Lines\n\nBy default, overflowing horizontal content is contained by a scrollbar.\n\nSet `wrapLines` to `true` to hide the border of the line numbers column.\n\n```svelte\n\u003cHighlight language={typescript} {code} let:highlighted\u003e\n  \u003cLineNumbers {highlighted} wrapLines /\u003e\n\u003c/Highlight\u003e\n```\n\n### Custom Starting Line Number\n\nThe line number starts at `1`. Customize this via the `startingLineNumber` prop.\n\n```svelte\n\u003cHighlight language={typescript} {code} let:highlighted\u003e\n  \u003cLineNumbers {highlighted} startingLineNumber={42} /\u003e\n\u003c/Highlight\u003e\n```\n\n### Highlighted Lines\n\nSpecify the lines to highlight using the `highlightedLines` prop. Indices start at zero.\n\nUse `--highlighted-background` to customize the background color of highlighted lines.\n\n```svelte\n\u003cHighlight language={typescript} {code} let:highlighted\u003e\n  \u003cLineNumbers\n    {highlighted}\n    highlightedLines={[0, 2, 3, 14]}\n    --highlighted-background=\"#000\"\n  /\u003e\n\u003c/Highlight\u003e\n```\n\n### Custom Styles\n\nUse `--style-props` to customize styles.\n\n| Style prop               | Description                                | Default value             |\n| :----------------------- | :----------------------------------------- | :------------------------ |\n| --line-number-color      | Text color of the line numbers             | `currentColor`            |\n| --border-color           | Border color of the column of line numbers | `currentColor`            |\n| --padding-left           | Left padding for `td` elements             | `1em`                     |\n| --padding-right          | Right padding for `td` elements            | `1em`                     |\n| --highlighted-background | Background color of highlighted lines      | `rgba(254, 241, 96, 0.2)` |\n\n```svelte\n\u003cHighlight language={typescript} {code} let:highlighted\u003e\n  \u003cLineNumbers\n    {highlighted}\n    --line-number-color=\"pink\"\n    --border-color=\"rgba(255, 255, 255, 0.2)\"\n    --padding-left={0}\n    --padding-right=\"3em\"\n    --highlighted-background=\"#000\"\n  /\u003e\n\u003c/Highlight\u003e\n```\n\n## Language Targeting\n\nAll `Highlight` components apply a `data-language` attribute on the codeblock containing the language name.\n\nSee [SUPPORTED_LANGUAGES.md](SUPPORTED_LANGUAGES.md) for a list of supported languages.\n\n```css\n[data-language=\"css\"] {\n  /* custom style rules */\n}\n```\n\n## Language Tags\n\nSet `langtag` to `true` to display the language name in the top right corner of the code block.\n\nCustomize the language tag `background`, `color`, and `border-radius` using style props.\n\nSee the [Languages page](SUPPORTED_LANGUAGES.md) for a list of supported languages.\n\n| Style prop              | Description                     | Default value |\n| :---------------------- | :------------------------------ | :------------ |\n| --langtag-top           | Top position of the langtag     | `0`           |\n| --langtag-right         | Right position of the langtag   | `0`           |\n| --langtag-background    | Background color of the langtag | `inherit`     |\n| --langtag-color         | Text color of the langtag       | `inherit`     |\n| --langtag-border-radius | Border radius of the langtag    | `0`           |\n| --langtag-padding       | Padding of the langtag          | `1em`         |\n\n```svelte\n\u003cscript\u003e\n  import { HighlightAuto } from \"svelte-highlight\";\n\n  $: code = `.body { padding: 0; margin: 0; }`;\n\u003c/script\u003e\n\n\u003cHighlightAuto {code} langtag /\u003e\n```\n\n```svelte\n\u003cHighlightAuto\n  {code}\n  langtag\n  --langtag-background=\"linear-gradient(135deg, #2996cf, 80%, white)\"\n  --langtag-color=\"#fff\"\n  --langtag-border-radius=\"6px\"\n  --langtag-padding=\"0.5rem\"\n/\u003e\n```\n\n## Custom Language\n\nFor custom language highlighting, pass a `name` and `register` function to the language prop.\n\nRefer to the highlight.js [language definition guide](https://highlightjs.readthedocs.io/en/latest/language-guide.html) for guidance.\n\n```svelte\n\u003cscript\u003e\n  import { Highlight } from \"svelte-highlight\";\n  import hljs from \"highlight.js\";\n\n  const language = {\n    name: \"custom-language\",\n    register: (hljs) =\u003e {\n      return {\n        /** custom language rules */\n        contains: [],\n      };\n    },\n  };\n\u003c/script\u003e\n\n\u003cHighlight {language} code=\"...\" /\u003e\n```\n\n## Custom Plugin\n\nAdditional plugin languages can be installed and used separately.\n\nThis example uses the [`cURL` language plugin](https://github.com/highlightjs/highlightjs-curl).\n\n```svelte\n\u003cscript\u003e\n  import { Highlight } from \"svelte-highlight\";\n  import curl from \"highlightjs-curl\";\n  import github from \"svelte-highlight/styles/github\";\n\n  const language = {\n    name: \"curl\", // Language name displayed in the langtag\n    register: curl,\n  };\n\n  const code = `curl -X POST \"https://api.example.com/data\" \\\\\n     -H \"Content-Type: application/json\" \\\\\n     -d '{\"key\": \"value\"}'`;\n\u003c/script\u003e\n\n\u003csvelte:head\u003e\n  {@html github}\n\u003c/svelte:head\u003e\n\n\u003cHighlight {language} {code} /\u003e\n```\n\n## Code-splitting\n\nYou can use the `await import` syntax for code-splitting.\n\nIn the example below, the `HighlightAuto` component and injected styles are dynamically loaded.\n\n```svelte\n\u003cscript\u003e\n  import { onMount } from \"svelte\";\n\n  let component;\n  let styles;\n\n  onMount(async () =\u003e {\n    component = (await import(\"svelte-highlight\")).HighlightAuto;\n    styles = (await import(\"svelte-highlight/styles/github\")).default;\n  });\n\u003c/script\u003e\n\n\u003csvelte:head\u003e\n  {#if styles}\n    {@html styles}\n  {/if}\n\u003c/svelte:head\u003e\n\n\u003csvelte:component\n  this={component}\n  langtag\n  code={`body {\\n  padding: 0;\\n  color: red;\\n}`}\n/\u003e\n```\n\n## Component API\n\n### `Highlight`\n\n#### Props\n\n| Name     | Type                                           | Default value  |\n| :------- | :--------------------------------------------- | :------------- |\n| code     | `any`                                          | N/A (required) |\n| language | { name: `string`; register: hljs =\u003e `object` } | N/A (required) |\n| langtag  | `boolean`                                      | `false`        |\n\n`$$restProps` are forwarded to the top-level `pre` element.\n\n#### Dispatched Events\n\n- **on:highlight**: fired after `code` is highlighted\n\n```svelte\n\u003cHighlight\n  language={typescript}\n  {code}\n  on:highlight={(e) =\u003e {\n    /**\n     * The highlighted HTML as a string.\n     * @example \"\u003cspan\u003e...\u003c/span\u003e\"\n     */\n    console.log(e.detail.highlighted);\n  }}\n/\u003e\n```\n\n### `LineNumbers`\n\n#### Props\n\n| Name               | Type       | Default value  |\n| :----------------- | :--------- | :------------- |\n| highlighted        | `string`   | N/A (required) |\n| hideBorder         | `boolean`  | `false`        |\n| wrapLines          | `boolean`  | `false`        |\n| startingLineNumber | `number`   | `1`            |\n| highlightedLines   | `number[]` | `[]`           |\n\n`$$restProps` are forwarded to the top-level `div` element.\n\n### `HighlightSvelte`\n\n#### Props\n\n| Name    | Type      | Default value  |\n| :------ | :-------- | :------------- |\n| code    | `any`     | N/A (required) |\n| langtag | `boolean` | `false`        |\n\n`$$restProps` are forwarded to the top-level `pre` element.\n\n#### Dispatched Events\n\n- **on:highlight**: fired after `code` is highlighted\n\n```svelte\n\u003cHighlightSvelte\n  {code}\n  on:highlight={(e) =\u003e {\n    /**\n     * The highlighted HTML as a string.\n     * @example \"\u003cspan\u003e...\u003c/span\u003e\"\n     */\n    console.log(e.detail.highlighted);\n  }}\n/\u003e\n```\n\n### `HighlightAuto`\n\n#### Props\n\n| Name    | Type      | Default value  |\n| :------ | :-------- | :------------- |\n| code    | `any`     | N/A (required) |\n| langtag | `boolean` | `false`        |\n\n`$$restProps` are forwarded to the top-level `pre` element.\n\n#### Dispatched Events\n\n- **on:highlight**: fired after `code` is highlighted\n\n```svelte\n\u003cHighlightAuto\n  {code}\n  on:highlight={(e) =\u003e {\n    /**\n     * The highlighted HTML as a string.\n     * @example \"\u003cspan\u003e...\u003c/span\u003e\"\n     */\n    console.log(e.detail.highlighted);\n\n    /**\n     * The inferred language name\n     * @example \"css\"\n     */\n    console.log(e.detail.language);\n  }}\n/\u003e\n```\n\n## [Supported Languages](SUPPORTED_LANGUAGES.md)\n\n## [Supported Styles](SUPPORTED_STYLES.md)\n\n## Examples\n\nBy default, example set-ups use Svelte 5. The exception is `examples/vite@svelte-4`, which uses Svelte 4.\n\n- [examples/rollup](examples/rollup)\n- [examples/routify](examples/routify)\n- [examples/sveltekit](examples/sveltekit)\n- [examples/vite](examples/vite)\n- [examples/vite@svelte-4](examples/vite@svelte-4)\n- [examples/webpack](examples/webpack)\n\n## [Changelog](CHANGELOG.md)\n\n## License\n\n[MIT](LICENSE)\n\n[npm]: https://img.shields.io/npm/v/svelte-highlight.svg?style=for-the-badge\u0026color=%23ff3e00\n[npm-url]: https://npmjs.com/package/svelte-highlight\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetonym%2Fsvelte-highlight","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmetonym%2Fsvelte-highlight","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetonym%2Fsvelte-highlight/lists"}