{"id":27125975,"url":"https://github.com/thurti/svelte-prism-action","last_synced_at":"2025-04-07T15:57:57.265Z","repository":{"id":57375317,"uuid":"319329865","full_name":"thurti/svelte-prism-action","owner":"thurti","description":"Svelte action for lazy render code blocks with prism.js.","archived":false,"fork":false,"pushed_at":"2024-04-18T12:27:15.000Z","size":844,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-18T07:04:28.880Z","etag":null,"topics":["acton","prismjs","svelte"],"latest_commit_sha":null,"homepage":"https://thurti.github.io/svelte-prism-action/public","language":"JavaScript","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/thurti.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-12-07T13:33:48.000Z","updated_at":"2023-03-15T16:35:12.000Z","dependencies_parsed_at":"2024-05-02T01:16:18.430Z","dependency_job_id":null,"html_url":"https://github.com/thurti/svelte-prism-action","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thurti%2Fsvelte-prism-action","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thurti%2Fsvelte-prism-action/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thurti%2Fsvelte-prism-action/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thurti%2Fsvelte-prism-action/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thurti","download_url":"https://codeload.github.com/thurti/svelte-prism-action/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247685625,"owners_count":20979085,"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":["acton","prismjs","svelte"],"created_at":"2025-04-07T15:57:56.657Z","updated_at":"2025-04-07T15:57:57.255Z","avatar_url":"https://github.com/thurti.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![NPM Version](https://img.shields.io/npm/v/svelte-prism-action?style=flat\u0026color=green)](https://www.npmjs.com/package/svelte-prism-action)\n\n# svelte-prism-action\n\n[Svelte](https://svelte.dev) action for **lazy loading** [Prism.js](https://prismjs.com) code highlighting languages from remote or local path.\n\n## Example\n\n\u003cbig\u003e\u003ca href=\"https://thurti.github.io/svelte-prism-action/public\"\u003eExample Page\u003c/a\u003e\u003c/big\u003e\n\nThe action uses IntersectionObserver to dynamically render code highlighting. The prism.js language file is lazy loaded when the `\u003ccode\u003e` element gets visible in the viewport.\n\n## Installation\n\n`$ npm install svelte-prism-action`\n\nInclude a Prism.js CSS theme in your svelte component or use the `\u003chead\u003e` section of your `index.html`.\n\n```html\n\u003clink\n  href=\"https://unpkg.com/prismjs@1.22.0/themes/prism.css\"\n  rel=\"stylesheet\"\n/\u003e\n```\n\n## Usage\n\nImport `prism` from `svelte-prism-action`. Add the action to a component with `use:prism`. All `\u003ccode\u003e` elements with a `class=\"language-...\"` will get highlighted once they have entered the viewport.\n\nFor available language tags see https://prismjs.com/#supported-languages .\n\n**HINT** If you are writing your codeblocks directly into a svelte component you need to **escape special characters** (eg. curley brackets). Another way is to wrap the code inside ` {``} `.\n\n```html\n\u003cscript\u003e\n  import { prism } from \"svelte-prism-action\";\n\u003c/script\u003e\n\n\u003c!-- add action to component --\u003e\n\u003cmain use:prism\u003e\n  \u003c!-- or set some options\n  \u003cmain use:prism={{\n    componentsUrl: \"https://myPathToPrism/components\"\n  }}\u003e\n--\u003e\n\n  \u003c!-- use in code blocks --\u003e\n  \u003cpre\u003e\n    \u003ccode class=\"lang-css\"\u003e{` \u003c!-- wrap inside {``} if using inside svelte component--\u003e\n      .bg-gold{\n        background: gold;\n      }\n    `}\n    \u003c/code\u003e\n  \u003c/pre\u003e\n\n  \u003c!-- use inline --\u003e\n  \u003ccode class=\"lang-javascript\"\n    \u003e{`import {prism} from \"svelte-prism-action\";`}\u003c/code\n  \u003e\n\u003c/main\u003e\n```\n\n## Options\n\nYou can use `componentsUrl` to set the URL from where to import the Prism.js language files. By default it uses [unpkg cdn](https://unpkg.com), but you can use a local resource instead.\n\nTo lazy load **third party language** files (eg. `prism-svelte`) or define a different file per language you can use `thirdPartyUrls` object with language `id` as key and the URL as the value.\n\nYou can also change the IntersectionObserver options. For more information on what they do see https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Interfaces .\n\n```html\n\u003cmain use:prism={{\n  root: null,\n  rootMargin: \"100px\",\n  threshold: 0,\n  componentsUrl: \"https://unpkg.com/prismjs@1.22.0/components\",\n  thirdPartyUrls: {\n    svelte: \"https://cdn.jsdelivr.net/npm/prism-svelte@0.5.0/index.js\"\n  }\n}}\u003e\n...\n\u003c/main\u003e\n```\n\n## Changelog\n\n### 1.1.3 (2024-04-17)\n\n- Add: Typescript support (generated types from JSDoc)\n- make svelte a peer dependency and version less restrictive (because should work with svelte version \u003e= 3)\n\n### 1.1.2 (2023-03-16)\n\n- Fix: highlight fails when `prism-markup.js` import not finished\n\n### 1.1.1 (2023-03-15)\n\n- Fix: SvelteKit error while loading prism-markup.js\n\n### 1.1.0 (2023-03-15)\n\n- Add: support for third party language files\n- Updated dependencies\n\n### 1.0.7 (2021-06-10)\n\n- Fix #1: SvelteKit support. Fixed vite compile errors and added `/* @vite-ignore */` to dynamic `import()`.\n\n### 1.0.6 (2021-03-19)\n\n- Updated dependencies\n\n### 1.0.5 (2020-12-09)\n\n- Add: use custom build `components.js` to reduce package file size\n- updated dev dependencies\n- replaced custom language loader with prism.js builtin loader\n\n### 1.0.4 (2020-12-08)\n\n- Fix: error if language dependency has dependency on its own\n\n### 1.0.3 (2020-12-08)\n\n- Fix: error if markdown additional languages is null\n\n### 1.0.2 (2020-12-08)\n\n- Add: import languages from markdown code blocks\n- Fix: loading languages with dependencies (eg. markdown) leads to error\n\n### 1.0.1\n\n- added .npmignore\n\n### 1.0.0 (2020-12-04)\n\n- initial release\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthurti%2Fsvelte-prism-action","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthurti%2Fsvelte-prism-action","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthurti%2Fsvelte-prism-action/lists"}