├── .github
    └── workflows
    │   └── main.yml
├── .gitignore
├── CHANGELOG.md
├── README.md
├── package-lock.json
├── package.json
└── src
    ├── Prism.d.ts
    ├── Prism.svelte
    ├── beforeImport.js
    └── import.js


/.github/workflows/main.yml:
--------------------------------------------------------------------------------
 1 | 
 2 | # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
 3 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 4 | 
 5 | name: Node.js CI
 6 | 
 7 | on:
 8 |   ['push']
 9 | 
10 | jobs:
11 |   publish:
12 | 
13 |     runs-on: ubuntu-latest
14 |   
15 |     steps:
16 |     - uses: actions/checkout@v2
17 |     - uses: cycjimmy/semantic-release-action@v2.3.0
18 |     
19 |       env:
20 |         GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
21 |         NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
22 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | public/bundle.*
4 | .history


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Changelog
 2 | 
 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 4 | 
 5 | ### [1.1.6](https://github.com/jakobrosenberg/svelte-prism/compare/v1.1.5...v1.1.6) (2022-07-23)
 6 | 
 7 | 
 8 | ### Bug Fixes
 9 | 
10 | * safe window check for ssr ([#35](https://github.com/jakobrosenberg/svelte-prism/issues/35)) ([5f6ab7e](https://github.com/jakobrosenberg/svelte-prism/commit/5f6ab7e4c128c1564af41e4af20583566bbc4457))
11 | 
12 | ### [1.1.5](https://github.com/jakobrosenberg/svelte-prism/compare/v1.1.3...v1.1.5) (2022-04-26)
13 | 
14 | 
15 | ### Bug Fixes
16 | 
17 | * unwanted indentation ([ed74a40](https://github.com/jakobrosenberg/svelte-prism/commit/ed74a409e654525b39b3e951b02e22a6b06bfa98))
18 | 
19 | ### [1.1.4](https://github.com/jakobrosenberg/svelte-prism/compare/v1.1.3...v1.1.4) (2022-03-15)
20 | 
21 | 
22 | ### Bug Fixes
23 | 
24 | * unwanted indentation ([ed74a40](https://github.com/jakobrosenberg/svelte-prism/commit/ed74a409e654525b39b3e951b02e22a6b06bfa98))
25 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # svelte-prism
 2 | Prebundled with Svelte language support thanks to [pngwn](https://github.com/pngwn/prism-svelte)
 3 | 
 4 | ### Install
 5 | ``npm i svelte-prism``
 6 | 
 7 | 
 8 | ### Usage
 9 | ```html
10 | <script>
11 |     import Prism from 'svelte-prism'
12 | </script>
13 | 
14 | <!-- Option one -->
15 | <!-- Using the source prop -->
16 | <Prism language="html" source="{mycode}" />
17 | 
18 | <!-- Options two -->
19 | <!-- Using the default slot -->
20 | <Prism language="html">
21 |     {mycode}
22 | </Prism>
23 | ```
24 | 
25 | #### Inline code
26 | Inline code can be added by adding a string inside Svelte's brackets.
27 | ```html
28 | <Prism language="html">
29 |     {`
30 |       <header>
31 |         <h1>Hello World!</h1>
32 |       </header>
33 |     `}
34 | </Prism>
35 | ```
36 | 
37 | #### Transform
38 | Code can be transformed by using the transform prop:
39 | ```html
40 | <Prism transform={x => x}>...</Prism>
41 | ```
42 | Global transform can be added with:
43 | ```javascript
44 | import { globalConfig } from 'svelte-prism'
45 | globalConfig.transform = x => x
46 | 
47 | ```
48 | ##### Normalizing whitespace example
49 | ```javascript
50 | import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace'
51 | import { globalConfig } from 'svelte-prism'
52 | globalConfig.transform = code => Prism.plugins.NormalizeWhitespace.normalize(code)
53 | ```
54 | 
55 | 
56 | ### Themes
57 | To use a theme, import the CSS to your project. Ie.
58 | ``<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism-okaidia.min.css'>``
59 | 
60 | More themes can be found here
61 | https://cdnjs.com/libraries/prism
62 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svelte-prism",
 3 |   "version": "1.1.6",
 4 |   "description": "Prismjs for Svelte",
 5 |   "main": "index.js",
 6 |   "svelte": "src/Prism.svelte",
 7 |   "types": "src/Prism.d.ts",
 8 |   "scripts": {
 9 |     "test": "echo \"Error: no test specified\"",
10 |     "semantic-release": "semantic-release"
11 |   },
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "https://github.com/jakobrosenberg/svelte-prism.git"
15 |   },
16 |   "keywords": [
17 |     "prism",
18 |     "prismjs",
19 |     "svelte",
20 |     "code",
21 |     "highlight"
22 |   ],
23 |   "author": "Jakob Rosenberg",
24 |   "license": "ISC",
25 |   "bugs": {
26 |     "url": "https://github.com/jakobrosenberg/svelte-prism/issues"
27 |   },
28 |   "homepage": "https://github.com/jakobrosenberg/svelte-prism#readme",
29 |   "dependencies": {
30 |     "prism-svelte": "^0.4.7",
31 |     "prismjs": "^1.27.0"
32 |   },
33 |   "devDependencies": {
34 |     "semantic-release": "^17.4.7",
35 |     "svelte": "^3.47.0"
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/src/Prism.d.ts:
--------------------------------------------------------------------------------
 1 | import { SvelteComponentTyped } from "svelte";
 2 | 
 3 | declare const __propDef: {
 4 |     props: {
 5 |         /**
 6 |          * @type {string}
 7 |          * @default "javascript"
 8 |          */
 9 |         language?: string;
10 | 
11 |         /**
12 |          * @type {string}
13 |          * @default ""
14 |          */
15 |         source: string;
16 | 
17 |         /**
18 |          * @type {Function}
19 |          */
20 |         transform?: Function;
21 |     };
22 |     events: {};
23 |     slots: {};
24 | };
25 | 
26 | export declare type PrismProps = typeof __propDef.props;
27 | export declare type PrismEvents = typeof __propDef.events;
28 | export declare type PrismSlots = typeof __propDef.slots;
29 | export default class Prism extends SvelteComponentTyped<PrismProps, PrismEvents, PrismSlots> {
30 | }
31 | 
32 | export {};
33 | 


--------------------------------------------------------------------------------
/src/Prism.svelte:
--------------------------------------------------------------------------------
 1 | <script context="module">
 2 |   import _prism from "./import";
 3 |   export const prism = _prism;
 4 |   export const highlight = _prism.highlightElement;
 5 |   export const globalConfig = { transform: (x) => x };
 6 | </script>
 7 | 
 8 | <script>
 9 |   import "prism-svelte";
10 | 
11 |   export let language = "javascript";
12 |   export let source = "";
13 |   export let transform = (x) => x;
14 |   let element, formattedCode;
15 | 
16 |   $: $$props && (source || element) && highlightCode();
17 | 
18 |   function highlightCode() {
19 |     const grammar = prism.languages[language];
20 |     let body = source || element.textContent;
21 |     body = globalConfig.transform(body);
22 |     body = transform(body);
23 |     formattedCode = language === "none" ? body : prism.highlight(body, grammar, language);
24 |   }
25 | </script>
26 | 
27 | <code bind:this={element} style="display:none">
28 |   <slot />
29 | </code>
30 | 
31 | <pre class="language-{language}" command-line data-output="2-17"><code class="language-{language}"
32 |     >{#if language === "none"}{formattedCode}{:else}{@html formattedCode}{/if}</code
33 |   ></pre>
34 | 


--------------------------------------------------------------------------------
/src/beforeImport.js:
--------------------------------------------------------------------------------
 1 | if (typeof window !== "undefined") {
 2 | 	if (window.Prism)
 3 | 		console.warn(
 4 | 			"Prism has already been initiated. Please ensure that svelte-prism is imported first."
 5 | 		);
 6 | 
 7 | 	window.Prism = window.Prism || {};
 8 | 	window.Prism.manual = true;
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/import.js:
--------------------------------------------------------------------------------
1 | // Context module doesn't seem to respect the import order
2 | // and beforeImport has to be executed before Prism
3 | import './beforeImport.js'
4 | import prism from "prismjs";
5 | export default prism


--------------------------------------------------------------------------------