├── .github
    ├── dependabot.yml
    └── workflows
    │   └── build.yml
├── .gitignore
├── .npmignore
├── .prettierrc
├── LICENSE
├── README.md
├── example
    ├── .DS_Store
    ├── index.html
    ├── package.json
    ├── scripts
    │   └── demo.js
    ├── src
    │   ├── App.module.css
    │   ├── App.tsx
    │   ├── Demo.tsx
    │   ├── index.tsx
    │   ├── prism-themes
    │   │   ├── a11y-dark.css
    │   │   ├── atom-dark.css
    │   │   ├── base16-ateliersulphurpool.light.css
    │   │   ├── cb.css
    │   │   ├── coldark-cold.css
    │   │   ├── coldark-dark.css
    │   │   ├── coy-without-shadows.css
    │   │   ├── darcula.css
    │   │   ├── dracula.css
    │   │   ├── duotone-dark.css
    │   │   ├── duotone-earth.css
    │   │   ├── duotone-forest.css
    │   │   ├── duotone-light.css
    │   │   ├── duotone-sea.css
    │   │   ├── duotone-space.css
    │   │   ├── ghcolors.css
    │   │   ├── gruvbox-dark.css
    │   │   ├── gruvbox-light.css
    │   │   ├── holi-theme.css
    │   │   ├── hopscotch.css
    │   │   ├── laserwave.css
    │   │   ├── lucario.css
    │   │   ├── material-dark.css
    │   │   ├── material-light.css
    │   │   ├── material-oceanic.css
    │   │   ├── night-owl.css
    │   │   ├── nord.css
    │   │   ├── one-dark.css
    │   │   ├── one-light.css
    │   │   ├── pojoaque.css
    │   │   ├── prism-one-dark.css
    │   │   ├── prism-shades-of-purple.css
    │   │   ├── shades-of-purple.css
    │   │   ├── solarized-dark-atom.css
    │   │   ├── synthwave84.css
    │   │   ├── vs.css
    │   │   ├── vsc-dark-plus.css
    │   │   ├── xonokai.css
    │   │   └── z-touch.css
    │   ├── styles.css
    │   ├── themes
    │   │   ├── nord-highlight.css
    │   │   └── nord-prism.css
    │   └── utils.ts
    ├── tsconfig.json
    ├── tsconfig.node.json
    ├── vite.config.ts
    └── yarn.lock
├── package.json
├── resources
    ├── demo.gif
    ├── demo.mkv
    └── example.png
├── rollup.config.js
├── scripts
    └── copy.js
├── src
    ├── components
    │   └── CodeInput
    │   │   ├── CodeInput.tsx
    │   │   └── styles.module.css
    ├── index.tsx
    ├── types.ts
    └── utils.ts
├── tsconfig.json
├── tsconfig.node.json
└── yarn.lock


/.github/dependabot.yml:
--------------------------------------------------------------------------------
 1 | # To get started with Dependabot version updates, you'll need to specify which
 2 | # package ecosystems to update and where the package manifests are located.
 3 | # Please see the documentation for all configuration options:
 4 | # https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
 5 | 
 6 | version: 2
 7 | updates:
 8 |   - package-ecosystem: "npm" # See documentation for possible values
 9 |     directory: "/" # Location of package manifests
10 |     schedule:
11 |       interval: "weekly"
12 | 


--------------------------------------------------------------------------------
/.github/workflows/build.yml:
--------------------------------------------------------------------------------
 1 | name: build
 2 | on:
 3 |   push:
 4 |     branches:        
 5 |       - main
 6 | jobs:
 7 |   build:
 8 |     name: build
 9 |     runs-on: ubuntu-latest
10 | 
11 |     steps:
12 |       # TODO: Publish to Node Package Manager
13 |       - name: Checkout Repo
14 |         uses: actions/checkout@main
15 | 
16 |       - name: Use Node ${{ matrix.node }}
17 |         uses: actions/setup-node@v1
18 |         with:
19 |           node-version: ${{ matrix.node }}
20 | 
21 |       - name: Install deps and build (with cache)
22 |         uses: bahmutov/npm-install@v1
23 | 
24 |       - name: Build
25 |         run: yarn build
26 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | .DS_Store
  2 | # Logs
  3 | logs
  4 | *.log
  5 | npm-debug.log*
  6 | yarn-debug.log*
  7 | yarn-error.log*
  8 | lerna-debug.log*
  9 | 
 10 | # Diagnostic reports (https://nodejs.org/api/report.html)
 11 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 12 | 
 13 | # Runtime data
 14 | pids
 15 | *.pid
 16 | *.seed
 17 | *.pid.lock
 18 | 
 19 | # Directory for instrumented libs generated by jscoverage/JSCover
 20 | lib-cov
 21 | 
 22 | # Coverage directory used by tools like istanbul
 23 | coverage
 24 | *.lcov
 25 | 
 26 | # nyc test coverage
 27 | .nyc_output
 28 | 
 29 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 30 | .grunt
 31 | 
 32 | # Bower dependency directory (https://bower.io/)
 33 | bower_components
 34 | 
 35 | # node-waf configuration
 36 | .lock-wscript
 37 | 
 38 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 39 | build/Release
 40 | 
 41 | # Dependency directories
 42 | node_modules/
 43 | jspm_packages/
 44 | 
 45 | # TypeScript v1 declaration files
 46 | typings/
 47 | 
 48 | # TypeScript cache
 49 | *.tsbuildinfo
 50 | 
 51 | # Optional npm cache directory
 52 | .npm
 53 | 
 54 | # Optional eslint cache
 55 | .eslintcache
 56 | 
 57 | # Microbundle cache
 58 | .rpt2_cache/
 59 | .rts2_cache_cjs/
 60 | .rts2_cache_es/
 61 | .rts2_cache_umd/
 62 | 
 63 | # Optional REPL history
 64 | .node_repl_history
 65 | 
 66 | # Output of 'npm pack'
 67 | *.tgz
 68 | 
 69 | # Yarn Integrity file
 70 | .yarn-integrity
 71 | 
 72 | # dotenv environment variables file
 73 | .env
 74 | .env.test
 75 | 
 76 | # parcel-bundler cache (https://parceljs.org/)
 77 | .cache
 78 | 
 79 | # Next.js build output
 80 | .next
 81 | 
 82 | # Nuxt.js build / generate output
 83 | .nuxt
 84 | dist
 85 | 
 86 | # Gatsby files
 87 | .cache/
 88 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
 89 | # https://nextjs.org/blog/next-9-1#public-directory-support
 90 | # public
 91 | 
 92 | # vuepress build output
 93 | .vuepress/dist
 94 | 
 95 | # Serverless directories
 96 | .serverless/
 97 | 
 98 | # FuseBox cache
 99 | .fusebox/
100 | 
101 | # DynamoDB Local files
102 | .dynamodb/
103 | 
104 | # TernJS port file
105 | .tern-port
106 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | src
 2 | esbuild
 3 | resources
 4 | example
 5 | node_modules
 6 | .gitignore
 7 | tsconfig.json
 8 | tsconfig.node.json
 9 | yarn.lock
10 | rollup.config.js
11 | yarn.lock
12 | ./src/**/*


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "trailingComma": "all",
3 |   "singleQuote": true
4 | }
5 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Simon Holmes
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Solid Code Input
 2 | 
 3 | Solid Code Input is a small component for SolidJS that allows you to create a lightweight text area component which will automatically syntax highlight the code you type in it. It is designed for basic use cases where you want to display code to the user, and allow them to edit it, without all the overhead of a full blown code editor.
 4 | 
 5 | https://user-images.githubusercontent.com/3579905/222016141-0f6e9225-8dda-484e-a712-8af2caf1bf99.mp4
 6 | 
 7 | It supports both [PrismJS](https://prismjs.com/) and [HighlightJS](https://highlightjs.org/) to do the syntax highlighting, and will use either depending on which library you pass in as a prop.
 8 | 
 9 | ## Features
10 | 
11 | - Very Lightweight
12 | - Easier to use than CodeMirror, Ace, and Monaco
13 | - Supports both PrismJS and HighlightJS
14 | - Auto Indentation
15 | - Tab to indent
16 | - Auto resize to fit content
17 | - Resizable
18 | - Placeholders
19 | 
20 | ## Installation
21 | 
22 | ```bash
23 | npm install @srsholmes/solid-code-input
24 | # or
25 | yarn add @srsholmes/solid-code-input
26 | ```
27 | 
28 | ## Usage
29 | 
30 | ```jsx
31 | import { CodeInput } from '@srsholmes/solid-code-input';
32 | 
33 | <CodeInput
34 |   autoHeight={true}
35 |   resize="both"
36 |   placeholder="Input your code here..."
37 |   prismJS={Prism}
38 |   onChange={setInput}
39 |   value={'const hello = "world";'}
40 |   language={'typescript'}
41 | />;
42 | ```
43 | 
44 | ## API
45 | 
46 | CodeInput takes the following props:
47 | | Name | Type | Description |
48 | |---------------|-----------------------------------------------------|-----------------------------------------------------------------------------------|
49 | | `prismJS` | `typeof Prism` | Optional. An instance of the Prism library for syntax highlighting. |
50 | | `highlightjs` | `typeof highlightjs` | Optional. An instance of the Highlight.js library for syntax highlighting. |
51 | | `value` | `string` | Required. The value of the code input. |
52 | | `language` | `string` | Required. The language of the code input. |
53 | | `onChange` | `(value: string) => void` | Required. A callback function that is called when the value of the input changes. |
54 | | `placeholder` | `string` | Optional. Placeholder text for the input. |
55 | | `resize` | `'both'` \| `'horizontal'` \| `'vertical'` | Optional. Specifies whether the input can be resized, and in which direction. |
56 | | `autoHeight` | `boolean` | Optional. Specifies whether the input height should adjust automatically. |
57 | 
58 | ## Types
59 | 
60 | ```ts
61 | export type CodeInputProps = {
62 |   prismJS?: typeof Prism;
63 |   highlightjs?: typeof highlightjs;
64 |   value: string;
65 |   language: string;
66 |   onChange: (value: string) => void;
67 |   placeholder?: string;
68 |   resize?: 'both' | 'horizontal' | 'vertical';
69 |   autoHeight?: boolean;
70 | };
71 | ```
72 | 
73 | ## Example App
74 | 
75 | ![solid-code-input](./resources/example.png 'solid-code-input')
76 | 
77 | To run the example app, clone the repo and run the following commands:
78 | 
79 | ```bash
80 | git clone https://github.com/srsholmes/solid-code-input
81 | yarn # Install dependencies
82 | yarn build # Build the component from source
83 | cd example
84 | yarn
85 | yarn dev
86 | ```
87 | 
88 | ## Shout outs
89 | 
90 | Shout out to Oliver Geer (WebCoder49) for this awesome article which inspired this component [Creating an Editable Textarea That Supports Syntax-Highlighted Code](https://css-tricks.com/creating-an-editable-textarea-that-supports-syntax-highlighted-code/).
91 | 
92 | The method used was heavily inspired by this repo [code-input](https://github.com/WebCoder49/code-input), and the auto indent was taken directly from his indent plugin.
93 | 
94 | ## License
95 | 
96 | MIT
97 | 


--------------------------------------------------------------------------------
/example/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/srsholmes/solid-code-input/b8ece72ebdec0a6d346846a874a337ead90b6767/example/.DS_Store


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <meta name="theme-color" content="#000000" />
 7 |     <title>Solid App</title>
 8 |   </head>
 9 |   <body>
10 |     <noscript>You need to enable JavaScript to run this app.</noscript>
11 |     <div id="root"></div>
12 | 
13 |     <script src="/src/index.tsx" type="module"></script>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "solid-code-input-example",
 3 |   "version": "1.0.0",
 4 |   "description": "Solid Code Example ",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "dev": "vite"
 8 |   },
 9 |   "author": "",
10 |   "license": "MIT",
11 |   "devDependencies": {
12 |     "@types/highlight.js": "9.12.2",
13 |     "@types/prismjs": "1.26.0",
14 |     "typescript": "^4.9.5",
15 |     "vite": "^4.1.1",
16 |     "vite-plugin-solid": "^2.5.0",
17 |     "vite-plugin-dts": "2.0.2"
18 |   },
19 |   "dependencies": {
20 |     "highlight.js": "^11.7.0",
21 |     "prismjs": "^1.28.0",
22 |     "solid-js": "^1.6.10"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/example/scripts/demo.js:
--------------------------------------------------------------------------------
 1 | // Put this in the chrome console to simulate typing in the textarea
 2 | // to record the demo
 3 | function simulateTyping(selector, text, delay) {
 4 |   // Get the input element
 5 |   const input = document.querySelector(selector);
 6 | 
 7 |   // Make sure the input element exists
 8 |   if (!input) {
 9 |     console.error(`Input element with selector ${selector} not found`);
10 |     return;
11 |   }
12 |   const randomDelay = delay * (1 + Math.random() - 0.5);
13 | 
14 |   // Loop through each character in the text
15 |   for (let i = 0; i < text.length; i++) {
16 |     // Set a timeout to simulate typing delay
17 |     setTimeout(() => {
18 |       // Get the current value of the input element
19 |       const currentValue = input.value;
20 | 
21 |       // Append the current character to the input element value
22 |       input.value = currentValue + text[i];
23 | 
24 |       // Dispatch an input event to trigger any listeners
25 |       const inputEvent = new Event('input', { bubbles: true });
26 |       input.dispatchEvent(inputEvent);
27 |     }, randomDelay * i);
28 |   }
29 | }
30 | 
31 | const exampleCode = `import { render } from 'solid-js/web';
32 | import { createSignal, createEffect } from 'solid-js';
33 | import Prism from 'prismjs';
34 | import { CodeInput } from '@srsholmes/solid-code-input';
35 | 
36 | function App() {
37 |   const [input, setInput] = createSignal('');
38 | 
39 |   return (
40 |     <CodeInput
41 |       placeholder="Input your code here..."
42 |       prismJS={Prism}
43 |       onChange={setInput}
44 |       language={'jsx'}
45 |       autoHeight={true}
46 |       resize="both"
47 |       value={input}
48 |     />
49 |   );
50 | }
51 | 
52 | render(() => <App />, document.getElementById('app'));
53 | `;
54 | 
55 | simulateTyping('textarea', exampleCode, 100);
56 | 


--------------------------------------------------------------------------------
/example/src/App.module.css:
--------------------------------------------------------------------------------
 1 | .app {
 2 |   padding: 5rem;;
 3 |   width: 90%;
 4 |   margin: auto;
 5 | }
 6 | 
 7 | .select {
 8 |   margin-top: 1rem;
 9 |   width: 100%;
10 |   min-width: 15ch;
11 |   max-width: 30ch;
12 |   border: 1px solid var(--select-border);
13 |   border-radius: 0.25em;
14 |   padding: 0.5em 0.5em;
15 |   font-size: 1rem;
16 |   cursor: pointer;
17 |   line-height: 1.1;
18 |   background-color: rgb(46, 52, 64);
19 |   color: rgb(255, 255, 255);
20 | }
21 | 
22 | /* Original CSS written by Oliver Geer (WebCoder49) */
23 | /* https://css-tricks.com/creating-an-editable-textarea-that-supports-syntax-highlighted-code/ */
24 | /* Updated for solid-code-input */
25 | 


--------------------------------------------------------------------------------
/example/src/App.tsx:
--------------------------------------------------------------------------------
  1 | import highlightjs from 'highlight.js';
  2 | import Prism from 'prismjs';
  3 | import { createSignal, onMount, Show } from 'solid-js';
  4 | import { CodeInput } from '../../dist/esm';
  5 | import styles from './App.module.css';
  6 | 
  7 | import './themes/nord-highlight.css';
  8 | import './themes/nord-prism.css';
  9 | 
 10 | const exampleCode = `import { render } from 'solid-js/web';
 11 | import { createSignal, createEffect } from 'solid-js';
 12 | import Prism from 'prismjs';
 13 | import { CodeInput } from '@srsholmes/solid-code-input';
 14 | 
 15 | function App() {
 16 |   const [input, setInput] = createSignal('');
 17 | 
 18 |   return (
 19 |     <CodeInput
 20 |       placeholder="Input your code here..."
 21 |       prismJS={Prism}
 22 |       onChange={setInput}
 23 |       language={'jsx'}
 24 |       autoHeight={true}
 25 |       resize="both"
 26 |       value={input}
 27 |     />
 28 |   );
 29 | }
 30 | 
 31 | render(() => <App />, document.getElementById('app'));
 32 | `;
 33 | 
 34 | // Syntax Highlight libraries to generate the tokens.
 35 | //  It's up to you to import them.
 36 | const libs = [
 37 |   import('prismjs/components/prism-markup'),
 38 |   import('prismjs/components/prism-typescript'),
 39 |   import('prismjs/components/prism-javascript'),
 40 |   import('prismjs/components/prism-jsx'),
 41 |   import('prismjs/components/prism-markup'),
 42 |   import('prismjs/components/prism-css'),
 43 |   import('highlight.js/lib/languages/typescript'),
 44 |   import('highlight.js/lib/languages/javascript'),
 45 |   import('highlight.js/lib/languages/css'),
 46 | ];
 47 | 
 48 | export function App() {
 49 |   // Our code input
 50 |   const [input, setInput] = createSignal(exampleCode);
 51 | 
 52 |   // Syntax Highlight libraries. It's up to you to import them.
 53 |   // CodeInput will use either library if you pass it in.
 54 |   const [loadedPrism, setLoadedPrism] = createSignal(false);
 55 |   const [loadedHighlight, setLoadedHighlight] = createSignal(true);
 56 |   const [languagePrism, setLanguagePrism] = createSignal('jsx');
 57 |   const [languageHighlight, setLanguageHighlight] = createSignal('typescript');
 58 | 
 59 |   onMount(async () => {
 60 |     await Promise.all(libs);
 61 |     setLoadedPrism(true);
 62 |     setLoadedHighlight(true);
 63 |   });
 64 | 
 65 |   return (
 66 |     <div class={styles.app}>
 67 |       <h1 class={styles.heading}>Solid Code Input Demo</h1>
 68 |       <div>
 69 |         <h2>PrismJS</h2>
 70 |         <Show when={loadedPrism()}>
 71 |           <CodeInput
 72 |             autoHeight={true}
 73 |             resize="both"
 74 |             placeholder="Input your code here..."
 75 |             prismJS={Prism}
 76 |             onChange={setInput}
 77 |             value={input()}
 78 |             language={languagePrism()}
 79 |           />
 80 |         </Show>
 81 | 
 82 |         <LanguageSelect setLanguage={setLanguagePrism} value={languagePrism} />
 83 |       </div>
 84 |       <div>
 85 |         <h2>Highlight.js</h2>
 86 |         <Show when={loadedHighlight()}>
 87 |           <CodeInput
 88 |             autoHeight={false}
 89 |             resize="vertical"
 90 |             placeholder="Input your code here..."
 91 |             highlightjs={highlightjs}
 92 |             onChange={setInput}
 93 |             value={input()}
 94 |             language={languageHighlight()}
 95 |           />
 96 |         </Show>
 97 |         <LanguageSelect
 98 |           setLanguage={setLanguageHighlight}
 99 |           value={languageHighlight}
100 |         />
101 |       </div>
102 |     </div>
103 |   );
104 | 
105 |   function LanguageSelect(props: {
106 |     setLanguage: (language: string) => void;
107 |     value: () => string;
108 |   }) {
109 |     return (
110 |       <select
111 |         class={styles.select}
112 |         value={props.value()}
113 |         oninput={(e) => props.setLanguage(e.currentTarget.value)}
114 |       >
115 |         <option value="javascript">JavaScript</option>
116 |         <option value="typescript">TypeScript</option>
117 |         <option value="jsx">JSX</option>
118 |         <option value="css">CSS</option>
119 |         <option value="html">HTML</option>
120 |         <option value="json">JSON</option>
121 |       </select>
122 |     );
123 |   }
124 | }
125 | 


--------------------------------------------------------------------------------
/example/src/Demo.tsx:
--------------------------------------------------------------------------------
  1 | import Prism from 'prismjs';
  2 | import { createEffect, createSignal, onMount, Show } from 'solid-js';
  3 | import { CodeInput } from '../../dist/esm';
  4 | import styles from './App.module.css';
  5 | 
  6 | const libs = [
  7 |   import('prismjs/components/prism-markup'),
  8 |   import('prismjs/components/prism-typescript'),
  9 |   import('prismjs/components/prism-javascript'),
 10 |   import('prismjs/components/prism-jsx'),
 11 | ];
 12 | 
 13 | const BEST_THEMES = [
 14 |   'atom-dark',
 15 |   'xonokai',
 16 |   'nord',
 17 |   'vsc-dark-plus',
 18 |   'synthwave84',
 19 |   'one-dark',
 20 |   'one-light',
 21 |   'material-dark',
 22 |   'material-light',
 23 |   'material-oceanic',
 24 |   'prism-one-dark',
 25 |   'darcula',
 26 |   'dracula',
 27 |   'duotone-dark',
 28 |   'duotone-earth',
 29 |   'duotone-forest',
 30 |   'duotone-light',
 31 |   'duotone-sea',
 32 |   'duotone-space',
 33 | ];
 34 | 
 35 | const exampleCode = `import { render } from 'solid-js/web';
 36 | import { createSignal, createEffect } from 'solid-js';
 37 | import Prism from 'prismjs';
 38 | import { CodeInput } from '@srsholmes/solid-code-input';
 39 | 
 40 | function App() {
 41 |   const [input, setInput] = createSignal('');
 42 | 
 43 |   return (
 44 |     <CodeInput
 45 |       placeholder="Input your code here..."
 46 |       prismJS={Prism}
 47 |       onChange={setInput}
 48 |       autoHeight={true}
 49 |       resize="both"
 50 |       value={input}
 51 |     />
 52 |   );
 53 | }
 54 | 
 55 | render(() => <App />, document.getElementById('app'));`;
 56 | 
 57 | export function Demo() {
 58 |   const [input, setInput] = createSignal('');
 59 |   // Syntax Highlight libraries. It's up to you to import them.
 60 |   // CodeInput will use either library if you pass it in.
 61 |   const [loadedPrism, setLoadedPrism] = createSignal(false);
 62 |   const [languagePrism, setLanguagePrism] = createSignal('jsx');
 63 | 
 64 |   createEffect(async () => {
 65 |     await Promise.all(libs);
 66 |     setLoadedPrism(true);
 67 |     // sleep 5 seconds to load
 68 |     await new Promise((resolve) => setTimeout(resolve, 5000));
 69 | 
 70 |     // setInterval(async () => {
 71 |     const oldStyle = document.getElementById('theme');
 72 |     if (oldStyle) {
 73 |       document.head.removeChild(oldStyle);
 74 |     }
 75 |     const theme = BEST_THEMES[Math.floor(Math.random() * BEST_THEMES.length)];
 76 |     const res = await import(`./prism-themes/${theme}.css?raw`);
 77 |     const style = document.createElement('style');
 78 |     style.textContent = res.default;
 79 |     style.id = `theme`;
 80 |     document.head.appendChild(style);
 81 |     document.body.dataset.theme = theme;
 82 |     // }, 500);
 83 |   });
 84 | 
 85 |   return (
 86 |     <div class={styles.app}>
 87 |       <div>
 88 |         <Show when={loadedPrism()}>
 89 |           <div>
 90 |             <CodeInput
 91 |               autoHeight={true}
 92 |               resize="both"
 93 |               placeholder="Input your code here..."
 94 |               prismJS={Prism}
 95 |               onChange={setInput}
 96 |               value={input()}
 97 |               language={languagePrism()}
 98 |             />
 99 |           </div>
100 |         </Show>
101 |       </div>
102 |     </div>
103 |   );
104 | }
105 | 


--------------------------------------------------------------------------------
/example/src/index.tsx:
--------------------------------------------------------------------------------
1 | import { render } from 'solid-js/web';
2 | import { App } from './App';
3 | import { Demo } from './Demo';
4 | import './styles.css';
5 | render(() => <App />, document.querySelector('#root')!);
6 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/a11y-dark.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * a11y-dark theme for JavaScript, CSS, and HTML
  3 |  * Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css
  4 |  * @author ericwbailey
  5 |  */
  6 | 
  7 | code[class*="language-"],
  8 | pre[class*="language-"] {
  9 | 	color: #f8f8f2;
 10 | 	background: none;
 11 | 	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 12 | 	text-align: left;
 13 | 	white-space: pre;
 14 | 	word-spacing: normal;
 15 | 	word-break: normal;
 16 | 	word-wrap: normal;
 17 | 	line-height: 1.5;
 18 | 
 19 | 	-moz-tab-size: 4;
 20 | 	-o-tab-size: 4;
 21 | 	tab-size: 4;
 22 | 
 23 | 	-webkit-hyphens: none;
 24 | 	-moz-hyphens: none;
 25 | 	-ms-hyphens: none;
 26 | 	hyphens: none;
 27 | }
 28 | 
 29 | /* Code blocks */
 30 | pre[class*="language-"] {
 31 | 	padding: 1em;
 32 | 	margin: 0.5em 0;
 33 | 	overflow: auto;
 34 | 	border-radius: 0.3em;
 35 | }
 36 | 
 37 | :not(pre) > code[class*="language-"],
 38 | pre[class*="language-"] {
 39 | 	background: #2b2b2b;
 40 | }
 41 | 
 42 | /* Inline code */
 43 | :not(pre) > code[class*="language-"] {
 44 | 	padding: 0.1em;
 45 | 	border-radius: 0.3em;
 46 | 	white-space: normal;
 47 | }
 48 | 
 49 | .token.comment,
 50 | .token.prolog,
 51 | .token.doctype,
 52 | .token.cdata {
 53 | 	color: #d4d0ab;
 54 | }
 55 | 
 56 | .token.punctuation {
 57 | 	color: #fefefe;
 58 | }
 59 | 
 60 | .token.property,
 61 | .token.tag,
 62 | .token.constant,
 63 | .token.symbol,
 64 | .token.deleted {
 65 | 	color: #ffa07a;
 66 | }
 67 | 
 68 | .token.boolean,
 69 | .token.number {
 70 | 	color: #00e0e0;
 71 | }
 72 | 
 73 | .token.selector,
 74 | .token.attr-name,
 75 | .token.string,
 76 | .token.char,
 77 | .token.builtin,
 78 | .token.inserted {
 79 | 	color: #abe338;
 80 | }
 81 | 
 82 | .token.operator,
 83 | .token.entity,
 84 | .token.url,
 85 | .language-css .token.string,
 86 | .style .token.string,
 87 | .token.variable {
 88 | 	color: #00e0e0;
 89 | }
 90 | 
 91 | .token.atrule,
 92 | .token.attr-value,
 93 | .token.function {
 94 | 	color: #ffd700;
 95 | }
 96 | 
 97 | .token.keyword {
 98 | 	color: #00e0e0;
 99 | }
100 | 
101 | .token.regex,
102 | .token.important {
103 | 	color: #ffd700;
104 | }
105 | 
106 | .token.important,
107 | .token.bold {
108 | 	font-weight: bold;
109 | }
110 | 
111 | .token.italic {
112 | 	font-style: italic;
113 | }
114 | 
115 | .token.entity {
116 | 	cursor: help;
117 | }
118 | 
119 | @media screen and (-ms-high-contrast: active) {
120 | 	code[class*="language-"],
121 | 	pre[class*="language-"] {
122 | 		color: windowText;
123 | 		background: window;
124 | 	}
125 | 
126 | 	:not(pre) > code[class*="language-"],
127 | 	pre[class*="language-"] {
128 | 		background: window;
129 | 	}
130 | 
131 | 	.token.important {
132 | 		background: highlight;
133 | 		color: window;
134 | 		font-weight: normal;
135 | 	}
136 | 
137 | 	.token.atrule,
138 | 	.token.attr-value,
139 | 	.token.function,
140 | 	.token.keyword,
141 | 	.token.operator,
142 | 	.token.selector {
143 | 		font-weight: bold;
144 | 	}
145 | 
146 | 	.token.attr-value,
147 | 	.token.comment,
148 | 	.token.doctype,
149 | 	.token.function,
150 | 	.token.keyword,
151 | 	.token.operator,
152 | 	.token.property,
153 | 	.token.string {
154 | 		color: highlight;
155 | 	}
156 | 
157 | 	.token.attr-value,
158 | 	.token.url {
159 | 		font-weight: normal;
160 | 	}
161 | }
162 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/atom-dark.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * atom-dark theme for `prism.js`
  3 |  * Based on Atom's `atom-dark` theme: https://github.com/atom/atom-dark-syntax
  4 |  * @author Joe Gibson (@gibsjose)
  5 |  */
  6 | 
  7 | code[class*="language-"],
  8 | pre[class*="language-"] {
  9 | 	color: #c5c8c6;
 10 | 	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
 11 | 	font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
 12 | 	direction: ltr;
 13 | 	text-align: left;
 14 | 	white-space: pre;
 15 | 	word-spacing: normal;
 16 | 	word-break: normal;
 17 | 	line-height: 1.5;
 18 | 
 19 | 	-moz-tab-size: 4;
 20 | 	-o-tab-size: 4;
 21 | 	tab-size: 4;
 22 | 
 23 | 	-webkit-hyphens: none;
 24 | 	-moz-hyphens: none;
 25 | 	-ms-hyphens: none;
 26 | 	hyphens: none;
 27 | }
 28 | 
 29 | /* Code blocks */
 30 | pre[class*="language-"] {
 31 | 	padding: 1em;
 32 | 	margin: .5em 0;
 33 | 	overflow: auto;
 34 | 	border-radius: 0.3em;
 35 | }
 36 | 
 37 | :not(pre) > code[class*="language-"],
 38 | pre[class*="language-"] {
 39 | 	background: #1d1f21;
 40 | }
 41 | 
 42 | /* Inline code */
 43 | :not(pre) > code[class*="language-"] {
 44 | 	padding: .1em;
 45 | 	border-radius: .3em;
 46 | }
 47 | 
 48 | .token.comment,
 49 | .token.prolog,
 50 | .token.doctype,
 51 | .token.cdata {
 52 | 	color: #7C7C7C;
 53 | }
 54 | 
 55 | .token.punctuation {
 56 | 	color: #c5c8c6;
 57 | }
 58 | 
 59 | .namespace {
 60 | 	opacity: .7;
 61 | }
 62 | 
 63 | .token.property,
 64 | .token.keyword,
 65 | .token.tag {
 66 | 	color: #96CBFE;
 67 | }
 68 | 
 69 | .token.class-name {
 70 | 	color: #FFFFB6;
 71 | 	text-decoration: underline;
 72 | }
 73 | 
 74 | .token.boolean,
 75 | .token.constant {
 76 | 	color: #99CC99;
 77 | }
 78 | 
 79 | .token.symbol,
 80 | .token.deleted {
 81 | 	color: #f92672;
 82 | }
 83 | 
 84 | .token.number {
 85 | 	color: #FF73FD;
 86 | }
 87 | 
 88 | .token.selector,
 89 | .token.attr-name,
 90 | .token.string,
 91 | .token.char,
 92 | .token.builtin,
 93 | .token.inserted {
 94 | 	color: #A8FF60;
 95 | }
 96 | 
 97 | .token.variable {
 98 | 	color: #C6C5FE;
 99 | }
100 | 
101 | .token.operator {
102 | 	color: #EDEDED;
103 | }
104 | 
105 | .token.entity {
106 | 	color: #FFFFB6;
107 | 	cursor: help;
108 | }
109 | 
110 | .token.url {
111 | 	color: #96CBFE;
112 | }
113 | 
114 | .language-css .token.string,
115 | .style .token.string {
116 | 	color: #87C38A;
117 | }
118 | 
119 | .token.atrule,
120 | .token.attr-value {
121 | 	color: #F9EE98;
122 | }
123 | 
124 | .token.function {
125 | 	color: #DAD085;
126 | }
127 | 
128 | .token.regex {
129 | 	color: #E9C062;
130 | }
131 | 
132 | .token.important {
133 | 	color: #fd971f;
134 | }
135 | 
136 | .token.important,
137 | .token.bold {
138 | 	font-weight: bold;
139 | }
140 | 
141 | .token.italic {
142 | 	font-style: italic;
143 | }
144 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/base16-ateliersulphurpool.light.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | 
  3 | Name:       Base16 Atelier Sulphurpool Light
  4 | Author:     Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool)
  5 | 
  6 | Prism template by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/prism/)
  7 | Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
  8 | 
  9 | */
 10 | code[class*="language-"],
 11 | pre[class*="language-"] {
 12 | 	font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
 13 | 	font-size: 14px;
 14 | 	line-height: 1.375;
 15 | 	direction: ltr;
 16 | 	text-align: left;
 17 | 	white-space: pre;
 18 | 	word-spacing: normal;
 19 | 	word-break: normal;
 20 | 	-moz-tab-size: 4;
 21 | 	-o-tab-size: 4;
 22 | 	tab-size: 4;
 23 | 	-webkit-hyphens: none;
 24 | 	-moz-hyphens: none;
 25 | 	-ms-hyphens: none;
 26 | 	hyphens: none;
 27 | 	background: #f5f7ff;
 28 | 	color: #5e6687;
 29 | }
 30 | 
 31 | pre > code[class*="language-"] {
 32 | 	font-size: 1em;
 33 | }
 34 | 
 35 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 36 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
 37 | 	text-shadow: none;
 38 | 	background: #dfe2f1;
 39 | }
 40 | 
 41 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 42 | code[class*="language-"]::selection, code[class*="language-"] ::selection {
 43 | 	text-shadow: none;
 44 | 	background: #dfe2f1;
 45 | }
 46 | 
 47 | /* Code blocks */
 48 | pre[class*="language-"] {
 49 | 	padding: 1em;
 50 | 	margin: .5em 0;
 51 | 	overflow: auto;
 52 | }
 53 | 
 54 | /* Inline code */
 55 | :not(pre) > code[class*="language-"] {
 56 | 	padding: .1em;
 57 | 	border-radius: .3em;
 58 | }
 59 | 
 60 | .token.comment,
 61 | .token.prolog,
 62 | .token.doctype,
 63 | .token.cdata {
 64 | 	color: #898ea4;
 65 | }
 66 | 
 67 | .token.punctuation {
 68 | 	color: #5e6687;
 69 | }
 70 | 
 71 | .token.namespace {
 72 | 	opacity: .7;
 73 | }
 74 | 
 75 | .token.operator,
 76 | .token.boolean,
 77 | .token.number {
 78 | 	color: #c76b29;
 79 | }
 80 | 
 81 | .token.property {
 82 | 	color: #c08b30;
 83 | }
 84 | 
 85 | .token.tag {
 86 | 	color: #3d8fd1;
 87 | }
 88 | 
 89 | .token.string {
 90 | 	color: #22a2c9;
 91 | }
 92 | 
 93 | .token.selector {
 94 | 	color: #6679cc;
 95 | }
 96 | 
 97 | .token.attr-name {
 98 | 	color: #c76b29;
 99 | }
100 | 
101 | .token.entity,
102 | .token.url,
103 | .language-css .token.string,
104 | .style .token.string {
105 | 	color: #22a2c9;
106 | }
107 | 
108 | .token.attr-value,
109 | .token.keyword,
110 | .token.control,
111 | .token.directive,
112 | .token.unit {
113 | 	color: #ac9739;
114 | }
115 | 
116 | .token.statement,
117 | .token.regex,
118 | .token.atrule {
119 | 	color: #22a2c9;
120 | }
121 | 
122 | .token.placeholder,
123 | .token.variable {
124 | 	color: #3d8fd1;
125 | }
126 | 
127 | .token.deleted {
128 | 	text-decoration: line-through;
129 | }
130 | 
131 | .token.inserted {
132 | 	border-bottom: 1px dotted #202746;
133 | 	text-decoration: none;
134 | }
135 | 
136 | .token.italic {
137 | 	font-style: italic;
138 | }
139 | 
140 | .token.important,
141 | .token.bold {
142 | 	font-weight: bold;
143 | }
144 | 
145 | .token.important {
146 | 	color: #c94922;
147 | }
148 | 
149 | .token.entity {
150 | 	cursor: help;
151 | }
152 | 
153 | pre > code.highlight {
154 | 	outline: 0.4em solid #c94922;
155 | 	outline-offset: .4em;
156 | }
157 | 
158 | /* overrides color-values for the Line Numbers plugin
159 |  * http://prismjs.com/plugins/line-numbers/
160 |  */
161 | .line-numbers.line-numbers .line-numbers-rows {
162 | 	border-right-color: #dfe2f1;
163 | }
164 | 
165 | .line-numbers .line-numbers-rows > span:before {
166 | 	color: #979db4;
167 | }
168 | 
169 | /* overrides color-values for the Line Highlight plugin
170 |  * http://prismjs.com/plugins/line-highlight/
171 |  */
172 | .line-highlight.line-highlight {
173 | 	background: rgba(107, 115, 148, 0.2);
174 | 	background: -webkit-linear-gradient(left, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0));
175 | 	background: linear-gradient(to right, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0));
176 | }
177 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/cb.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * Based on Plugin: Syntax Highlighter CB
  3 |  * Plugin URI: http://wp.tutsplus.com/tutorials/plugins/adding-a-syntax-highlighter-shortcode-using-prism-js
  4 |  * Description: Highlight your code snippets with an easy to use shortcode based on Lea Verou's Prism.js.
  5 |  * Version: 1.0.0
  6 |  * Author: c.bavota
  7 |  * Author URI: http://bavotasan.comhttp://wp.tutsplus.com/tutorials/plugins/adding-a-syntax-highlighter-shortcode-using-prism-js/ */
  8 | /* http://cbavota.bitbucket.org/syntax-highlighter/  */
  9 | 
 10 | /* =====   ===== */
 11 | code[class*="language-"],
 12 | pre[class*="language-"] {
 13 | 	color: #fff;
 14 | 	text-shadow: 0 1px 1px #000;
 15 | 	font-family: Menlo, Monaco, "Courier New", monospace;
 16 | 	direction: ltr;
 17 | 	text-align: left;
 18 | 	word-spacing: normal;
 19 | 	white-space: pre;
 20 | 	word-wrap: normal;
 21 | 	line-height: 1.4;
 22 | 	background: none;
 23 | 	border: 0;
 24 | 
 25 | 	-moz-tab-size: 4;
 26 | 	-o-tab-size: 4;
 27 | 	tab-size: 4;
 28 | 
 29 | 	-webkit-hyphens: none;
 30 | 	-moz-hyphens: none;
 31 | 	-ms-hyphens: none;
 32 | 	hyphens: none;
 33 | }
 34 | 
 35 | pre[class*="language-"] code {
 36 | 	float: left;
 37 | 	padding: 0 15px 0 0;
 38 | }
 39 | 
 40 | pre[class*="language-"],
 41 | :not(pre) > code[class*="language-"] {
 42 | 	background: #222;
 43 | }
 44 | 
 45 | /* Code blocks */
 46 | pre[class*="language-"] {
 47 | 	padding: 15px;
 48 | 	margin: 1em 0;
 49 | 	overflow: auto;
 50 | 	-moz-border-radius: 8px;
 51 | 	-webkit-border-radius: 8px;
 52 | 	border-radius: 8px;
 53 | }
 54 | 
 55 | /* Inline code */
 56 | :not(pre) > code[class*="language-"] {
 57 | 	padding: 5px 10px;
 58 | 	line-height: 1;
 59 | 	-moz-border-radius: 3px;
 60 | 	-webkit-border-radius: 3px;
 61 | 	border-radius: 3px;
 62 | }
 63 | 
 64 | .token.comment,
 65 | .token.prolog,
 66 | .token.doctype,
 67 | .token.cdata {
 68 | 	color: #797979;
 69 | }
 70 | 
 71 | .token.selector,
 72 | .token.operator,
 73 | .token.punctuation {
 74 | 	color: #fff;
 75 | }
 76 | 
 77 | .token.namespace {
 78 | 	opacity: .7;
 79 | }
 80 | 
 81 | .token.tag,
 82 | .token.boolean {
 83 | 	color: #ffd893;
 84 | }
 85 | 
 86 | .token.atrule,
 87 | .token.attr-value,
 88 | .token.hex,
 89 | .token.string {
 90 | 	color: #B0C975;
 91 | }
 92 | 
 93 | .token.property,
 94 | .token.entity,
 95 | .token.url,
 96 | .token.attr-name,
 97 | .token.keyword {
 98 | 	color: #c27628;
 99 | }
100 | 
101 | .token.regex {
102 | 	color: #9B71C6;
103 | }
104 | 
105 | .token.entity {
106 | 	cursor: help;
107 | }
108 | 
109 | .token.function,
110 | .token.constant {
111 | 	color: #e5a638;
112 | }
113 | 
114 | .token.variable {
115 | 	color: #fdfba8;
116 | }
117 | 
118 | .token.number {
119 | 	color: #8799B0;
120 | }
121 | 
122 | .token.important,
123 | .token.deliminator {
124 | 	color: #E45734;
125 | }
126 | 
127 | /* Line highlight plugin */
128 | .line-highlight.line-highlight {
129 | 	background: rgba(255, 255, 255, .2);
130 | }
131 | 
132 | .line-highlight.line-highlight:before,
133 | .line-highlight.line-highlight[data-end]:after {
134 | 	top: .3em;
135 | 	background-color: rgba(255, 255, 255, .3);
136 | 	color: #fff;
137 | 	-moz-border-radius: 8px;
138 | 	-webkit-border-radius: 8px;
139 | 	border-radius: 8px;
140 | }
141 | 
142 | /* for line numbers */
143 | /* span instead of span:before for a two-toned border */
144 | .line-numbers .line-numbers-rows > span {
145 | 	border-right: 3px #d9d336 solid;
146 | }
147 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/coldark-cold.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Coldark Theme for Prism.js
  3 |  * Theme variation: Cold
  4 |  * Tested with HTML, CSS, JS, JSON, PHP, YAML, Bash script
  5 |  * @author Armand Philippot <contact@armandphilippot.com>
  6 |  * @homepage https://github.com/ArmandPhilippot/coldark-prism
  7 |  * @license MIT
  8 |  */
  9 | code[class*="language-"],
 10 | pre[class*="language-"] {
 11 | 	color: #111b27;
 12 | 	background: none;
 13 | 	font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
 14 | 	text-align: left;
 15 | 	white-space: pre;
 16 | 	word-spacing: normal;
 17 | 	word-break: normal;
 18 | 	word-wrap: normal;
 19 | 	line-height: 1.5;
 20 | 	-moz-tab-size: 4;
 21 | 	-o-tab-size: 4;
 22 | 	tab-size: 4;
 23 | 	-webkit-hyphens: none;
 24 | 	-moz-hyphens: none;
 25 | 	-ms-hyphens: none;
 26 | 	hyphens: none;
 27 | }
 28 | 
 29 | pre[class*="language-"]::-moz-selection,
 30 | pre[class*="language-"] ::-moz-selection,
 31 | code[class*="language-"]::-moz-selection,
 32 | code[class*="language-"] ::-moz-selection {
 33 | 	background: #8da1b9;
 34 | }
 35 | 
 36 | pre[class*="language-"]::selection,
 37 | pre[class*="language-"] ::selection,
 38 | code[class*="language-"]::selection,
 39 | code[class*="language-"] ::selection {
 40 | 	background: #8da1b9;
 41 | }
 42 | 
 43 | /* Code blocks */
 44 | pre[class*="language-"] {
 45 | 	padding: 1em;
 46 | 	margin: 0.5em 0;
 47 | 	overflow: auto;
 48 | }
 49 | 
 50 | :not(pre) > code[class*="language-"],
 51 | pre[class*="language-"] {
 52 | 	background: #e3eaf2;
 53 | }
 54 | 
 55 | /* Inline code */
 56 | :not(pre) > code[class*="language-"] {
 57 | 	padding: 0.1em 0.3em;
 58 | 	border-radius: 0.3em;
 59 | 	white-space: normal;
 60 | }
 61 | 
 62 | .token.comment,
 63 | .token.prolog,
 64 | .token.doctype,
 65 | .token.cdata {
 66 | 	color: #3c526d;
 67 | }
 68 | 
 69 | .token.punctuation {
 70 | 	color: #111b27;
 71 | }
 72 | 
 73 | .token.delimiter.important,
 74 | .token.selector .parent,
 75 | .token.tag,
 76 | .token.tag .token.punctuation {
 77 | 	color: #006d6d;
 78 | }
 79 | 
 80 | .token.attr-name,
 81 | .token.boolean,
 82 | .token.boolean.important,
 83 | .token.number,
 84 | .token.constant,
 85 | .token.selector .token.attribute {
 86 | 	color: #755f00;
 87 | }
 88 | 
 89 | .token.class-name,
 90 | .token.key,
 91 | .token.parameter,
 92 | .token.property,
 93 | .token.property-access,
 94 | .token.variable {
 95 | 	color: #005a8e;
 96 | }
 97 | 
 98 | .token.attr-value,
 99 | .token.inserted,
100 | .token.color,
101 | .token.selector .token.value,
102 | .token.string,
103 | .token.string .token.url-link {
104 | 	color: #116b00;
105 | }
106 | 
107 | .token.builtin,
108 | .token.keyword-array,
109 | .token.package,
110 | .token.regex {
111 | 	color: #af00af;
112 | }
113 | 
114 | .token.function,
115 | .token.selector .token.class,
116 | .token.selector .token.id {
117 | 	color: #7c00aa;
118 | }
119 | 
120 | .token.atrule .token.rule,
121 | .token.combinator,
122 | .token.keyword,
123 | .token.operator,
124 | .token.pseudo-class,
125 | .token.pseudo-element,
126 | .token.selector,
127 | .token.unit {
128 | 	color: #a04900;
129 | }
130 | 
131 | .token.deleted,
132 | .token.important {
133 | 	color: #c22f2e;
134 | }
135 | 
136 | .token.keyword-this,
137 | .token.this {
138 | 	color: #005a8e;
139 | }
140 | 
141 | .token.important,
142 | .token.keyword-this,
143 | .token.this,
144 | .token.bold {
145 | 	font-weight: bold;
146 | }
147 | 
148 | .token.delimiter.important {
149 | 	font-weight: inherit;
150 | }
151 | 
152 | .token.italic {
153 | 	font-style: italic;
154 | }
155 | 
156 | .token.entity {
157 | 	cursor: help;
158 | }
159 | 
160 | .language-markdown .token.title,
161 | .language-markdown .token.title .token.punctuation {
162 | 	color: #005a8e;
163 | 	font-weight: bold;
164 | }
165 | 
166 | .language-markdown .token.blockquote.punctuation {
167 | 	color: #af00af;
168 | }
169 | 
170 | .language-markdown .token.code {
171 | 	color: #006d6d;
172 | }
173 | 
174 | .language-markdown .token.hr.punctuation {
175 | 	color: #005a8e;
176 | }
177 | 
178 | .language-markdown .token.url > .token.content {
179 | 	color: #116b00;
180 | }
181 | 
182 | .language-markdown .token.url-link {
183 | 	color: #755f00;
184 | }
185 | 
186 | .language-markdown .token.list.punctuation {
187 | 	color: #af00af;
188 | }
189 | 
190 | .language-markdown .token.table-header {
191 | 	color: #111b27;
192 | }
193 | 
194 | .language-json .token.operator {
195 | 	color: #111b27;
196 | }
197 | 
198 | .language-scss .token.variable {
199 | 	color: #006d6d;
200 | }
201 | 
202 | /* overrides color-values for the Show Invisibles plugin
203 |  * https://prismjs.com/plugins/show-invisibles/
204 |  */
205 | .token.token.tab:not(:empty):before,
206 | .token.token.cr:before,
207 | .token.token.lf:before,
208 | .token.token.space:before {
209 | 	color: #3c526d;
210 | }
211 | 
212 | /* overrides color-values for the Toolbar plugin
213 |  * https://prismjs.com/plugins/toolbar/
214 |  */
215 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > a,
216 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > button {
217 | 	color: #e3eaf2;
218 | 	background: #005a8e;
219 | }
220 | 
221 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover,
222 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus,
223 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover,
224 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus {
225 | 	color: #e3eaf2;
226 | 	background: #005a8eda;
227 | 	text-decoration: none;
228 | }
229 | 
230 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > span,
231 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover,
232 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus {
233 | 	color: #e3eaf2;
234 | 	background: #3c526d;
235 | }
236 | 
237 | /* overrides color-values for the Line Highlight plugin
238 |  * http://prismjs.com/plugins/line-highlight/
239 |  */
240 | .line-highlight.line-highlight {
241 | 	background: #8da1b92f;
242 | 	background: linear-gradient(to right, #8da1b92f 70%, #8da1b925);
243 | }
244 | 
245 | .line-highlight.line-highlight:before,
246 | .line-highlight.line-highlight[data-end]:after {
247 | 	background-color: #3c526d;
248 | 	color: #e3eaf2;
249 | 	box-shadow: 0 1px #8da1b9;
250 | }
251 | 
252 | pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before {
253 | 	background-color: #3c526d1f;
254 | }
255 | 
256 | /* overrides color-values for the Line Numbers plugin
257 |  * http://prismjs.com/plugins/line-numbers/
258 |  */
259 | .line-numbers.line-numbers .line-numbers-rows {
260 | 	border-right: 1px solid #8da1b97a;
261 | 	background: #d0dae77a;
262 | }
263 | 
264 | .line-numbers .line-numbers-rows > span:before {
265 | 	color: #3c526dda;
266 | }
267 | 
268 | /* overrides color-values for the Match Braces plugin
269 |  * https://prismjs.com/plugins/match-braces/
270 |  */
271 | .rainbow-braces .token.token.punctuation.brace-level-1,
272 | .rainbow-braces .token.token.punctuation.brace-level-5,
273 | .rainbow-braces .token.token.punctuation.brace-level-9 {
274 | 	color: #755f00;
275 | }
276 | 
277 | .rainbow-braces .token.token.punctuation.brace-level-2,
278 | .rainbow-braces .token.token.punctuation.brace-level-6,
279 | .rainbow-braces .token.token.punctuation.brace-level-10 {
280 | 	color: #af00af;
281 | }
282 | 
283 | .rainbow-braces .token.token.punctuation.brace-level-3,
284 | .rainbow-braces .token.token.punctuation.brace-level-7,
285 | .rainbow-braces .token.token.punctuation.brace-level-11 {
286 | 	color: #005a8e;
287 | }
288 | 
289 | .rainbow-braces .token.token.punctuation.brace-level-4,
290 | .rainbow-braces .token.token.punctuation.brace-level-8,
291 | .rainbow-braces .token.token.punctuation.brace-level-12 {
292 | 	color: #7c00aa;
293 | }
294 | 
295 | /* overrides color-values for the Diff Highlight plugin
296 |  * https://prismjs.com/plugins/diff-highlight/
297 |  */
298 | pre.diff-highlight > code .token.token.deleted:not(.prefix),
299 | pre > code.diff-highlight .token.token.deleted:not(.prefix) {
300 | 	background-color: #c22f2e1f;
301 | }
302 | 
303 | pre.diff-highlight > code .token.token.inserted:not(.prefix),
304 | pre > code.diff-highlight .token.token.inserted:not(.prefix) {
305 | 	background-color: #116b001f;
306 | }
307 | 
308 | /* overrides color-values for the Command Line plugin
309 |  * https://prismjs.com/plugins/command-line/
310 |  */
311 | .command-line .command-line-prompt {
312 | 	border-right: 1px solid #8da1b97a;
313 | }
314 | 
315 | .command-line .command-line-prompt > span:before {
316 | 	color: #3c526dda;
317 | }
318 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/coldark-dark.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Coldark Theme for Prism.js
  3 |  * Theme variation: Dark
  4 |  * Tested with HTML, CSS, JS, JSON, PHP, YAML, Bash script
  5 |  * @author Armand Philippot <contact@armandphilippot.com>
  6 |  * @homepage https://github.com/ArmandPhilippot/coldark-prism
  7 |  * @license MIT
  8 |  */
  9 | code[class*="language-"],
 10 | pre[class*="language-"] {
 11 | 	color: #e3eaf2;
 12 | 	background: none;
 13 | 	font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
 14 | 	text-align: left;
 15 | 	white-space: pre;
 16 | 	word-spacing: normal;
 17 | 	word-break: normal;
 18 | 	word-wrap: normal;
 19 | 	line-height: 1.5;
 20 | 	-moz-tab-size: 4;
 21 | 	-o-tab-size: 4;
 22 | 	tab-size: 4;
 23 | 	-webkit-hyphens: none;
 24 | 	-moz-hyphens: none;
 25 | 	-ms-hyphens: none;
 26 | 	hyphens: none;
 27 | }
 28 | 
 29 | pre[class*="language-"]::-moz-selection,
 30 | pre[class*="language-"] ::-moz-selection,
 31 | code[class*="language-"]::-moz-selection,
 32 | code[class*="language-"] ::-moz-selection {
 33 | 	background: #3c526d;
 34 | }
 35 | 
 36 | pre[class*="language-"]::selection,
 37 | pre[class*="language-"] ::selection,
 38 | code[class*="language-"]::selection,
 39 | code[class*="language-"] ::selection {
 40 | 	background: #3c526d;
 41 | }
 42 | 
 43 | /* Code blocks */
 44 | pre[class*="language-"] {
 45 | 	padding: 1em;
 46 | 	margin: 0.5em 0;
 47 | 	overflow: auto;
 48 | }
 49 | 
 50 | :not(pre) > code[class*="language-"],
 51 | pre[class*="language-"] {
 52 | 	background: #111b27;
 53 | }
 54 | 
 55 | /* Inline code */
 56 | :not(pre) > code[class*="language-"] {
 57 | 	padding: 0.1em 0.3em;
 58 | 	border-radius: 0.3em;
 59 | 	white-space: normal;
 60 | }
 61 | 
 62 | .token.comment,
 63 | .token.prolog,
 64 | .token.doctype,
 65 | .token.cdata {
 66 | 	color: #8da1b9;
 67 | }
 68 | 
 69 | .token.punctuation {
 70 | 	color: #e3eaf2;
 71 | }
 72 | 
 73 | .token.delimiter.important,
 74 | .token.selector .parent,
 75 | .token.tag,
 76 | .token.tag .token.punctuation {
 77 | 	color: #66cccc;
 78 | }
 79 | 
 80 | .token.attr-name,
 81 | .token.boolean,
 82 | .token.boolean.important,
 83 | .token.number,
 84 | .token.constant,
 85 | .token.selector .token.attribute {
 86 | 	color: #e6d37a;
 87 | }
 88 | 
 89 | .token.class-name,
 90 | .token.key,
 91 | .token.parameter,
 92 | .token.property,
 93 | .token.property-access,
 94 | .token.variable {
 95 | 	color: #6cb8e6;
 96 | }
 97 | 
 98 | .token.attr-value,
 99 | .token.inserted,
100 | .token.color,
101 | .token.selector .token.value,
102 | .token.string,
103 | .token.string .token.url-link {
104 | 	color: #91d076;
105 | }
106 | 
107 | .token.builtin,
108 | .token.keyword-array,
109 | .token.package,
110 | .token.regex {
111 | 	color: #f4adf4;
112 | }
113 | 
114 | .token.function,
115 | .token.selector .token.class,
116 | .token.selector .token.id {
117 | 	color: #c699e3;
118 | }
119 | 
120 | .token.atrule .token.rule,
121 | .token.combinator,
122 | .token.keyword,
123 | .token.operator,
124 | .token.pseudo-class,
125 | .token.pseudo-element,
126 | .token.selector,
127 | .token.unit {
128 | 	color: #e9ae7e;
129 | }
130 | 
131 | .token.deleted,
132 | .token.important {
133 | 	color: #cd6660;
134 | }
135 | 
136 | .token.keyword-this,
137 | .token.this {
138 | 	color: #6cb8e6;
139 | }
140 | 
141 | .token.important,
142 | .token.keyword-this,
143 | .token.this,
144 | .token.bold {
145 | 	font-weight: bold;
146 | }
147 | 
148 | .token.delimiter.important {
149 | 	font-weight: inherit;
150 | }
151 | 
152 | .token.italic {
153 | 	font-style: italic;
154 | }
155 | 
156 | .token.entity {
157 | 	cursor: help;
158 | }
159 | 
160 | .language-markdown .token.title,
161 | .language-markdown .token.title .token.punctuation {
162 | 	color: #6cb8e6;
163 | 	font-weight: bold;
164 | }
165 | 
166 | .language-markdown .token.blockquote.punctuation {
167 | 	color: #f4adf4;
168 | }
169 | 
170 | .language-markdown .token.code {
171 | 	color: #66cccc;
172 | }
173 | 
174 | .language-markdown .token.hr.punctuation {
175 | 	color: #6cb8e6;
176 | }
177 | 
178 | .language-markdown .token.url .token.content {
179 | 	color: #91d076;
180 | }
181 | 
182 | .language-markdown .token.url-link {
183 | 	color: #e6d37a;
184 | }
185 | 
186 | .language-markdown .token.list.punctuation {
187 | 	color: #f4adf4;
188 | }
189 | 
190 | .language-markdown .token.table-header {
191 | 	color: #e3eaf2;
192 | }
193 | 
194 | .language-json .token.operator {
195 | 	color: #e3eaf2;
196 | }
197 | 
198 | .language-scss .token.variable {
199 | 	color: #66cccc;
200 | }
201 | 
202 | /* overrides color-values for the Show Invisibles plugin
203 |  * https://prismjs.com/plugins/show-invisibles/
204 |  */
205 | .token.token.tab:not(:empty):before,
206 | .token.token.cr:before,
207 | .token.token.lf:before,
208 | .token.token.space:before {
209 | 	color: #8da1b9;
210 | }
211 | 
212 | /* overrides color-values for the Toolbar plugin
213 |  * https://prismjs.com/plugins/toolbar/
214 |  */
215 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > a,
216 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > button {
217 | 	color: #111b27;
218 | 	background: #6cb8e6;
219 | }
220 | 
221 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover,
222 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus,
223 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover,
224 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus {
225 | 	color: #111b27;
226 | 	background: #6cb8e6da;
227 | 	text-decoration: none;
228 | }
229 | 
230 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > span,
231 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover,
232 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus {
233 | 	color: #111b27;
234 | 	background: #8da1b9;
235 | }
236 | 
237 | /* overrides color-values for the Line Highlight plugin
238 |  * http://prismjs.com/plugins/line-highlight/
239 |  */
240 | .line-highlight.line-highlight {
241 | 	background: #3c526d5f;
242 | 	background: linear-gradient(to right, #3c526d5f 70%, #3c526d55);
243 | }
244 | 
245 | .line-highlight.line-highlight:before,
246 | .line-highlight.line-highlight[data-end]:after {
247 | 	background-color: #8da1b9;
248 | 	color: #111b27;
249 | 	box-shadow: 0 1px #3c526d;
250 | }
251 | 
252 | pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before {
253 | 	background-color: #8da1b918;
254 | }
255 | 
256 | /* overrides color-values for the Line Numbers plugin
257 |  * http://prismjs.com/plugins/line-numbers/
258 |  */
259 | .line-numbers.line-numbers .line-numbers-rows {
260 | 	border-right: 1px solid #0b121b;
261 | 	background: #0b121b7a;
262 | }
263 | 
264 | .line-numbers .line-numbers-rows > span:before {
265 | 	color: #8da1b9da;
266 | }
267 | 
268 | /* overrides color-values for the Match Braces plugin
269 |  * https://prismjs.com/plugins/match-braces/
270 |  */
271 | .rainbow-braces .token.token.punctuation.brace-level-1,
272 | .rainbow-braces .token.token.punctuation.brace-level-5,
273 | .rainbow-braces .token.token.punctuation.brace-level-9 {
274 | 	color: #e6d37a;
275 | }
276 | 
277 | .rainbow-braces .token.token.punctuation.brace-level-2,
278 | .rainbow-braces .token.token.punctuation.brace-level-6,
279 | .rainbow-braces .token.token.punctuation.brace-level-10 {
280 | 	color: #f4adf4;
281 | }
282 | 
283 | .rainbow-braces .token.token.punctuation.brace-level-3,
284 | .rainbow-braces .token.token.punctuation.brace-level-7,
285 | .rainbow-braces .token.token.punctuation.brace-level-11 {
286 | 	color: #6cb8e6;
287 | }
288 | 
289 | .rainbow-braces .token.token.punctuation.brace-level-4,
290 | .rainbow-braces .token.token.punctuation.brace-level-8,
291 | .rainbow-braces .token.token.punctuation.brace-level-12 {
292 | 	color: #c699e3;
293 | }
294 | 
295 | /* overrides color-values for the Diff Highlight plugin
296 |  * https://prismjs.com/plugins/diff-highlight/
297 |  */
298 | pre.diff-highlight > code .token.token.deleted:not(.prefix),
299 | pre > code.diff-highlight .token.token.deleted:not(.prefix) {
300 | 	background-color: #cd66601f;
301 | }
302 | 
303 | pre.diff-highlight > code .token.token.inserted:not(.prefix),
304 | pre > code.diff-highlight .token.token.inserted:not(.prefix) {
305 | 	background-color: #91d0761f;
306 | }
307 | 
308 | /* overrides color-values for the Command Line plugin
309 |  * https://prismjs.com/plugins/command-line/
310 |  */
311 | .command-line .command-line-prompt {
312 | 	border-right: 1px solid #0b121b;
313 | }
314 | 
315 | .command-line .command-line-prompt > span:before {
316 | 	color: #8da1b9da;
317 | }
318 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/coy-without-shadows.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Coy without shadows
  3 |  * Based on Tim Shedor's Coy theme for prism.js
  4 |  * Author: RunDevelopment
  5 |  */
  6 | 
  7 | code[class*="language-"],
  8 | pre[class*="language-"] {
  9 | 	color: black;
 10 | 	background: none;
 11 | 	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 12 | 	font-size: 1em;
 13 | 	text-align: left;
 14 | 	white-space: pre;
 15 | 	word-spacing: normal;
 16 | 	word-break: normal;
 17 | 	word-wrap: normal;
 18 | 	line-height: 1.5;
 19 | 
 20 | 	-moz-tab-size: 4;
 21 | 	-o-tab-size: 4;
 22 | 	tab-size: 4;
 23 | 
 24 | 	-webkit-hyphens: none;
 25 | 	-moz-hyphens: none;
 26 | 	-ms-hyphens: none;
 27 | 	hyphens: none;
 28 | }
 29 | 
 30 | /* Code blocks */
 31 | pre[class*="language-"] {
 32 | 	position: relative;
 33 | 	border-left: 10px solid #358ccb;
 34 | 	box-shadow: -1px 0 0 0 #358ccb, 0 0 0 1px #dfdfdf;
 35 | 	background-color: #fdfdfd;
 36 | 	background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
 37 | 	background-size: 3em 3em;
 38 | 	background-origin: content-box;
 39 | 	background-attachment: local;
 40 | 	margin: .5em 0;
 41 | 	padding: 0 1em;
 42 | }
 43 | 
 44 | pre[class*="language-"] > code {
 45 | 	display: block;
 46 | }
 47 | 
 48 | /* Inline code */
 49 | :not(pre) > code[class*="language-"] {
 50 | 	position: relative;
 51 | 	padding: .2em;
 52 | 	border-radius: 0.3em;
 53 | 	color: #c92c2c;
 54 | 	border: 1px solid rgba(0, 0, 0, 0.1);
 55 | 	display: inline;
 56 | 	white-space: normal;
 57 | 	background-color: #fdfdfd;
 58 | 	-webkit-box-sizing: border-box;
 59 | 	-moz-box-sizing: border-box;
 60 | 	box-sizing: border-box;
 61 | }
 62 | 
 63 | .token.comment,
 64 | .token.block-comment,
 65 | .token.prolog,
 66 | .token.doctype,
 67 | .token.cdata {
 68 | 	color: #7D8B99;
 69 | }
 70 | 
 71 | .token.punctuation {
 72 | 	color: #5F6364;
 73 | }
 74 | 
 75 | .token.property,
 76 | .token.tag,
 77 | .token.boolean,
 78 | .token.number,
 79 | .token.function-name,
 80 | .token.constant,
 81 | .token.symbol,
 82 | .token.deleted {
 83 | 	color: #c92c2c;
 84 | }
 85 | 
 86 | .token.selector,
 87 | .token.attr-name,
 88 | .token.string,
 89 | .token.char,
 90 | .token.function,
 91 | .token.builtin,
 92 | .token.inserted {
 93 | 	color: #2f9c0a;
 94 | }
 95 | 
 96 | .token.operator,
 97 | .token.entity,
 98 | .token.url,
 99 | .token.variable {
100 | 	color: #a67f59;
101 | 	background: rgba(255, 255, 255, 0.5);
102 | }
103 | 
104 | .token.atrule,
105 | .token.attr-value,
106 | .token.keyword,
107 | .token.class-name {
108 | 	color: #1990b8;
109 | }
110 | 
111 | .token.regex,
112 | .token.important {
113 | 	color: #e90;
114 | }
115 | 
116 | .language-css .token.string,
117 | .style .token.string {
118 | 	color: #a67f59;
119 | 	background: rgba(255, 255, 255, 0.5);
120 | }
121 | 
122 | .token.important {
123 | 	font-weight: normal;
124 | }
125 | 
126 | .token.bold {
127 | 	font-weight: bold;
128 | }
129 | 
130 | .token.italic {
131 | 	font-style: italic;
132 | }
133 | 
134 | .token.entity {
135 | 	cursor: help;
136 | }
137 | 
138 | .token.namespace {
139 | 	opacity: .7;
140 | }
141 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/darcula.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Darcula theme
  3 |  *
  4 |  * Adapted from a theme based on:
  5 |  * IntelliJ Darcula Theme (https://github.com/bulenkov/Darcula)
  6 |  *
  7 |  * @author Alexandre Paradis <service.paradis@gmail.com>
  8 |  * @version 1.0
  9 |  */
 10 | 
 11 | code[class*="language-"],
 12 | pre[class*="language-"] {
 13 | 	color: #a9b7c6;
 14 | 	font-family: Consolas, Monaco, 'Andale Mono', monospace;
 15 | 	direction: ltr;
 16 | 	text-align: left;
 17 | 	white-space: pre;
 18 | 	word-spacing: normal;
 19 | 	word-break: normal;
 20 | 	line-height: 1.5;
 21 | 
 22 | 	-moz-tab-size: 4;
 23 | 	-o-tab-size: 4;
 24 | 	tab-size: 4;
 25 | 
 26 | 	-webkit-hyphens: none;
 27 | 	-moz-hyphens: none;
 28 | 	-ms-hyphens: none;
 29 | 	hyphens: none;
 30 | }
 31 | 
 32 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 33 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
 34 | 	color: inherit;
 35 | 	background: rgba(33, 66, 131, .85);
 36 | }
 37 | 
 38 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 39 | code[class*="language-"]::selection, code[class*="language-"] ::selection {
 40 | 	color: inherit;
 41 | 	background: rgba(33, 66, 131, .85);
 42 | }
 43 | 
 44 | /* Code blocks */
 45 | pre[class*="language-"] {
 46 | 	padding: 1em;
 47 | 	margin: .5em 0;
 48 | 	overflow: auto;
 49 | }
 50 | 
 51 | :not(pre) > code[class*="language-"],
 52 | pre[class*="language-"] {
 53 | 	background: #2b2b2b;
 54 | }
 55 | 
 56 | /* Inline code */
 57 | :not(pre) > code[class*="language-"] {
 58 | 	padding: .1em;
 59 | 	border-radius: .3em;
 60 | }
 61 | 
 62 | .token.comment,
 63 | .token.prolog,
 64 | .token.cdata {
 65 | 	color: #808080;
 66 | }
 67 | 
 68 | .token.delimiter,
 69 | .token.boolean,
 70 | .token.keyword,
 71 | .token.selector,
 72 | .token.important,
 73 | .token.atrule {
 74 | 	color: #cc7832;
 75 | }
 76 | 
 77 | .token.operator,
 78 | .token.punctuation,
 79 | .token.attr-name {
 80 | 	color: #a9b7c6;
 81 | }
 82 | 
 83 | .token.tag,
 84 | .token.tag .punctuation,
 85 | .token.doctype,
 86 | .token.builtin {
 87 | 	color: #e8bf6a;
 88 | }
 89 | 
 90 | .token.entity,
 91 | .token.number,
 92 | .token.symbol {
 93 | 	color: #6897bb;
 94 | }
 95 | 
 96 | .token.property,
 97 | .token.constant,
 98 | .token.variable {
 99 | 	color: #9876aa;
100 | }
101 | 
102 | .token.string,
103 | .token.char {
104 | 	color: #6a8759;
105 | }
106 | 
107 | .token.attr-value,
108 | .token.attr-value .punctuation {
109 | 	color: #a5c261;
110 | }
111 | 
112 | .token.attr-value .punctuation:first-child {
113 | 	color: #a9b7c6;
114 | }
115 | 
116 | .token.url {
117 | 	color: #287bde;
118 | 	text-decoration: underline;
119 | }
120 | 
121 | .token.function {
122 | 	color: #ffc66d;
123 | }
124 | 
125 | .token.regex {
126 | 	background: #364135;
127 | }
128 | 
129 | .token.bold {
130 | 	font-weight: bold;
131 | }
132 | 
133 | .token.italic {
134 | 	font-style: italic;
135 | }
136 | 
137 | .token.inserted {
138 | 	background: #294436;
139 | }
140 | 
141 | .token.deleted {
142 | 	background: #484a4a;
143 | }
144 | 
145 | code.language-css .token.property,
146 | code.language-css .token.property + .token.punctuation {
147 | 	color: #a9b7c6;
148 | }
149 | 
150 | code.language-css .token.id {
151 | 	color: #ffc66d;
152 | }
153 | 
154 | code.language-css .token.selector > .token.class,
155 | code.language-css .token.selector > .token.attribute,
156 | code.language-css .token.selector > .token.pseudo-class,
157 | code.language-css .token.selector > .token.pseudo-element {
158 | 	color: #ffc66d;
159 | }
160 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/dracula.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Dracula Theme originally by Zeno Rocha [@zenorocha]
  3 |  * https://draculatheme.com/
  4 |  *
  5 |  * Ported for PrismJS by Albert Vallverdu [@byverdu]
  6 |  */
  7 | 
  8 | code[class*="language-"],
  9 | pre[class*="language-"] {
 10 | 	color: #f8f8f2;
 11 | 	background: none;
 12 | 	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
 13 | 	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 14 | 	text-align: left;
 15 | 	white-space: pre;
 16 | 	word-spacing: normal;
 17 | 	word-break: normal;
 18 | 	word-wrap: normal;
 19 | 	line-height: 1.5;
 20 | 	-moz-tab-size: 4;
 21 | 	-o-tab-size: 4;
 22 | 	tab-size: 4;
 23 | 	-webkit-hyphens: none;
 24 | 	-moz-hyphens: none;
 25 | 	-ms-hyphens: none;
 26 | 	hyphens: none;
 27 | }
 28 | 
 29 | /* Code blocks */
 30 | pre[class*="language-"] {
 31 | 	padding: 1em;
 32 | 	margin: .5em 0;
 33 | 	overflow: auto;
 34 | 	border-radius: 0.3em;
 35 | }
 36 | 
 37 | :not(pre) > code[class*="language-"],
 38 | pre[class*="language-"] {
 39 | 	background: #282a36;
 40 | }
 41 | 
 42 | /* Inline code */
 43 | :not(pre) > code[class*="language-"] {
 44 | 	padding: .1em;
 45 | 	border-radius: .3em;
 46 | 	white-space: normal;
 47 | }
 48 | 
 49 | .token.comment,
 50 | .token.prolog,
 51 | .token.doctype,
 52 | .token.cdata {
 53 | 	color: #6272a4;
 54 | }
 55 | 
 56 | .token.punctuation {
 57 | 	color: #f8f8f2;
 58 | }
 59 | 
 60 | .namespace {
 61 | 	opacity: .7;
 62 | }
 63 | 
 64 | .token.property,
 65 | .token.tag,
 66 | .token.constant,
 67 | .token.symbol,
 68 | .token.deleted {
 69 | 	color: #ff79c6;
 70 | }
 71 | 
 72 | .token.boolean,
 73 | .token.number {
 74 | 	color: #bd93f9;
 75 | }
 76 | 
 77 | .token.selector,
 78 | .token.attr-name,
 79 | .token.string,
 80 | .token.char,
 81 | .token.builtin,
 82 | .token.inserted {
 83 | 	color: #50fa7b;
 84 | }
 85 | 
 86 | .token.operator,
 87 | .token.entity,
 88 | .token.url,
 89 | .language-css .token.string,
 90 | .style .token.string,
 91 | .token.variable {
 92 | 	color: #f8f8f2;
 93 | }
 94 | 
 95 | .token.atrule,
 96 | .token.attr-value,
 97 | .token.function,
 98 | .token.class-name {
 99 | 	color: #f1fa8c;
100 | }
101 | 
102 | .token.keyword {
103 | 	color: #8be9fd;
104 | }
105 | 
106 | .token.regex,
107 | .token.important {
108 | 	color: #ffb86c;
109 | }
110 | 
111 | .token.important,
112 | .token.bold {
113 | 	font-weight: bold;
114 | }
115 | 
116 | .token.italic {
117 | 	font-style: italic;
118 | }
119 | 
120 | .token.entity {
121 | 	cursor: help;
122 | }
123 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/duotone-dark.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | Name: Duotone Dark
  3 | Author: Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes)
  4 | 
  5 | Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-evening-dark.css)
  6 | Generated with Base16 Builder (https://github.com/base16-builder/base16-builder)
  7 | */
  8 | 
  9 | code[class*="language-"],
 10 | pre[class*="language-"] {
 11 | 	font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
 12 | 	font-size: 14px;
 13 | 	line-height: 1.375;
 14 | 	direction: ltr;
 15 | 	text-align: left;
 16 | 	white-space: pre;
 17 | 	word-spacing: normal;
 18 | 	word-break: normal;
 19 | 
 20 | 	-moz-tab-size: 4;
 21 | 	-o-tab-size: 4;
 22 | 	tab-size: 4;
 23 | 
 24 | 	-webkit-hyphens: none;
 25 | 	-moz-hyphens: none;
 26 | 	-ms-hyphens: none;
 27 | 	hyphens: none;
 28 | 	background: #2a2734;
 29 | 	color: #9a86fd;
 30 | }
 31 | 
 32 | pre > code[class*="language-"] {
 33 | 	font-size: 1em;
 34 | }
 35 | 
 36 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 37 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
 38 | 	text-shadow: none;
 39 | 	background: #6a51e6;
 40 | }
 41 | 
 42 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 43 | code[class*="language-"]::selection, code[class*="language-"] ::selection {
 44 | 	text-shadow: none;
 45 | 	background: #6a51e6;
 46 | }
 47 | 
 48 | /* Code blocks */
 49 | pre[class*="language-"] {
 50 | 	padding: 1em;
 51 | 	margin: .5em 0;
 52 | 	overflow: auto;
 53 | }
 54 | 
 55 | /* Inline code */
 56 | :not(pre) > code[class*="language-"] {
 57 | 	padding: .1em;
 58 | 	border-radius: .3em;
 59 | }
 60 | 
 61 | .token.comment,
 62 | .token.prolog,
 63 | .token.doctype,
 64 | .token.cdata {
 65 | 	color: #6c6783;
 66 | }
 67 | 
 68 | .token.punctuation {
 69 | 	color: #6c6783;
 70 | }
 71 | 
 72 | .token.namespace {
 73 | 	opacity: .7;
 74 | }
 75 | 
 76 | .token.tag,
 77 | .token.operator,
 78 | .token.number {
 79 | 	color: #e09142;
 80 | }
 81 | 
 82 | .token.property,
 83 | .token.function {
 84 | 	color: #9a86fd;
 85 | }
 86 | 
 87 | .token.tag-id,
 88 | .token.selector,
 89 | .token.atrule-id {
 90 | 	color: #eeebff;
 91 | }
 92 | 
 93 | code.language-javascript,
 94 | .token.attr-name {
 95 | 	color: #c4b9fe;
 96 | }
 97 | 
 98 | code.language-css,
 99 | code.language-scss,
100 | .token.boolean,
101 | .token.string,
102 | .token.entity,
103 | .token.url,
104 | .language-css .token.string,
105 | .language-scss .token.string,
106 | .style .token.string,
107 | .token.attr-value,
108 | .token.keyword,
109 | .token.control,
110 | .token.directive,
111 | .token.unit,
112 | .token.statement,
113 | .token.regex,
114 | .token.atrule {
115 | 	color: #ffcc99;
116 | }
117 | 
118 | .token.placeholder,
119 | .token.variable {
120 | 	color: #ffcc99;
121 | }
122 | 
123 | .token.deleted {
124 | 	text-decoration: line-through;
125 | }
126 | 
127 | .token.inserted {
128 | 	border-bottom: 1px dotted #eeebff;
129 | 	text-decoration: none;
130 | }
131 | 
132 | .token.italic {
133 | 	font-style: italic;
134 | }
135 | 
136 | .token.important,
137 | .token.bold {
138 | 	font-weight: bold;
139 | }
140 | 
141 | .token.important {
142 | 	color: #c4b9fe;
143 | }
144 | 
145 | .token.entity {
146 | 	cursor: help;
147 | }
148 | 
149 | pre > code.highlight {
150 | 	outline: .4em solid #8a75f5;
151 | 	outline-offset: .4em;
152 | }
153 | 
154 | /* overrides color-values for the Line Numbers plugin
155 |  * http://prismjs.com/plugins/line-numbers/
156 |  */
157 | .line-numbers.line-numbers .line-numbers-rows {
158 | 	border-right-color: #2c2937;
159 | }
160 | 
161 | .line-numbers .line-numbers-rows > span:before {
162 | 	color: #3c3949;
163 | }
164 | 
165 | /* overrides color-values for the Line Highlight plugin
166 | * http://prismjs.com/plugins/line-highlight/
167 | */
168 | .line-highlight.line-highlight {
169 | 	background: rgba(224, 145, 66, 0.2);
170 | 	background: -webkit-linear-gradient(left, rgba(224, 145, 66, 0.2) 70%, rgba(224, 145, 66, 0));
171 | 	background: linear-gradient(to right, rgba(224, 145, 66, 0.2) 70%, rgba(224, 145, 66, 0));
172 | }
173 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/duotone-earth.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | Name:   Duotone Earth
  3 | Author: Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes)
  4 | 
  5 | Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-earth-dark.css)
  6 | Generated with Base16 Builder (https://github.com/base16-builder/base16-builder)
  7 | */
  8 | 
  9 | code[class*="language-"],
 10 | pre[class*="language-"] {
 11 | 	font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
 12 | 	font-size: 14px;
 13 | 	line-height: 1.375;
 14 | 	direction: ltr;
 15 | 	text-align: left;
 16 | 	white-space: pre;
 17 | 	word-spacing: normal;
 18 | 	word-break: normal;
 19 | 
 20 | 	-moz-tab-size: 4;
 21 | 	-o-tab-size: 4;
 22 | 	tab-size: 4;
 23 | 
 24 | 	-webkit-hyphens: none;
 25 | 	-moz-hyphens: none;
 26 | 	-ms-hyphens: none;
 27 | 	hyphens: none;
 28 | 	background: #322d29;
 29 | 	color: #88786d;
 30 | }
 31 | 
 32 | pre > code[class*="language-"] {
 33 | 	font-size: 1em;
 34 | }
 35 | 
 36 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 37 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
 38 | 	text-shadow: none;
 39 | 	background: #6f5849;
 40 | }
 41 | 
 42 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 43 | code[class*="language-"]::selection, code[class*="language-"] ::selection {
 44 | 	text-shadow: none;
 45 | 	background: #6f5849;
 46 | }
 47 | 
 48 | /* Code blocks */
 49 | pre[class*="language-"] {
 50 | 	padding: 1em;
 51 | 	margin: .5em 0;
 52 | 	overflow: auto;
 53 | }
 54 | 
 55 | /* Inline code */
 56 | :not(pre) > code[class*="language-"] {
 57 | 	padding: .1em;
 58 | 	border-radius: .3em;
 59 | }
 60 | 
 61 | .token.comment,
 62 | .token.prolog,
 63 | .token.doctype,
 64 | .token.cdata {
 65 | 	color: #6a5f58;
 66 | }
 67 | 
 68 | .token.punctuation {
 69 | 	color: #6a5f58;
 70 | }
 71 | 
 72 | .token.namespace {
 73 | 	opacity: .7;
 74 | }
 75 | 
 76 | .token.tag,
 77 | .token.operator,
 78 | .token.number {
 79 | 	color: #bfa05a;
 80 | }
 81 | 
 82 | .token.property,
 83 | .token.function {
 84 | 	color: #88786d;
 85 | }
 86 | 
 87 | .token.tag-id,
 88 | .token.selector,
 89 | .token.atrule-id {
 90 | 	color: #fff3eb;
 91 | }
 92 | 
 93 | code.language-javascript,
 94 | .token.attr-name {
 95 | 	color: #a48774;
 96 | }
 97 | 
 98 | code.language-css,
 99 | code.language-scss,
100 | .token.boolean,
101 | .token.string,
102 | .token.entity,
103 | .token.url,
104 | .language-css .token.string,
105 | .language-scss .token.string,
106 | .style .token.string,
107 | .token.attr-value,
108 | .token.keyword,
109 | .token.control,
110 | .token.directive,
111 | .token.unit,
112 | .token.statement,
113 | .token.regex,
114 | .token.atrule {
115 | 	color: #fcc440;
116 | }
117 | 
118 | .token.placeholder,
119 | .token.variable {
120 | 	color: #fcc440;
121 | }
122 | 
123 | .token.deleted {
124 | 	text-decoration: line-through;
125 | }
126 | 
127 | .token.inserted {
128 | 	border-bottom: 1px dotted #fff3eb;
129 | 	text-decoration: none;
130 | }
131 | 
132 | .token.italic {
133 | 	font-style: italic;
134 | }
135 | 
136 | .token.important,
137 | .token.bold {
138 | 	font-weight: bold;
139 | }
140 | 
141 | .token.important {
142 | 	color: #a48774;
143 | }
144 | 
145 | .token.entity {
146 | 	cursor: help;
147 | }
148 | 
149 | pre > code.highlight {
150 | 	outline: .4em solid #816d5f;
151 | 	outline-offset: .4em;
152 | }
153 | 
154 | /* overrides color-values for the Line Numbers plugin
155 |  * http://prismjs.com/plugins/line-numbers/
156 |  */
157 | .line-numbers.line-numbers .line-numbers-rows {
158 | 	border-right-color: #35302b;
159 | }
160 | 
161 | .line-numbers .line-numbers-rows > span:before {
162 | 	color: #46403d;
163 | }
164 | 
165 | /* overrides color-values for the Line Highlight plugin
166 | * http://prismjs.com/plugins/line-highlight/
167 | */
168 | .line-highlight.line-highlight {
169 | 	background: rgba(191, 160, 90, 0.2);
170 | 	background: -webkit-linear-gradient(left, rgba(191, 160, 90, 0.2) 70%, rgba(191, 160, 90, 0));
171 | 	background: linear-gradient(to right, rgba(191, 160, 90, 0.2) 70%, rgba(191, 160, 90, 0));
172 | }
173 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/duotone-forest.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | Name:   Duotone Forest
  3 | Author: by Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes)
  4 | 
  5 | Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-forest-dark.css)
  6 | Generated with Base16 Builder (https://github.com/base16-builder/base16-builder)
  7 | */
  8 | 
  9 | code[class*="language-"],
 10 | pre[class*="language-"] {
 11 | 	font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
 12 | 	font-size: 14px;
 13 | 	line-height: 1.375;
 14 | 	direction: ltr;
 15 | 	text-align: left;
 16 | 	white-space: pre;
 17 | 	word-spacing: normal;
 18 | 	word-break: normal;
 19 | 
 20 | 	-moz-tab-size: 4;
 21 | 	-o-tab-size: 4;
 22 | 	tab-size: 4;
 23 | 
 24 | 	-webkit-hyphens: none;
 25 | 	-moz-hyphens: none;
 26 | 	-ms-hyphens: none;
 27 | 	hyphens: none;
 28 | 	background: #2a2d2a;
 29 | 	color: #687d68;
 30 | }
 31 | 
 32 | pre > code[class*="language-"] {
 33 | 	font-size: 1em;
 34 | }
 35 | 
 36 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 37 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
 38 | 	text-shadow: none;
 39 | 	background: #435643;
 40 | }
 41 | 
 42 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 43 | code[class*="language-"]::selection, code[class*="language-"] ::selection {
 44 | 	text-shadow: none;
 45 | 	background: #435643;
 46 | }
 47 | 
 48 | /* Code blocks */
 49 | pre[class*="language-"] {
 50 | 	padding: 1em;
 51 | 	margin: .5em 0;
 52 | 	overflow: auto;
 53 | }
 54 | 
 55 | /* Inline code */
 56 | :not(pre) > code[class*="language-"] {
 57 | 	padding: .1em;
 58 | 	border-radius: .3em;
 59 | }
 60 | 
 61 | .token.comment,
 62 | .token.prolog,
 63 | .token.doctype,
 64 | .token.cdata {
 65 | 	color: #535f53;
 66 | }
 67 | 
 68 | .token.punctuation {
 69 | 	color: #535f53;
 70 | }
 71 | 
 72 | .token.namespace {
 73 | 	opacity: .7;
 74 | }
 75 | 
 76 | .token.tag,
 77 | .token.operator,
 78 | .token.number {
 79 | 	color: #a2b34d;
 80 | }
 81 | 
 82 | .token.property,
 83 | .token.function {
 84 | 	color: #687d68;
 85 | }
 86 | 
 87 | .token.tag-id,
 88 | .token.selector,
 89 | .token.atrule-id {
 90 | 	color: #f0fff0;
 91 | }
 92 | 
 93 | code.language-javascript,
 94 | .token.attr-name {
 95 | 	color: #b3d6b3;
 96 | }
 97 | 
 98 | code.language-css,
 99 | code.language-scss,
100 | .token.boolean,
101 | .token.string,
102 | .token.entity,
103 | .token.url,
104 | .language-css .token.string,
105 | .language-scss .token.string,
106 | .style .token.string,
107 | .token.attr-value,
108 | .token.keyword,
109 | .token.control,
110 | .token.directive,
111 | .token.unit,
112 | .token.statement,
113 | .token.regex,
114 | .token.atrule {
115 | 	color: #e5fb79;
116 | }
117 | 
118 | .token.placeholder,
119 | .token.variable {
120 | 	color: #e5fb79;
121 | }
122 | 
123 | .token.deleted {
124 | 	text-decoration: line-through;
125 | }
126 | 
127 | .token.inserted {
128 | 	border-bottom: 1px dotted #f0fff0;
129 | 	text-decoration: none;
130 | }
131 | 
132 | .token.italic {
133 | 	font-style: italic;
134 | }
135 | 
136 | .token.important,
137 | .token.bold {
138 | 	font-weight: bold;
139 | }
140 | 
141 | .token.important {
142 | 	color: #b3d6b3;
143 | }
144 | 
145 | .token.entity {
146 | 	cursor: help;
147 | }
148 | 
149 | pre > code.highlight {
150 | 	outline: .4em solid #5c705c;
151 | 	outline-offset: .4em;
152 | }
153 | 
154 | /* overrides color-values for the Line Numbers plugin
155 |  * http://prismjs.com/plugins/line-numbers/
156 |  */
157 | .line-numbers.line-numbers .line-numbers-rows {
158 | 	border-right-color: #2c302c;
159 | }
160 | 
161 | .line-numbers .line-numbers-rows > span:before {
162 | 	color: #3b423b;
163 | }
164 | 
165 | /* overrides color-values for the Line Highlight plugin
166 | * http://prismjs.com/plugins/line-highlight/
167 | */
168 | .line-highlight.line-highlight {
169 | 	background: rgba(162, 179, 77, 0.2);
170 | 	background: -webkit-linear-gradient(left, rgba(162, 179, 77, 0.2) 70%, rgba(162, 179, 77, 0));
171 | 	background: linear-gradient(to right, rgba(162, 179, 77, 0.2) 70%, rgba(162, 179, 77, 0));
172 | }
173 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/duotone-light.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | Name:   Duotone Light
  3 | Author: Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes)
  4 | 
  5 | Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-morning-light.css)
  6 | Generated with Base16 Builder (https://github.com/base16-builder/base16-builder)
  7 | */
  8 | 
  9 | code[class*="language-"],
 10 | pre[class*="language-"] {
 11 | 	font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
 12 | 	font-size: 14px;
 13 | 	line-height: 1.375;
 14 | 	direction: ltr;
 15 | 	text-align: left;
 16 | 	white-space: pre;
 17 | 	word-spacing: normal;
 18 | 	word-break: normal;
 19 | 
 20 | 	-moz-tab-size: 4;
 21 | 	-o-tab-size: 4;
 22 | 	tab-size: 4;
 23 | 
 24 | 	-webkit-hyphens: none;
 25 | 	-moz-hyphens: none;
 26 | 	-ms-hyphens: none;
 27 | 	hyphens: none;
 28 | 	background: #faf8f5;
 29 | 	color: #728fcb;
 30 | }
 31 | 
 32 | pre > code[class*="language-"] {
 33 | 	font-size: 1em;
 34 | }
 35 | 
 36 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 37 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
 38 | 	text-shadow: none;
 39 | 	background: #faf8f5;
 40 | }
 41 | 
 42 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 43 | code[class*="language-"]::selection, code[class*="language-"] ::selection {
 44 | 	text-shadow: none;
 45 | 	background: #faf8f5;
 46 | }
 47 | 
 48 | /* Code blocks */
 49 | pre[class*="language-"] {
 50 | 	padding: 1em;
 51 | 	margin: .5em 0;
 52 | 	overflow: auto;
 53 | }
 54 | 
 55 | /* Inline code */
 56 | :not(pre) > code[class*="language-"] {
 57 | 	padding: .1em;
 58 | 	border-radius: .3em;
 59 | }
 60 | 
 61 | .token.comment,
 62 | .token.prolog,
 63 | .token.doctype,
 64 | .token.cdata {
 65 | 	color: #b6ad9a;
 66 | }
 67 | 
 68 | .token.punctuation {
 69 | 	color: #b6ad9a;
 70 | }
 71 | 
 72 | .token.namespace {
 73 | 	opacity: .7;
 74 | }
 75 | 
 76 | .token.tag,
 77 | .token.operator,
 78 | .token.number {
 79 | 	color: #063289;
 80 | }
 81 | 
 82 | .token.property,
 83 | .token.function {
 84 | 	color: #b29762;
 85 | }
 86 | 
 87 | .token.tag-id,
 88 | .token.selector,
 89 | .token.atrule-id {
 90 | 	color: #2d2006;
 91 | }
 92 | 
 93 | code.language-javascript,
 94 | .token.attr-name {
 95 | 	color: #896724;
 96 | }
 97 | 
 98 | code.language-css,
 99 | code.language-scss,
100 | .token.boolean,
101 | .token.string,
102 | .token.entity,
103 | .token.url,
104 | .language-css .token.string,
105 | .language-scss .token.string,
106 | .style .token.string,
107 | .token.attr-value,
108 | .token.keyword,
109 | .token.control,
110 | .token.directive,
111 | .token.unit,
112 | .token.statement,
113 | .token.regex,
114 | .token.atrule {
115 | 	color: #728fcb;
116 | }
117 | 
118 | .token.placeholder,
119 | .token.variable {
120 | 	color: #93abdc;
121 | }
122 | 
123 | .token.deleted {
124 | 	text-decoration: line-through;
125 | }
126 | 
127 | .token.inserted {
128 | 	border-bottom: 1px dotted #2d2006;
129 | 	text-decoration: none;
130 | }
131 | 
132 | .token.italic {
133 | 	font-style: italic;
134 | }
135 | 
136 | .token.important,
137 | .token.bold {
138 | 	font-weight: bold;
139 | }
140 | 
141 | .token.important {
142 | 	color: #896724;
143 | }
144 | 
145 | .token.entity {
146 | 	cursor: help;
147 | }
148 | 
149 | pre > code.highlight {
150 | 	outline: .4em solid #896724;
151 | 	outline-offset: .4em;
152 | }
153 | 
154 | /* overrides color-values for the Line Numbers plugin
155 |  * http://prismjs.com/plugins/line-numbers/
156 |  */
157 | .line-numbers.line-numbers .line-numbers-rows {
158 | 	border-right-color: #ece8de;
159 | }
160 | 
161 | .line-numbers .line-numbers-rows > span:before {
162 | 	color: #cdc4b1;
163 | }
164 | 
165 | /* overrides color-values for the Line Highlight plugin
166 |  * http://prismjs.com/plugins/line-highlight/
167 |  */
168 | .line-highlight.line-highlight {
169 | 	background: rgba(45, 32, 6, 0.2);
170 | 	background: -webkit-linear-gradient(left, rgba(45, 32, 6, 0.2) 70%, rgba(45, 32, 6, 0));
171 | 	background: linear-gradient(to right, rgba(45, 32, 6, 0.2) 70%, rgba(45, 32, 6, 0));
172 | }
173 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/duotone-sea.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | Name: Duotone Sea
  3 | Author: by Simurai, adapted from DuoTone themes by Simurai for Atom (http://simurai.com/projects/2016/01/01/duotone-themes)
  4 | 
  5 | Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-sea-dark.css)
  6 | Generated with Base16 Builder (https://github.com/base16-builder/base16-builder)
  7 | */
  8 | 
  9 | code[class*="language-"],
 10 | pre[class*="language-"] {
 11 | 	font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
 12 | 	font-size: 14px;
 13 | 	line-height: 1.375;
 14 | 	direction: ltr;
 15 | 	text-align: left;
 16 | 	white-space: pre;
 17 | 	word-spacing: normal;
 18 | 	word-break: normal;
 19 | 
 20 | 	-moz-tab-size: 4;
 21 | 	-o-tab-size: 4;
 22 | 	tab-size: 4;
 23 | 
 24 | 	-webkit-hyphens: none;
 25 | 	-moz-hyphens: none;
 26 | 	-ms-hyphens: none;
 27 | 	hyphens: none;
 28 | 	background: #1d262f;
 29 | 	color: #57718e;
 30 | }
 31 | 
 32 | pre > code[class*="language-"] {
 33 | 	font-size: 1em;
 34 | }
 35 | 
 36 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 37 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
 38 | 	text-shadow: none;
 39 | 	background: #004a9e;
 40 | }
 41 | 
 42 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 43 | code[class*="language-"]::selection, code[class*="language-"] ::selection {
 44 | 	text-shadow: none;
 45 | 	background: #004a9e;
 46 | }
 47 | 
 48 | /* Code blocks */
 49 | pre[class*="language-"] {
 50 | 	padding: 1em;
 51 | 	margin: .5em 0;
 52 | 	overflow: auto;
 53 | }
 54 | 
 55 | /* Inline code */
 56 | :not(pre) > code[class*="language-"] {
 57 | 	padding: .1em;
 58 | 	border-radius: .3em;
 59 | }
 60 | 
 61 | .token.comment,
 62 | .token.prolog,
 63 | .token.doctype,
 64 | .token.cdata {
 65 | 	color: #4a5f78;
 66 | }
 67 | 
 68 | .token.punctuation {
 69 | 	color: #4a5f78;
 70 | }
 71 | 
 72 | .token.namespace {
 73 | 	opacity: .7;
 74 | }
 75 | 
 76 | .token.tag,
 77 | .token.operator,
 78 | .token.number {
 79 | 	color: #0aa370;
 80 | }
 81 | 
 82 | .token.property,
 83 | .token.function {
 84 | 	color: #57718e;
 85 | }
 86 | 
 87 | .token.tag-id,
 88 | .token.selector,
 89 | .token.atrule-id {
 90 | 	color: #ebf4ff;
 91 | }
 92 | 
 93 | code.language-javascript,
 94 | .token.attr-name {
 95 | 	color: #7eb6f6;
 96 | }
 97 | 
 98 | code.language-css,
 99 | code.language-scss,
100 | .token.boolean,
101 | .token.string,
102 | .token.entity,
103 | .token.url,
104 | .language-css .token.string,
105 | .language-scss .token.string,
106 | .style .token.string,
107 | .token.attr-value,
108 | .token.keyword,
109 | .token.control,
110 | .token.directive,
111 | .token.unit,
112 | .token.statement,
113 | .token.regex,
114 | .token.atrule {
115 | 	color: #47ebb4;
116 | }
117 | 
118 | .token.placeholder,
119 | .token.variable {
120 | 	color: #47ebb4;
121 | }
122 | 
123 | .token.deleted {
124 | 	text-decoration: line-through;
125 | }
126 | 
127 | .token.inserted {
128 | 	border-bottom: 1px dotted #ebf4ff;
129 | 	text-decoration: none;
130 | }
131 | 
132 | .token.italic {
133 | 	font-style: italic;
134 | }
135 | 
136 | .token.important,
137 | .token.bold {
138 | 	font-weight: bold;
139 | }
140 | 
141 | .token.important {
142 | 	color: #7eb6f6;
143 | }
144 | 
145 | .token.entity {
146 | 	cursor: help;
147 | }
148 | 
149 | pre > code.highlight {
150 | 	outline: .4em solid #34659d;
151 | 	outline-offset: .4em;
152 | }
153 | 
154 | /* overrides color-values for the Line Numbers plugin
155 |  * http://prismjs.com/plugins/line-numbers/
156 |  */
157 | .line-numbers.line-numbers .line-numbers-rows {
158 | 	border-right-color: #1f2932;
159 | }
160 | 
161 | .line-numbers .line-numbers-rows > span:before {
162 | 	color: #2c3847;
163 | }
164 | 
165 | /* overrides color-values for the Line Highlight plugin
166 | * http://prismjs.com/plugins/line-highlight/
167 | */
168 | .line-highlight.line-highlight {
169 | 	background: rgba(10, 163, 112, 0.2);
170 | 	background: -webkit-linear-gradient(left, rgba(10, 163, 112, 0.2) 70%, rgba(10, 163, 112, 0));
171 | 	background: linear-gradient(to right, rgba(10, 163, 112, 0.2) 70%, rgba(10, 163, 112, 0));
172 | }
173 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/duotone-space.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | Name: Duotone Space
  3 | Author: Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes)
  4 | 
  5 | Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-space-dark.css)
  6 | Generated with Base16 Builder (https://github.com/base16-builder/base16-builder)
  7 | */
  8 | 
  9 | code[class*="language-"],
 10 | pre[class*="language-"] {
 11 | 	font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
 12 | 	font-size: 14px;
 13 | 	line-height: 1.375;
 14 | 	direction: ltr;
 15 | 	text-align: left;
 16 | 	white-space: pre;
 17 | 	word-spacing: normal;
 18 | 	word-break: normal;
 19 | 
 20 | 	-moz-tab-size: 4;
 21 | 	-o-tab-size: 4;
 22 | 	tab-size: 4;
 23 | 
 24 | 	-webkit-hyphens: none;
 25 | 	-moz-hyphens: none;
 26 | 	-ms-hyphens: none;
 27 | 	hyphens: none;
 28 | 	background: #24242e;
 29 | 	color: #767693;
 30 | }
 31 | 
 32 | pre > code[class*="language-"] {
 33 | 	font-size: 1em;
 34 | }
 35 | 
 36 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 37 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
 38 | 	text-shadow: none;
 39 | 	background: #5151e6;
 40 | }
 41 | 
 42 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 43 | code[class*="language-"]::selection, code[class*="language-"] ::selection {
 44 | 	text-shadow: none;
 45 | 	background: #5151e6;
 46 | }
 47 | 
 48 | /* Code blocks */
 49 | pre[class*="language-"] {
 50 | 	padding: 1em;
 51 | 	margin: .5em 0;
 52 | 	overflow: auto;
 53 | }
 54 | 
 55 | /* Inline code */
 56 | :not(pre) > code[class*="language-"] {
 57 | 	padding: .1em;
 58 | 	border-radius: .3em;
 59 | }
 60 | 
 61 | .token.comment,
 62 | .token.prolog,
 63 | .token.doctype,
 64 | .token.cdata {
 65 | 	color: #5b5b76;
 66 | }
 67 | 
 68 | .token.punctuation {
 69 | 	color: #5b5b76;
 70 | }
 71 | 
 72 | .token.namespace {
 73 | 	opacity: .7;
 74 | }
 75 | 
 76 | .token.tag,
 77 | .token.operator,
 78 | .token.number {
 79 | 	color: #dd672c;
 80 | }
 81 | 
 82 | .token.property,
 83 | .token.function {
 84 | 	color: #767693;
 85 | }
 86 | 
 87 | .token.tag-id,
 88 | .token.selector,
 89 | .token.atrule-id {
 90 | 	color: #ebebff;
 91 | }
 92 | 
 93 | code.language-javascript,
 94 | .token.attr-name {
 95 | 	color: #aaaaca;
 96 | }
 97 | 
 98 | code.language-css,
 99 | code.language-scss,
100 | .token.boolean,
101 | .token.string,
102 | .token.entity,
103 | .token.url,
104 | .language-css .token.string,
105 | .language-scss .token.string,
106 | .style .token.string,
107 | .token.attr-value,
108 | .token.keyword,
109 | .token.control,
110 | .token.directive,
111 | .token.unit,
112 | .token.statement,
113 | .token.regex,
114 | .token.atrule {
115 | 	color: #fe8c52;
116 | }
117 | 
118 | .token.placeholder,
119 | .token.variable {
120 | 	color: #fe8c52;
121 | }
122 | 
123 | .token.deleted {
124 | 	text-decoration: line-through;
125 | }
126 | 
127 | .token.inserted {
128 | 	border-bottom: 1px dotted #ebebff;
129 | 	text-decoration: none;
130 | }
131 | 
132 | .token.italic {
133 | 	font-style: italic;
134 | }
135 | 
136 | .token.important,
137 | .token.bold {
138 | 	font-weight: bold;
139 | }
140 | 
141 | .token.important {
142 | 	color: #aaaaca;
143 | }
144 | 
145 | .token.entity {
146 | 	cursor: help;
147 | }
148 | 
149 | pre > code.highlight {
150 | 	outline: .4em solid #7676f4;
151 | 	outline-offset: .4em;
152 | }
153 | 
154 | /* overrides color-values for the Line Numbers plugin
155 |  * http://prismjs.com/plugins/line-numbers/
156 |  */
157 | .line-numbers.line-numbers .line-numbers-rows {
158 | 	border-right-color: #262631;
159 | }
160 | 
161 | .line-numbers .line-numbers-rows > span:before {
162 | 	color: #393949;
163 | }
164 | 
165 | /* overrides color-values for the Line Highlight plugin
166 | * http://prismjs.com/plugins/line-highlight/
167 | */
168 | .line-highlight.line-highlight {
169 | 	background: rgba(221, 103, 44, 0.2);
170 | 	background: -webkit-linear-gradient(left, rgba(221, 103, 44, 0.2) 70%, rgba(221, 103, 44, 0));
171 | 	background: linear-gradient(to right, rgba(221, 103, 44, 0.2) 70%, rgba(221, 103, 44, 0));
172 | }
173 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/ghcolors.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * GHColors theme by Avi Aryan (http://aviaryan.in)
  3 |  * Inspired by Github syntax coloring
  4 |  */
  5 | 
  6 | code[class*="language-"],
  7 | pre[class*="language-"] {
  8 | 	color: #393A34;
  9 | 	font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
 10 | 	direction: ltr;
 11 | 	text-align: left;
 12 | 	white-space: pre;
 13 | 	word-spacing: normal;
 14 | 	word-break: normal;
 15 | 	font-size: .9em;
 16 | 	line-height: 1.2em;
 17 | 
 18 | 	-moz-tab-size: 4;
 19 | 	-o-tab-size: 4;
 20 | 	tab-size: 4;
 21 | 
 22 | 	-webkit-hyphens: none;
 23 | 	-moz-hyphens: none;
 24 | 	-ms-hyphens: none;
 25 | 	hyphens: none;
 26 | }
 27 | 
 28 | pre > code[class*="language-"] {
 29 | 	font-size: 1em;
 30 | }
 31 | 
 32 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 33 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
 34 | 	background: #b3d4fc;
 35 | }
 36 | 
 37 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 38 | code[class*="language-"]::selection, code[class*="language-"] ::selection {
 39 | 	background: #b3d4fc;
 40 | }
 41 | 
 42 | /* Code blocks */
 43 | pre[class*="language-"] {
 44 | 	padding: 1em;
 45 | 	margin: .5em 0;
 46 | 	overflow: auto;
 47 | 	border: 1px solid #dddddd;
 48 | 	background-color: white;
 49 | }
 50 | 
 51 | /* Inline code */
 52 | :not(pre) > code[class*="language-"] {
 53 | 	padding: .2em;
 54 | 	padding-top: 1px;
 55 | 	padding-bottom: 1px;
 56 | 	background: #f8f8f8;
 57 | 	border: 1px solid #dddddd;
 58 | }
 59 | 
 60 | .token.comment,
 61 | .token.prolog,
 62 | .token.doctype,
 63 | .token.cdata {
 64 | 	color: #999988;
 65 | 	font-style: italic;
 66 | }
 67 | 
 68 | .token.namespace {
 69 | 	opacity: .7;
 70 | }
 71 | 
 72 | .token.string,
 73 | .token.attr-value {
 74 | 	color: #e3116c;
 75 | }
 76 | 
 77 | .token.punctuation,
 78 | .token.operator {
 79 | 	color: #393A34; /* no highlight */
 80 | }
 81 | 
 82 | .token.entity,
 83 | .token.url,
 84 | .token.symbol,
 85 | .token.number,
 86 | .token.boolean,
 87 | .token.variable,
 88 | .token.constant,
 89 | .token.property,
 90 | .token.regex,
 91 | .token.inserted {
 92 | 	color: #36acaa;
 93 | }
 94 | 
 95 | .token.atrule,
 96 | .token.keyword,
 97 | .token.attr-name,
 98 | .language-autohotkey .token.selector {
 99 | 	color: #00a4db;
100 | }
101 | 
102 | .token.function,
103 | .token.deleted,
104 | .language-autohotkey .token.tag {
105 | 	color: #9a050f;
106 | }
107 | 
108 | .token.tag,
109 | .token.selector,
110 | .language-autohotkey .token.keyword {
111 | 	color: #00009f;
112 | }
113 | 
114 | .token.important,
115 | .token.function,
116 | .token.bold {
117 | 	font-weight: bold;
118 | }
119 | 
120 | .token.italic {
121 | 	font-style: italic;
122 | }
123 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/gruvbox-dark.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Gruvbox dark theme
  3 |  *
  4 |  * Adapted from a theme based on:
  5 |  * Vim Gruvbox dark Theme (https://github.com/morhetz/gruvbox)
  6 |  *
  7 |  * @author Azat S. <to@azat.io>
  8 |  * @version 1.0
  9 |  */
 10 | 
 11 | code[class*="language-"],
 12 | pre[class*="language-"] {
 13 | 	color: #ebdbb2; /* fg1 / fg */
 14 | 	font-family: Consolas, Monaco, "Andale Mono", monospace;
 15 | 	direction: ltr;
 16 | 	text-align: left;
 17 | 	white-space: pre;
 18 | 	word-spacing: normal;
 19 | 	word-break: normal;
 20 | 	line-height: 1.5;
 21 | 
 22 | 	-moz-tab-size: 4;
 23 | 	-o-tab-size: 4;
 24 | 	tab-size: 4;
 25 | 
 26 | 	-webkit-hyphens: none;
 27 | 	-moz-hyphens: none;
 28 | 	-ms-hyphens: none;
 29 | 	hyphens: none;
 30 | }
 31 | 
 32 | pre[class*="language-"]::-moz-selection,
 33 | pre[class*="language-"] ::-moz-selection,
 34 | code[class*="language-"]::-moz-selection,
 35 | code[class*="language-"] ::-moz-selection {
 36 | 	color: #fbf1c7; /* fg0 */
 37 | 	background: #7c6f64; /* bg4 */
 38 | }
 39 | 
 40 | pre[class*="language-"]::selection,
 41 | pre[class*="language-"] ::selection,
 42 | code[class*="language-"]::selection,
 43 | code[class*="language-"] ::selection {
 44 | 	color: #fbf1c7; /* fg0 */
 45 | 	background: #7c6f64; /* bg4 */
 46 | }
 47 | 
 48 | /* Code blocks */
 49 | pre[class*="language-"] {
 50 | 	padding: 1em;
 51 | 	margin: 0.5em 0;
 52 | 	overflow: auto;
 53 | }
 54 | 
 55 | :not(pre) > code[class*="language-"],
 56 | pre[class*="language-"] {
 57 | 	background: #1d2021; /* bg0_h */
 58 | }
 59 | 
 60 | /* Inline code */
 61 | :not(pre) > code[class*="language-"] {
 62 | 	padding: 0.1em;
 63 | 	border-radius: 0.3em;
 64 | }
 65 | 
 66 | .token.comment,
 67 | .token.prolog,
 68 | .token.cdata {
 69 | 	color: #a89984; /* fg4 / gray1 */
 70 | }
 71 | 
 72 | .token.delimiter,
 73 | .token.boolean,
 74 | .token.keyword,
 75 | .token.selector,
 76 | .token.important,
 77 | .token.atrule {
 78 | 	color: #fb4934; /* red2 */
 79 | }
 80 | 
 81 | .token.operator,
 82 | .token.punctuation,
 83 | .token.attr-name {
 84 | 	color: #a89984; /* fg4 / gray1 */
 85 | }
 86 | 
 87 | .token.tag,
 88 | .token.tag .punctuation,
 89 | .token.doctype,
 90 | .token.builtin {
 91 | 	color: #fabd2f; /* yellow2 */
 92 | }
 93 | 
 94 | .token.entity,
 95 | .token.number,
 96 | .token.symbol {
 97 | 	color: #d3869b; /* purple2 */
 98 | }
 99 | 
100 | .token.property,
101 | .token.constant,
102 | .token.variable {
103 | 	color: #fb4934; /* red2 */
104 | }
105 | 
106 | .token.string,
107 | .token.char {
108 | 	color: #b8bb26; /* green2 */
109 | }
110 | 
111 | .token.attr-value,
112 | .token.attr-value .punctuation {
113 | 	color: #a89984; /* fg4 / gray1 */
114 | }
115 | 
116 | .token.url {
117 | 	color: #b8bb26; /* green2 */
118 | 	text-decoration: underline;
119 | }
120 | 
121 | .token.function {
122 | 	color: #fabd2f; /* yellow2 */
123 | }
124 | 
125 | .token.regex {
126 | 	background: #b8bb26; /* green2 */
127 | }
128 | 
129 | .token.bold {
130 | 	font-weight: bold;
131 | }
132 | 
133 | .token.italic {
134 | 	font-style: italic;
135 | }
136 | 
137 | .token.inserted {
138 | 	background: #a89984; /* fg4 / gray1 */
139 | }
140 | 
141 | .token.deleted {
142 | 	background: #fb4934; /* red2 */
143 | }
144 | 
145 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/gruvbox-light.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Gruvbox light theme
  3 |  *
  4 |  * Based on Gruvbox: https://github.com/morhetz/gruvbox
  5 |  * Adapted from PrismJS gruvbox-dark theme: https://github.com/schnerring/prism-themes/blob/master/themes/prism-gruvbox-dark.css
  6 |  *
  7 |  * @author Michael Schnerring (https://schnerring.net)
  8 |  * @version 1.0
  9 |  */
 10 | 
 11 | code[class*="language-"],
 12 | pre[class*="language-"] {
 13 | 	color: #3c3836; /* fg1 / fg */
 14 | 	font-family: Consolas, Monaco, "Andale Mono", monospace;
 15 | 	direction: ltr;
 16 | 	text-align: left;
 17 | 	white-space: pre;
 18 | 	word-spacing: normal;
 19 | 	word-break: normal;
 20 | 	line-height: 1.5;
 21 | 
 22 | 	-moz-tab-size: 4;
 23 | 	-o-tab-size: 4;
 24 | 	tab-size: 4;
 25 | 
 26 | 	-webkit-hyphens: none;
 27 | 	-moz-hyphens: none;
 28 | 	-ms-hyphens: none;
 29 | 	hyphens: none;
 30 | }
 31 | 
 32 | pre[class*="language-"]::-moz-selection,
 33 | pre[class*="language-"] ::-moz-selection,
 34 | code[class*="language-"]::-moz-selection,
 35 | code[class*="language-"] ::-moz-selection {
 36 | 	color: #282828; /* fg0 */
 37 | 	background: #a89984; /* bg4 */
 38 | }
 39 | 
 40 | pre[class*="language-"]::selection,
 41 | pre[class*="language-"] ::selection,
 42 | code[class*="language-"]::selection,
 43 | code[class*="language-"] ::selection {
 44 | 	color: #282828; /* fg0 */
 45 | 	background: #a89984; /* bg4 */
 46 | }
 47 | 
 48 | /* Code blocks */
 49 | pre[class*="language-"] {
 50 | 	padding: 1em;
 51 | 	margin: 0.5em 0;
 52 | 	overflow: auto;
 53 | }
 54 | 
 55 | :not(pre) > code[class*="language-"],
 56 | pre[class*="language-"] {
 57 | 	background: #f9f5d7; /* bg0_h */
 58 | }
 59 | 
 60 | /* Inline code */
 61 | :not(pre) > code[class*="language-"] {
 62 | 	padding: 0.1em;
 63 | 	border-radius: 0.3em;
 64 | }
 65 | 
 66 | .token.comment,
 67 | .token.prolog,
 68 | .token.cdata {
 69 | 	color: #7c6f64; /* fg4 / gray1 */
 70 | }
 71 | 
 72 | .token.delimiter,
 73 | .token.boolean,
 74 | .token.keyword,
 75 | .token.selector,
 76 | .token.important,
 77 | .token.atrule {
 78 | 	color: #9d0006; /* red2 */
 79 | }
 80 | 
 81 | .token.operator,
 82 | .token.punctuation,
 83 | .token.attr-name {
 84 | 	color: #7c6f64; /* fg4 / gray1 */
 85 | }
 86 | 
 87 | .token.tag,
 88 | .token.tag .punctuation,
 89 | .token.doctype,
 90 | .token.builtin {
 91 | 	color: #b57614; /* yellow2 */
 92 | }
 93 | 
 94 | .token.entity,
 95 | .token.number,
 96 | .token.symbol {
 97 | 	color: #8f3f71; /* purple2 */
 98 | }
 99 | 
100 | .token.property,
101 | .token.constant,
102 | .token.variable {
103 | 	color: #9d0006; /* red2 */
104 | }
105 | 
106 | .token.string,
107 | .token.char {
108 | 	color: #797403; /* green2 */
109 | }
110 | 
111 | .token.attr-value,
112 | .token.attr-value .punctuation {
113 | 	color: #7c6f64; /* fg4 / gray1 */
114 | }
115 | 
116 | .token.url {
117 | 	color: #797403; /* green2 */
118 | 	text-decoration: underline;
119 | }
120 | 
121 | .token.function {
122 | 	color: #b57614; /* yellow2 */
123 | }
124 | 
125 | .token.regex {
126 | 	background: #797403; /* green2 */
127 | }
128 | 
129 | .token.bold {
130 | 	font-weight: bold;
131 | }
132 | 
133 | .token.italic {
134 | 	font-style: italic;
135 | }
136 | 
137 | .token.inserted {
138 | 	background: #7c6f64; /* fg4 / gray1 */
139 | }
140 | 
141 | .token.deleted {
142 | 	background: #9d0006; /* red2 */
143 | }
144 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/holi-theme.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * MIT License
  3 |  * Copyright (c) 2021 Ayush Saini
  4 |  * Holi Theme for prism.js
  5 |  * @author Ayush Saini <@AyushCodes on Twitter>
  6 |  */
  7 | 
  8 | code[class*='language-'],
  9 | pre[class*='language-'] {
 10 | 	color: #d6e7ff;
 11 | 	background: #030314;
 12 | 	text-shadow: none;
 13 | 	font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
 14 | 	font-size: 1em;
 15 | 	line-height: 1.5;
 16 | 	letter-spacing: .2px;
 17 | 	white-space: pre;
 18 | 	word-spacing: normal;
 19 | 	word-break: normal;
 20 | 	word-wrap: normal;
 21 | 	text-align: left;
 22 | 
 23 | 	-moz-tab-size: 4;
 24 | 	-o-tab-size: 4;
 25 | 	tab-size: 4;
 26 | 
 27 | 	-webkit-hyphens: none;
 28 | 	-moz-hyphens: none;
 29 | 	-ms-hyphens: none;
 30 | 	hyphens: none;
 31 | }
 32 | 
 33 | pre[class*='language-']::-moz-selection,
 34 | pre[class*='language-'] ::-moz-selection,
 35 | code[class*='language-']::-moz-selection,
 36 | code[class*='language-'] ::-moz-selection,
 37 | pre[class*='language-']::selection,
 38 | pre[class*='language-'] ::selection,
 39 | code[class*='language-']::selection,
 40 | code[class*='language-'] ::selection {
 41 | 	color: inherit;
 42 | 	background: #1d3b54;
 43 | 	text-shadow: none;
 44 | }
 45 | 
 46 | pre[class*='language-'] {
 47 | 	border: 1px solid #2a4555;
 48 | 	border-radius: 5px;
 49 | 	padding: 1.5em 1em;
 50 | 	margin: 1em 0;
 51 | 	overflow: auto;
 52 | }
 53 | 
 54 | :not(pre) > code[class*='language-'] {
 55 | 	color: #f0f6f6;
 56 | 	background: #2a4555;
 57 | 	padding: 0.2em 0.3em;
 58 | 	border-radius: 0.2em;
 59 | 	box-decoration-break: clone;
 60 | }
 61 | 
 62 | .token.comment,
 63 | .token.prolog,
 64 | .token.doctype,
 65 | .token.cdata {
 66 | 	color: #446e69;
 67 | }
 68 | 
 69 | .token.punctuation {
 70 | 	color: #d6b007;
 71 | }
 72 | 
 73 | .token.property,
 74 | .token.tag,
 75 | .token.boolean,
 76 | .token.number,
 77 | .token.constant,
 78 | .token.symbol,
 79 | .token.deleted {
 80 | 	color: #d6e7ff;
 81 | }
 82 | 
 83 | .token.selector,
 84 | .token.attr-name,
 85 | .token.builtin,
 86 | .token.inserted {
 87 | 	color: #e60067;
 88 | }
 89 | 
 90 | .token.string,
 91 | .token.char {
 92 | 	color: #49c6ec;
 93 | }
 94 | 
 95 | .token.operator,
 96 | .token.entity,
 97 | .token.url,
 98 | .language-css .token.string,
 99 | .style .token.string {
100 | 	color: #ec8e01;
101 | 	background: transparent;
102 | }
103 | 
104 | .token.atrule,
105 | .token.attr-value,
106 | .token.keyword {
107 | 	color: #0fe468;
108 | }
109 | 
110 | .token.function,
111 | .token.class-name {
112 | 	color: #78f3e9;
113 | }
114 | 
115 | .token.regex,
116 | .token.important,
117 | .token.variable {
118 | 	color: #d6e7ff;
119 | }
120 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/hopscotch.css:
--------------------------------------------------------------------------------
  1 | @import url(https://fonts.googleapis.com/css?family=Fira+Mono);
  2 | /*
  3 |  * Hopscotch
  4 |  * by Jan T. Sott
  5 |  * https://github.com/idleberg/Hopscotch
  6 |  *
  7 |  * This work is licensed under the Creative Commons CC0 1.0 Universal License
  8 |  */
  9 | 
 10 | code[class*="language-"],
 11 | pre[class*="language-"] {
 12 | 	font-family: "Fira Mono", Menlo, Monaco, "Lucida Console", "Courier New", Courier, monospace;
 13 | 	font-size: 16px;
 14 | 	line-height: 1.375;
 15 | 	direction: ltr;
 16 | 	text-align: left;
 17 | 	word-spacing: normal;
 18 | 
 19 | 	-moz-tab-size: 4;
 20 | 	-o-tab-size: 4;
 21 | 	tab-size: 4;
 22 | 
 23 | 	-webkit-hyphens: none;
 24 | 	-moz-hyphens: none;
 25 | 	-ms-hyphens: none;
 26 | 	hyphens: none;
 27 | 	white-space: pre;
 28 | 	white-space: pre-wrap;
 29 | 	word-break: break-all;
 30 | 	word-wrap: break-word;
 31 | 	background: #322931;
 32 | 	color: #b9b5b8;
 33 | }
 34 | 
 35 | pre > code[class*="language-"] {
 36 | 	font-size: 1em;
 37 | }
 38 | 
 39 | /* Code blocks */
 40 | pre[class*="language-"] {
 41 | 	padding: 1em;
 42 | 	margin: .5em 0;
 43 | 	overflow: auto;
 44 | }
 45 | 
 46 | /* Inline code */
 47 | :not(pre) > code[class*="language-"] {
 48 | 	padding: .1em;
 49 | 	border-radius: .3em;
 50 | }
 51 | 
 52 | .token.comment,
 53 | .token.prolog,
 54 | .token.doctype,
 55 | .token.cdata {
 56 | 	color: #797379;
 57 | }
 58 | 
 59 | .token.punctuation {
 60 | 	color: #b9b5b8;
 61 | }
 62 | 
 63 | .namespace {
 64 | 	opacity: .7;
 65 | }
 66 | 
 67 | .token.null,
 68 | .token.operator,
 69 | .token.boolean,
 70 | .token.number {
 71 | 	color: #fd8b19;
 72 | }
 73 | 
 74 | .token.property {
 75 | 	color: #fdcc59;
 76 | }
 77 | 
 78 | .token.tag {
 79 | 	color: #1290bf;
 80 | }
 81 | 
 82 | .token.string {
 83 | 	color: #149b93;
 84 | }
 85 | 
 86 | .token.selector {
 87 | 	color: #c85e7c;
 88 | }
 89 | 
 90 | .token.attr-name {
 91 | 	color: #fd8b19;
 92 | }
 93 | 
 94 | .token.entity,
 95 | .token.url,
 96 | .language-css .token.string,
 97 | .style .token.string {
 98 | 	color: #149b93;
 99 | }
100 | 
101 | .token.attr-value,
102 | .token.keyword,
103 | .token.control,
104 | .token.directive,
105 | .token.unit {
106 | 	color: #8fc13e;
107 | }
108 | 
109 | .token.statement,
110 | .token.regex,
111 | .token.atrule {
112 | 	color: #149b93;
113 | }
114 | 
115 | .token.placeholder,
116 | .token.variable {
117 | 	color: #1290bf;
118 | }
119 | 
120 | .token.important {
121 | 	color: #dd464c;
122 | 	font-weight: bold;
123 | }
124 | 
125 | .token.entity {
126 | 	cursor: help;
127 | }
128 | 
129 | pre > code.highlight {
130 | 	outline: .4em solid red;
131 | 	outline-offset: .4em;
132 | }
133 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/laserwave.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * Laserwave Theme originally by Jared Jones for Visual Studio Code
  3 |  * https://github.com/Jaredk3nt/laserwave
  4 |  *
  5 |  * Ported for PrismJS by Simon Jespersen [https://github.com/simjes]
  6 |  */
  7 | 
  8 | code[class*="language-"],
  9 | pre[class*="language-"] {
 10 | 	background: #27212e;
 11 | 	color: #ffffff;
 12 | 	font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; /* this is the default */
 13 | 	/* The following properties are standard, please leave them as they are */
 14 | 	font-size: 1em;
 15 | 	direction: ltr;
 16 | 	text-align: left;
 17 | 	white-space: pre;
 18 | 	word-spacing: normal;
 19 | 	word-break: normal;
 20 | 	line-height: 1.5;
 21 | 	-moz-tab-size: 2;
 22 | 	-o-tab-size: 2;
 23 | 	tab-size: 2;
 24 | 	/* The following properties are also standard */
 25 | 	-webkit-hyphens: none;
 26 | 	-moz-hyphens: none;
 27 | 	-ms-hyphens: none;
 28 | 	hyphens: none;
 29 | }
 30 | 
 31 | code[class*="language-"]::-moz-selection,
 32 | code[class*="language-"] ::-moz-selection,
 33 | pre[class*="language-"]::-moz-selection,
 34 | pre[class*="language-"] ::-moz-selection {
 35 | 	background: #eb64b927;
 36 | 	color: inherit;
 37 | }
 38 | 
 39 | code[class*="language-"]::selection,
 40 | code[class*="language-"] ::selection,
 41 | pre[class*="language-"]::selection,
 42 | pre[class*="language-"] ::selection {
 43 | 	background: #eb64b927;
 44 | 	color: inherit;
 45 | }
 46 | 
 47 | /* Properties specific to code blocks */
 48 | pre[class*="language-"] {
 49 | 	padding: 1em; /* this is standard */
 50 | 	margin: 0.5em 0; /* this is the default */
 51 | 	overflow: auto; /* this is standard */
 52 | 	border-radius: 0.5em;
 53 | }
 54 | 
 55 | /* Properties specific to inline code */
 56 | :not(pre) > code[class*="language-"] {
 57 | 	padding: 0.2em 0.3em;
 58 | 	border-radius: 0.5rem;
 59 | 	white-space: normal; /* this is standard */
 60 | }
 61 | 
 62 | .token.comment,
 63 | .token.prolog,
 64 | .token.cdata {
 65 | 	color: #91889b;
 66 | }
 67 | 
 68 | .token.punctuation {
 69 | 	color: #7b6995;
 70 | }
 71 | 
 72 | .token.builtin,
 73 | .token.constant,
 74 | .token.boolean {
 75 | 	color: #ffe261;
 76 | }
 77 | 
 78 | .token.number {
 79 | 	color: #b381c5;
 80 | }
 81 | 
 82 | .token.important,
 83 | .token.atrule,
 84 | .token.property,
 85 | .token.keyword {
 86 | 	color: #40b4c4;
 87 | }
 88 | 
 89 | .token.doctype,
 90 | .token.operator,
 91 | .token.inserted,
 92 | .token.tag,
 93 | .token.class-name,
 94 | .token.symbol {
 95 | 	color: #74dfc4;
 96 | }
 97 | 
 98 | .token.attr-name,
 99 | .token.function,
100 | .token.deleted,
101 | .token.selector {
102 | 	color: #eb64b9;
103 | }
104 | 
105 | .token.attr-value,
106 | .token.regex,
107 | .token.char,
108 | .token.string {
109 | 	color: #b4dce7;
110 | }
111 | 
112 | .token.entity,
113 | .token.url,
114 | .token.variable {
115 | 	color: #ffffff;
116 | }
117 | 
118 | /* The following rules are pretty similar across themes, but feel free to adjust them */
119 | .token.bold {
120 | 	font-weight: bold;
121 | }
122 | 
123 | .token.italic {
124 | 	font-style: italic;
125 | }
126 | 
127 | .token.entity {
128 | 	cursor: help;
129 | }
130 | 
131 | .token.namespace {
132 | 	opacity: 0.7;
133 | }
134 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/lucario.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Lucario Theme originally by Raphael Amorim [@raphamorim]
  3 |  * https://github.com/raphamorim/lucario
  4 |  *
  5 |  * Ported for PrismJS by Christopher Kapic [@christopher-kapic]
  6 |  */
  7 | 
  8 | code[class*="language-"],
  9 | pre[class*="language-"] {
 10 | 	color: #f8f8f2;
 11 | 	background: none;
 12 | 	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
 13 | 	font-family: Monaco, Consolas, 'Andale Mono', 'Ubuntu Mono', monospace;
 14 | 	text-align: left;
 15 | 	white-space: pre;
 16 | 	word-spacing: normal;
 17 | 	word-break: normal;
 18 | 	word-wrap: normal;
 19 | 	line-height: 1.5;
 20 | 	-moz-tab-size: 4;
 21 | 	-o-tab-size: 4;
 22 | 	tab-size: 4;
 23 | 	-webkit-hyphens: none;
 24 | 	-moz-hyphens: none;
 25 | 	-ms-hyphens: none;
 26 | 	hyphens: none;
 27 | }
 28 | 
 29 | /* Code blocks */
 30 | pre[class*="language-"] {
 31 | 	padding: 1em;
 32 | 	margin: .5em 0;
 33 | 	overflow: auto;
 34 | 	border-radius: 0.3em;
 35 | }
 36 | 
 37 | :not(pre) > code[class*="language-"],
 38 | pre[class*="language-"] {
 39 | 	background: #263E52;
 40 | }
 41 | 
 42 | /* Inline code */
 43 | :not(pre) > code[class*="language-"] {
 44 | 	padding: .1em;
 45 | 	border-radius: .3em;
 46 | 	white-space: normal;
 47 | }
 48 | 
 49 | .token.comment,
 50 | .token.prolog,
 51 | .token.doctype,
 52 | .token.cdata {
 53 | 	color: #5c98cd;
 54 | }
 55 | 
 56 | .token.punctuation {
 57 | 	color: #f8f8f2;
 58 | }
 59 | 
 60 | .namespace {
 61 | 	opacity: .7;
 62 | }
 63 | 
 64 | .token.property,
 65 | .token.tag,
 66 | .token.constant,
 67 | .token.symbol,
 68 | .token.deleted {
 69 | 	color: #F05E5D;
 70 | }
 71 | 
 72 | .token.boolean,
 73 | .token.number {
 74 | 	color: #BC94F9;
 75 | }
 76 | 
 77 | .token.selector,
 78 | .token.attr-name,
 79 | .token.string,
 80 | .token.char,
 81 | .token.builtin,
 82 | .token.inserted {
 83 | 	color: #FCFCD6;
 84 | }
 85 | 
 86 | .token.operator,
 87 | .token.entity,
 88 | .token.url,
 89 | .language-css .token.string,
 90 | .style .token.string,
 91 | .token.variable {
 92 | 	color: #f8f8f2;
 93 | }
 94 | 
 95 | .token.atrule,
 96 | .token.attr-value,
 97 | .token.function,
 98 | .token.class-name {
 99 | 	color: #66D8EF;
100 | }
101 | 
102 | .token.keyword {
103 | 	color: #6EB26E;
104 | }
105 | 
106 | .token.regex,
107 | .token.important {
108 | 	color: #F05E5D;
109 | }
110 | 
111 | .token.important,
112 | .token.bold {
113 | 	font-weight: bold;
114 | }
115 | 
116 | .token.italic {
117 | 	font-style: italic;
118 | }
119 | 
120 | .token.entity {
121 | 	cursor: help;
122 | }
123 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/material-dark.css:
--------------------------------------------------------------------------------
  1 | code[class*="language-"],
  2 | pre[class*="language-"] {
  3 | 	text-align: left;
  4 | 	white-space: pre;
  5 | 	word-spacing: normal;
  6 | 	word-break: normal;
  7 | 	word-wrap: normal;
  8 | 	color: #eee;
  9 | 	background: #2f2f2f;
 10 | 	font-family: Roboto Mono, monospace;
 11 | 	font-size: 1em;
 12 | 	line-height: 1.5em;
 13 | 
 14 | 	-moz-tab-size: 4;
 15 | 	-o-tab-size: 4;
 16 | 	tab-size: 4;
 17 | 
 18 | 	-webkit-hyphens: none;
 19 | 	-moz-hyphens: none;
 20 | 	-ms-hyphens: none;
 21 | 	hyphens: none;
 22 | }
 23 | 
 24 | code[class*="language-"]::-moz-selection,
 25 | pre[class*="language-"]::-moz-selection,
 26 | code[class*="language-"] ::-moz-selection,
 27 | pre[class*="language-"] ::-moz-selection {
 28 | 	background: #363636;
 29 | }
 30 | 
 31 | code[class*="language-"]::selection,
 32 | pre[class*="language-"]::selection,
 33 | code[class*="language-"] ::selection,
 34 | pre[class*="language-"] ::selection {
 35 | 	background: #363636;
 36 | }
 37 | 
 38 | :not(pre) > code[class*="language-"] {
 39 | 	white-space: normal;
 40 | 	border-radius: 0.2em;
 41 | 	padding: 0.1em;
 42 | }
 43 | 
 44 | pre[class*="language-"] {
 45 | 	overflow: auto;
 46 | 	position: relative;
 47 | 	margin: 0.5em 0;
 48 | 	padding: 1.25em 1em;
 49 | }
 50 | 
 51 | .language-css > code,
 52 | .language-sass > code,
 53 | .language-scss > code {
 54 | 	color: #fd9170;
 55 | }
 56 | 
 57 | [class*="language-"] .namespace {
 58 | 	opacity: 0.7;
 59 | }
 60 | 
 61 | .token.atrule {
 62 | 	color: #c792ea;
 63 | }
 64 | 
 65 | .token.attr-name {
 66 | 	color: #ffcb6b;
 67 | }
 68 | 
 69 | .token.attr-value {
 70 | 	color: #a5e844;
 71 | }
 72 | 
 73 | .token.attribute {
 74 | 	color: #a5e844;
 75 | }
 76 | 
 77 | .token.boolean {
 78 | 	color: #c792ea;
 79 | }
 80 | 
 81 | .token.builtin {
 82 | 	color: #ffcb6b;
 83 | }
 84 | 
 85 | .token.cdata {
 86 | 	color: #80cbc4;
 87 | }
 88 | 
 89 | .token.char {
 90 | 	color: #80cbc4;
 91 | }
 92 | 
 93 | .token.class {
 94 | 	color: #ffcb6b;
 95 | }
 96 | 
 97 | .token.class-name {
 98 | 	color: #f2ff00;
 99 | }
100 | 
101 | .token.comment {
102 | 	color: #616161;
103 | }
104 | 
105 | .token.constant {
106 | 	color: #c792ea;
107 | }
108 | 
109 | .token.deleted {
110 | 	color: #ff6666;
111 | }
112 | 
113 | .token.doctype {
114 | 	color: #616161;
115 | }
116 | 
117 | .token.entity {
118 | 	color: #ff6666;
119 | }
120 | 
121 | .token.function {
122 | 	color: #c792ea;
123 | }
124 | 
125 | .token.hexcode {
126 | 	color: #f2ff00;
127 | }
128 | 
129 | .token.id {
130 | 	color: #c792ea;
131 | 	font-weight: bold;
132 | }
133 | 
134 | .token.important {
135 | 	color: #c792ea;
136 | 	font-weight: bold;
137 | }
138 | 
139 | .token.inserted {
140 | 	color: #80cbc4;
141 | }
142 | 
143 | .token.keyword {
144 | 	color: #c792ea;
145 | }
146 | 
147 | .token.number {
148 | 	color: #fd9170;
149 | }
150 | 
151 | .token.operator {
152 | 	color: #89ddff;
153 | }
154 | 
155 | .token.prolog {
156 | 	color: #616161;
157 | }
158 | 
159 | .token.property {
160 | 	color: #80cbc4;
161 | }
162 | 
163 | .token.pseudo-class {
164 | 	color: #a5e844;
165 | }
166 | 
167 | .token.pseudo-element {
168 | 	color: #a5e844;
169 | }
170 | 
171 | .token.punctuation {
172 | 	color: #89ddff;
173 | }
174 | 
175 | .token.regex {
176 | 	color: #f2ff00;
177 | }
178 | 
179 | .token.selector {
180 | 	color: #ff6666;
181 | }
182 | 
183 | .token.string {
184 | 	color: #a5e844;
185 | }
186 | 
187 | .token.symbol {
188 | 	color: #c792ea;
189 | }
190 | 
191 | .token.tag {
192 | 	color: #ff6666;
193 | }
194 | 
195 | .token.unit {
196 | 	color: #fd9170;
197 | }
198 | 
199 | .token.url {
200 | 	color: #ff6666;
201 | }
202 | 
203 | .token.variable {
204 | 	color: #ff6666;
205 | }
206 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/material-light.css:
--------------------------------------------------------------------------------
  1 | code[class*="language-"],
  2 | pre[class*="language-"] {
  3 | 	text-align: left;
  4 | 	white-space: pre;
  5 | 	word-spacing: normal;
  6 | 	word-break: normal;
  7 | 	word-wrap: normal;
  8 | 	color: #90a4ae;
  9 | 	background: #fafafa;
 10 | 	font-family: Roboto Mono, monospace;
 11 | 	font-size: 1em;
 12 | 	line-height: 1.5em;
 13 | 
 14 | 	-moz-tab-size: 4;
 15 | 	-o-tab-size: 4;
 16 | 	tab-size: 4;
 17 | 
 18 | 	-webkit-hyphens: none;
 19 | 	-moz-hyphens: none;
 20 | 	-ms-hyphens: none;
 21 | 	hyphens: none;
 22 | }
 23 | 
 24 | code[class*="language-"]::-moz-selection,
 25 | pre[class*="language-"]::-moz-selection,
 26 | code[class*="language-"] ::-moz-selection,
 27 | pre[class*="language-"] ::-moz-selection {
 28 | 	background: #cceae7;
 29 | 	color: #263238;
 30 | }
 31 | 
 32 | code[class*="language-"]::selection,
 33 | pre[class*="language-"]::selection,
 34 | code[class*="language-"] ::selection,
 35 | pre[class*="language-"] ::selection {
 36 | 	background: #cceae7;
 37 | 	color: #263238;
 38 | }
 39 | 
 40 | :not(pre) > code[class*="language-"] {
 41 | 	white-space: normal;
 42 | 	border-radius: 0.2em;
 43 | 	padding: 0.1em;
 44 | }
 45 | 
 46 | pre[class*="language-"] {
 47 | 	overflow: auto;
 48 | 	position: relative;
 49 | 	margin: 0.5em 0;
 50 | 	padding: 1.25em 1em;
 51 | }
 52 | 
 53 | .language-css > code,
 54 | .language-sass > code,
 55 | .language-scss > code {
 56 | 	color: #f76d47;
 57 | }
 58 | 
 59 | [class*="language-"] .namespace {
 60 | 	opacity: 0.7;
 61 | }
 62 | 
 63 | .token.atrule {
 64 | 	color: #7c4dff;
 65 | }
 66 | 
 67 | .token.attr-name {
 68 | 	color: #39adb5;
 69 | }
 70 | 
 71 | .token.attr-value {
 72 | 	color: #f6a434;
 73 | }
 74 | 
 75 | .token.attribute {
 76 | 	color: #f6a434;
 77 | }
 78 | 
 79 | .token.boolean {
 80 | 	color: #7c4dff;
 81 | }
 82 | 
 83 | .token.builtin {
 84 | 	color: #39adb5;
 85 | }
 86 | 
 87 | .token.cdata {
 88 | 	color: #39adb5;
 89 | }
 90 | 
 91 | .token.char {
 92 | 	color: #39adb5;
 93 | }
 94 | 
 95 | .token.class {
 96 | 	color: #39adb5;
 97 | }
 98 | 
 99 | .token.class-name {
100 | 	color: #6182b8;
101 | }
102 | 
103 | .token.comment {
104 | 	color: #aabfc9;
105 | }
106 | 
107 | .token.constant {
108 | 	color: #7c4dff;
109 | }
110 | 
111 | .token.deleted {
112 | 	color: #e53935;
113 | }
114 | 
115 | .token.doctype {
116 | 	color: #aabfc9;
117 | }
118 | 
119 | .token.entity {
120 | 	color: #e53935;
121 | }
122 | 
123 | .token.function {
124 | 	color: #7c4dff;
125 | }
126 | 
127 | .token.hexcode {
128 | 	color: #f76d47;
129 | }
130 | 
131 | .token.id {
132 | 	color: #7c4dff;
133 | 	font-weight: bold;
134 | }
135 | 
136 | .token.important {
137 | 	color: #7c4dff;
138 | 	font-weight: bold;
139 | }
140 | 
141 | .token.inserted {
142 | 	color: #39adb5;
143 | }
144 | 
145 | .token.keyword {
146 | 	color: #7c4dff;
147 | }
148 | 
149 | .token.number {
150 | 	color: #f76d47;
151 | }
152 | 
153 | .token.operator {
154 | 	color: #39adb5;
155 | }
156 | 
157 | .token.prolog {
158 | 	color: #aabfc9;
159 | }
160 | 
161 | .token.property {
162 | 	color: #39adb5;
163 | }
164 | 
165 | .token.pseudo-class {
166 | 	color: #f6a434;
167 | }
168 | 
169 | .token.pseudo-element {
170 | 	color: #f6a434;
171 | }
172 | 
173 | .token.punctuation {
174 | 	color: #39adb5;
175 | }
176 | 
177 | .token.regex {
178 | 	color: #6182b8;
179 | }
180 | 
181 | .token.selector {
182 | 	color: #e53935;
183 | }
184 | 
185 | .token.string {
186 | 	color: #f6a434;
187 | }
188 | 
189 | .token.symbol {
190 | 	color: #7c4dff;
191 | }
192 | 
193 | .token.tag {
194 | 	color: #e53935;
195 | }
196 | 
197 | .token.unit {
198 | 	color: #f76d47;
199 | }
200 | 
201 | .token.url {
202 | 	color: #e53935;
203 | }
204 | 
205 | .token.variable {
206 | 	color: #e53935;
207 | }
208 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/material-oceanic.css:
--------------------------------------------------------------------------------
  1 | code[class*="language-"],
  2 | pre[class*="language-"] {
  3 | 	text-align: left;
  4 | 	white-space: pre;
  5 | 	word-spacing: normal;
  6 | 	word-break: normal;
  7 | 	word-wrap: normal;
  8 | 	color: #c3cee3;
  9 | 	background: #263238;
 10 | 	font-family: Roboto Mono, monospace;
 11 | 	font-size: 1em;
 12 | 	line-height: 1.5em;
 13 | 
 14 | 	-moz-tab-size: 4;
 15 | 	-o-tab-size: 4;
 16 | 	tab-size: 4;
 17 | 
 18 | 	-webkit-hyphens: none;
 19 | 	-moz-hyphens: none;
 20 | 	-ms-hyphens: none;
 21 | 	hyphens: none;
 22 | }
 23 | 
 24 | code[class*="language-"]::-moz-selection,
 25 | pre[class*="language-"]::-moz-selection,
 26 | code[class*="language-"] ::-moz-selection,
 27 | pre[class*="language-"] ::-moz-selection {
 28 | 	background: #363636;
 29 | }
 30 | 
 31 | code[class*="language-"]::selection,
 32 | pre[class*="language-"]::selection,
 33 | code[class*="language-"] ::selection,
 34 | pre[class*="language-"] ::selection {
 35 | 	background: #363636;
 36 | }
 37 | 
 38 | :not(pre) > code[class*="language-"] {
 39 | 	white-space: normal;
 40 | 	border-radius: 0.2em;
 41 | 	padding: 0.1em;
 42 | }
 43 | 
 44 | pre[class*="language-"] {
 45 | 	overflow: auto;
 46 | 	position: relative;
 47 | 	margin: 0.5em 0;
 48 | 	padding: 1.25em 1em;
 49 | }
 50 | 
 51 | .language-css > code,
 52 | .language-sass > code,
 53 | .language-scss > code {
 54 | 	color: #fd9170;
 55 | }
 56 | 
 57 | [class*="language-"] .namespace {
 58 | 	opacity: 0.7;
 59 | }
 60 | 
 61 | .token.atrule {
 62 | 	color: #c792ea;
 63 | }
 64 | 
 65 | .token.attr-name {
 66 | 	color: #ffcb6b;
 67 | }
 68 | 
 69 | .token.attr-value {
 70 | 	color: #c3e88d;
 71 | }
 72 | 
 73 | .token.attribute {
 74 | 	color: #c3e88d;
 75 | }
 76 | 
 77 | .token.boolean {
 78 | 	color: #c792ea;
 79 | }
 80 | 
 81 | .token.builtin {
 82 | 	color: #ffcb6b;
 83 | }
 84 | 
 85 | .token.cdata {
 86 | 	color: #80cbc4;
 87 | }
 88 | 
 89 | .token.char {
 90 | 	color: #80cbc4;
 91 | }
 92 | 
 93 | .token.class {
 94 | 	color: #ffcb6b;
 95 | }
 96 | 
 97 | .token.class-name {
 98 | 	color: #f2ff00;
 99 | }
100 | 
101 | .token.color {
102 | 	color: #f2ff00;
103 | }
104 | 
105 | .token.comment {
106 | 	color: #546e7a;
107 | }
108 | 
109 | .token.constant {
110 | 	color: #c792ea;
111 | }
112 | 
113 | .token.deleted {
114 | 	color: #f07178;
115 | }
116 | 
117 | .token.doctype {
118 | 	color: #546e7a;
119 | }
120 | 
121 | .token.entity {
122 | 	color: #f07178;
123 | }
124 | 
125 | .token.function {
126 | 	color: #c792ea;
127 | }
128 | 
129 | .token.hexcode {
130 | 	color: #f2ff00;
131 | }
132 | 
133 | .token.id {
134 | 	color: #c792ea;
135 | 	font-weight: bold;
136 | }
137 | 
138 | .token.important {
139 | 	color: #c792ea;
140 | 	font-weight: bold;
141 | }
142 | 
143 | .token.inserted {
144 | 	color: #80cbc4;
145 | }
146 | 
147 | .token.keyword {
148 | 	color: #c792ea;
149 | 	font-style: italic;
150 | }
151 | 
152 | .token.number {
153 | 	color: #fd9170;
154 | }
155 | 
156 | .token.operator {
157 | 	color: #89ddff;
158 | }
159 | 
160 | .token.prolog {
161 | 	color: #546e7a;
162 | }
163 | 
164 | .token.property {
165 | 	color: #80cbc4;
166 | }
167 | 
168 | .token.pseudo-class {
169 | 	color: #c3e88d;
170 | }
171 | 
172 | .token.pseudo-element {
173 | 	color: #c3e88d;
174 | }
175 | 
176 | .token.punctuation {
177 | 	color: #89ddff;
178 | }
179 | 
180 | .token.regex {
181 | 	color: #f2ff00;
182 | }
183 | 
184 | .token.selector {
185 | 	color: #f07178;
186 | }
187 | 
188 | .token.string {
189 | 	color: #c3e88d;
190 | }
191 | 
192 | .token.symbol {
193 | 	color: #c792ea;
194 | }
195 | 
196 | .token.tag {
197 | 	color: #f07178;
198 | }
199 | 
200 | .token.unit {
201 | 	color: #f07178;
202 | }
203 | 
204 | .token.url {
205 | 	color: #fd9170;
206 | }
207 | 
208 | .token.variable {
209 | 	color: #f07178;
210 | }
211 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/night-owl.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * MIT License
  3 |  * Copyright (c) 2018 Sarah Drasner
  4 |  * Sarah Drasner's[@sdras] Night Owl
  5 |  * Ported by Sara vieria [@SaraVieira]
  6 |  * Added by Souvik Mandal [@SimpleIndian]
  7 |  */
  8 | 
  9 | code[class*="language-"],
 10 | pre[class*="language-"] {
 11 | 	color: #d6deeb;
 12 | 	font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
 13 | 	text-align: left;
 14 | 	white-space: pre;
 15 | 	word-spacing: normal;
 16 | 	word-break: normal;
 17 | 	word-wrap: normal;
 18 | 	line-height: 1.5;
 19 | 	font-size: 1em;
 20 | 
 21 | 	-moz-tab-size: 4;
 22 | 	-o-tab-size: 4;
 23 | 	tab-size: 4;
 24 | 
 25 | 	-webkit-hyphens: none;
 26 | 	-moz-hyphens: none;
 27 | 	-ms-hyphens: none;
 28 | 	hyphens: none;
 29 | }
 30 | 
 31 | pre[class*="language-"]::-moz-selection,
 32 | pre[class*="language-"] ::-moz-selection,
 33 | code[class*="language-"]::-moz-selection,
 34 | code[class*="language-"] ::-moz-selection {
 35 | 	text-shadow: none;
 36 | 	background: rgba(29, 59, 83, 0.99);
 37 | }
 38 | 
 39 | pre[class*="language-"]::selection,
 40 | pre[class*="language-"] ::selection,
 41 | code[class*="language-"]::selection,
 42 | code[class*="language-"] ::selection {
 43 | 	text-shadow: none;
 44 | 	background: rgba(29, 59, 83, 0.99);
 45 | }
 46 | 
 47 | @media print {
 48 | 	code[class*="language-"],
 49 | 	pre[class*="language-"] {
 50 | 		text-shadow: none;
 51 | 	}
 52 | }
 53 | 
 54 | /* Code blocks */
 55 | pre[class*="language-"] {
 56 | 	padding: 1em;
 57 | 	margin: 0.5em 0;
 58 | 	overflow: auto;
 59 | }
 60 | 
 61 | :not(pre) > code[class*="language-"],
 62 | pre[class*="language-"] {
 63 | 	color: white;
 64 | 	background: #011627;
 65 | }
 66 | 
 67 | :not(pre) > code[class*="language-"] {
 68 | 	padding: 0.1em;
 69 | 	border-radius: 0.3em;
 70 | 	white-space: normal;
 71 | }
 72 | 
 73 | .token.comment,
 74 | .token.prolog,
 75 | .token.cdata {
 76 | 	color: rgb(99, 119, 119);
 77 | 	font-style: italic;
 78 | }
 79 | 
 80 | .token.punctuation {
 81 | 	color: rgb(199, 146, 234);
 82 | }
 83 | 
 84 | .namespace {
 85 | 	color: rgb(178, 204, 214);
 86 | }
 87 | 
 88 | .token.deleted {
 89 | 	color: rgba(239, 83, 80, 0.56);
 90 | 	font-style: italic;
 91 | }
 92 | 
 93 | .token.symbol,
 94 | .token.property {
 95 | 	color: rgb(128, 203, 196);
 96 | }
 97 | 
 98 | .token.tag,
 99 | .token.operator,
100 | .token.keyword {
101 | 	color: rgb(127, 219, 202);
102 | }
103 | 
104 | .token.boolean {
105 | 	color: rgb(255, 88, 116);
106 | }
107 | 
108 | .token.number {
109 | 	color: rgb(247, 140, 108);
110 | }
111 | 
112 | .token.constant,
113 | .token.function,
114 | .token.builtin,
115 | .token.char {
116 | 	color: rgb(130, 170, 255);
117 | }
118 | 
119 | .token.selector,
120 | .token.doctype {
121 | 	color: rgb(199, 146, 234);
122 | 	font-style: italic;
123 | }
124 | 
125 | .token.attr-name,
126 | .token.inserted {
127 | 	color: rgb(173, 219, 103);
128 | 	font-style: italic;
129 | }
130 | 
131 | .token.string,
132 | .token.url,
133 | .token.entity,
134 | .language-css .token.string,
135 | .style .token.string {
136 | 	color: rgb(173, 219, 103);
137 | }
138 | 
139 | .token.class-name,
140 | .token.atrule,
141 | .token.attr-value {
142 | 	color: rgb(255, 203, 139);
143 | }
144 | 
145 | .token.regex,
146 | .token.important,
147 | .token.variable {
148 | 	color: rgb(214, 222, 235);
149 | }
150 | 
151 | .token.important,
152 | .token.bold {
153 | 	font-weight: bold;
154 | }
155 | 
156 | .token.italic {
157 | 	font-style: italic;
158 | }
159 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/nord.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Nord Theme Originally by Arctic Ice Studio
  3 |  * https://nordtheme.com
  4 |  *
  5 |  * Ported for PrismJS by Zane Hitchcoxc (@zwhitchcox) and Gabriel Ramos (@gabrieluizramos)
  6 |  */
  7 | 
  8 | code[class*="language-"],
  9 | pre[class*="language-"] {
 10 | 	color: #f8f8f2;
 11 | 	background: none;
 12 | 	font-family: "Fira Code", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 13 | 	text-align: left;
 14 | 	white-space: pre;
 15 | 	word-spacing: normal;
 16 | 	word-break: normal;
 17 | 	word-wrap: normal;
 18 | 	line-height: 1.5;
 19 | 	-moz-tab-size: 4;
 20 | 	-o-tab-size: 4;
 21 | 	tab-size: 4;
 22 | 	-webkit-hyphens: none;
 23 | 	-moz-hyphens: none;
 24 | 	-ms-hyphens: none;
 25 | 	hyphens: none;
 26 | }
 27 | 
 28 | /* Code blocks */
 29 | pre[class*="language-"] {
 30 | 	padding: 1em;
 31 | 	margin: .5em 0;
 32 | 	overflow: auto;
 33 | 	border-radius: 0.3em;
 34 | }
 35 | 
 36 | :not(pre) > code[class*="language-"],
 37 | pre[class*="language-"] {
 38 | 	background: #2E3440;
 39 | }
 40 | 
 41 | /* Inline code */
 42 | :not(pre) > code[class*="language-"] {
 43 | 	padding: .1em;
 44 | 	border-radius: .3em;
 45 | 	white-space: normal;
 46 | }
 47 | 
 48 | .token.comment,
 49 | .token.prolog,
 50 | .token.doctype,
 51 | .token.cdata {
 52 | 	color: #636f88;
 53 | }
 54 | 
 55 | .token.punctuation {
 56 | 	color: #81A1C1;
 57 | }
 58 | 
 59 | .namespace {
 60 | 	opacity: .7;
 61 | }
 62 | 
 63 | .token.property,
 64 | .token.tag,
 65 | .token.constant,
 66 | .token.symbol,
 67 | .token.deleted {
 68 | 	color: #81A1C1;
 69 | }
 70 | 
 71 | .token.number {
 72 | 	color: #B48EAD;
 73 | }
 74 | 
 75 | .token.boolean {
 76 | 	color: #81A1C1;
 77 | }
 78 | 
 79 | .token.selector,
 80 | .token.attr-name,
 81 | .token.string,
 82 | .token.char,
 83 | .token.builtin,
 84 | .token.inserted {
 85 | 	color: #A3BE8C;
 86 | }
 87 | 
 88 | .token.operator,
 89 | .token.entity,
 90 | .token.url,
 91 | .language-css .token.string,
 92 | .style .token.string,
 93 | .token.variable {
 94 | 	color: #81A1C1;
 95 | }
 96 | 
 97 | .token.atrule,
 98 | .token.attr-value,
 99 | .token.function,
100 | .token.class-name {
101 | 	color: #88C0D0;
102 | }
103 | 
104 | .token.keyword {
105 | 	color: #81A1C1;
106 | }
107 | 
108 | .token.regex,
109 | .token.important {
110 | 	color: #EBCB8B;
111 | }
112 | 
113 | .token.important,
114 | .token.bold {
115 | 	font-weight: bold;
116 | }
117 | 
118 | .token.italic {
119 | 	font-style: italic;
120 | }
121 | 
122 | .token.entity {
123 | 	cursor: help;
124 | }
125 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/one-dark.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * One Dark theme for prism.js
  3 |  * Based on Atom's One Dark theme: https://github.com/atom/atom/tree/master/packages/one-dark-syntax
  4 |  */
  5 | 
  6 | /**
  7 |  * One Dark colours (accurate as of commit 8ae45ca on 6 Sep 2018)
  8 |  * From colors.less
  9 |  * --mono-1: hsl(220, 14%, 71%);
 10 |  * --mono-2: hsl(220, 9%, 55%);
 11 |  * --mono-3: hsl(220, 10%, 40%);
 12 |  * --hue-1: hsl(187, 47%, 55%);
 13 |  * --hue-2: hsl(207, 82%, 66%);
 14 |  * --hue-3: hsl(286, 60%, 67%);
 15 |  * --hue-4: hsl(95, 38%, 62%);
 16 |  * --hue-5: hsl(355, 65%, 65%);
 17 |  * --hue-5-2: hsl(5, 48%, 51%);
 18 |  * --hue-6: hsl(29, 54%, 61%);
 19 |  * --hue-6-2: hsl(39, 67%, 69%);
 20 |  * --syntax-fg: hsl(220, 14%, 71%);
 21 |  * --syntax-bg: hsl(220, 13%, 18%);
 22 |  * --syntax-gutter: hsl(220, 14%, 45%);
 23 |  * --syntax-guide: hsla(220, 14%, 71%, 0.15);
 24 |  * --syntax-accent: hsl(220, 100%, 66%);
 25 |  * From syntax-variables.less
 26 |  * --syntax-selection-color: hsl(220, 13%, 28%);
 27 |  * --syntax-gutter-background-color-selected: hsl(220, 13%, 26%);
 28 |  * --syntax-cursor-line: hsla(220, 100%, 80%, 0.04);
 29 |  */
 30 | 
 31 | code[class*="language-"],
 32 | pre[class*="language-"] {
 33 | 	background: hsl(220, 13%, 18%);
 34 | 	color: hsl(220, 14%, 71%);
 35 | 	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
 36 | 	font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
 37 | 	direction: ltr;
 38 | 	text-align: left;
 39 | 	white-space: pre;
 40 | 	word-spacing: normal;
 41 | 	word-break: normal;
 42 | 	line-height: 1.5;
 43 | 	-moz-tab-size: 2;
 44 | 	-o-tab-size: 2;
 45 | 	tab-size: 2;
 46 | 	-webkit-hyphens: none;
 47 | 	-moz-hyphens: none;
 48 | 	-ms-hyphens: none;
 49 | 	hyphens: none;
 50 | }
 51 | 
 52 | /* Selection */
 53 | code[class*="language-"]::-moz-selection,
 54 | code[class*="language-"] *::-moz-selection,
 55 | pre[class*="language-"] *::-moz-selection {
 56 | 	background: hsl(220, 13%, 28%);
 57 | 	color: inherit;
 58 | 	text-shadow: none;
 59 | }
 60 | 
 61 | code[class*="language-"]::selection,
 62 | code[class*="language-"] *::selection,
 63 | pre[class*="language-"] *::selection {
 64 | 	background: hsl(220, 13%, 28%);
 65 | 	color: inherit;
 66 | 	text-shadow: none;
 67 | }
 68 | 
 69 | /* Code blocks */
 70 | pre[class*="language-"] {
 71 | 	padding: 1em;
 72 | 	margin: 0.5em 0;
 73 | 	overflow: auto;
 74 | 	border-radius: 0.3em;
 75 | }
 76 | 
 77 | /* Inline code */
 78 | :not(pre) > code[class*="language-"] {
 79 | 	padding: 0.2em 0.3em;
 80 | 	border-radius: 0.3em;
 81 | 	white-space: normal;
 82 | }
 83 | 
 84 | /* Print */
 85 | @media print {
 86 | 	code[class*="language-"],
 87 | 	pre[class*="language-"] {
 88 | 		text-shadow: none;
 89 | 	}
 90 | }
 91 | 
 92 | .token.comment,
 93 | .token.prolog,
 94 | .token.cdata {
 95 | 	color: hsl(220, 10%, 40%);
 96 | }
 97 | 
 98 | .token.doctype,
 99 | .token.punctuation,
100 | .token.entity {
101 | 	color: hsl(220, 14%, 71%);
102 | }
103 | 
104 | .token.attr-name,
105 | .token.class-name,
106 | .token.boolean,
107 | .token.constant,
108 | .token.number,
109 | .token.atrule {
110 | 	color: hsl(29, 54%, 61%);
111 | }
112 | 
113 | .token.keyword {
114 | 	color: hsl(286, 60%, 67%);
115 | }
116 | 
117 | .token.property,
118 | .token.tag,
119 | .token.symbol,
120 | .token.deleted,
121 | .token.important {
122 | 	color: hsl(355, 65%, 65%);
123 | }
124 | 
125 | .token.selector,
126 | .token.string,
127 | .token.char,
128 | .token.builtin,
129 | .token.inserted,
130 | .token.regex,
131 | .token.attr-value,
132 | .token.attr-value > .token.punctuation {
133 | 	color: hsl(95, 38%, 62%);
134 | }
135 | 
136 | .token.variable,
137 | .token.operator,
138 | .token.function {
139 | 	color: hsl(207, 82%, 66%);
140 | }
141 | 
142 | .token.url {
143 | 	color: hsl(187, 47%, 55%);
144 | }
145 | 
146 | /* HTML overrides */
147 | .token.attr-value > .token.punctuation.attr-equals,
148 | .token.special-attr > .token.attr-value > .token.value.css {
149 | 	color: hsl(220, 14%, 71%);
150 | }
151 | 
152 | /* CSS overrides */
153 | .language-css .token.selector {
154 | 	color: hsl(355, 65%, 65%);
155 | }
156 | 
157 | .language-css .token.property {
158 | 	color: hsl(220, 14%, 71%);
159 | }
160 | 
161 | .language-css .token.function,
162 | .language-css .token.url > .token.function {
163 | 	color: hsl(187, 47%, 55%);
164 | }
165 | 
166 | .language-css .token.url > .token.string.url {
167 | 	color: hsl(95, 38%, 62%);
168 | }
169 | 
170 | .language-css .token.important,
171 | .language-css .token.atrule .token.rule {
172 | 	color: hsl(286, 60%, 67%);
173 | }
174 | 
175 | /* JS overrides */
176 | .language-javascript .token.operator {
177 | 	color: hsl(286, 60%, 67%);
178 | }
179 | 
180 | .language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation {
181 | 	color: hsl(5, 48%, 51%);
182 | }
183 | 
184 | /* JSON overrides */
185 | .language-json .token.operator {
186 | 	color: hsl(220, 14%, 71%);
187 | }
188 | 
189 | .language-json .token.null.keyword {
190 | 	color: hsl(29, 54%, 61%);
191 | }
192 | 
193 | /* MD overrides */
194 | .language-markdown .token.url,
195 | .language-markdown .token.url > .token.operator,
196 | .language-markdown .token.url-reference.url > .token.string {
197 | 	color: hsl(220, 14%, 71%);
198 | }
199 | 
200 | .language-markdown .token.url > .token.content {
201 | 	color: hsl(207, 82%, 66%);
202 | }
203 | 
204 | .language-markdown .token.url > .token.url,
205 | .language-markdown .token.url-reference.url {
206 | 	color: hsl(187, 47%, 55%);
207 | }
208 | 
209 | .language-markdown .token.blockquote.punctuation,
210 | .language-markdown .token.hr.punctuation {
211 | 	color: hsl(220, 10%, 40%);
212 | 	font-style: italic;
213 | }
214 | 
215 | .language-markdown .token.code-snippet {
216 | 	color: hsl(95, 38%, 62%);
217 | }
218 | 
219 | .language-markdown .token.bold .token.content {
220 | 	color: hsl(29, 54%, 61%);
221 | }
222 | 
223 | .language-markdown .token.italic .token.content {
224 | 	color: hsl(286, 60%, 67%);
225 | }
226 | 
227 | .language-markdown .token.strike .token.content,
228 | .language-markdown .token.strike .token.punctuation,
229 | .language-markdown .token.list.punctuation,
230 | .language-markdown .token.title.important > .token.punctuation {
231 | 	color: hsl(355, 65%, 65%);
232 | }
233 | 
234 | /* General */
235 | .token.bold {
236 | 	font-weight: bold;
237 | }
238 | 
239 | .token.comment,
240 | .token.italic {
241 | 	font-style: italic;
242 | }
243 | 
244 | .token.entity {
245 | 	cursor: help;
246 | }
247 | 
248 | .token.namespace {
249 | 	opacity: 0.8;
250 | }
251 | 
252 | /* Plugin overrides */
253 | /* Selectors should have higher specificity than those in the plugins' default stylesheets */
254 | 
255 | /* Show Invisibles plugin overrides */
256 | .token.token.tab:not(:empty):before,
257 | .token.token.cr:before,
258 | .token.token.lf:before,
259 | .token.token.space:before {
260 | 	color: hsla(220, 14%, 71%, 0.15);
261 | 	text-shadow: none;
262 | }
263 | 
264 | /* Toolbar plugin overrides */
265 | /* Space out all buttons and move them away from the right edge of the code block */
266 | div.code-toolbar > .toolbar.toolbar > .toolbar-item {
267 | 	margin-right: 0.4em;
268 | }
269 | 
270 | /* Styling the buttons */
271 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > button,
272 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > a,
273 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > span {
274 | 	background: hsl(220, 13%, 26%);
275 | 	color: hsl(220, 9%, 55%);
276 | 	padding: 0.1em 0.4em;
277 | 	border-radius: 0.3em;
278 | }
279 | 
280 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover,
281 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus,
282 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover,
283 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus,
284 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover,
285 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus {
286 | 	background: hsl(220, 13%, 28%);
287 | 	color: hsl(220, 14%, 71%);
288 | }
289 | 
290 | /* Line Highlight plugin overrides */
291 | /* The highlighted line itself */
292 | .line-highlight.line-highlight {
293 | 	background: hsla(220, 100%, 80%, 0.04);
294 | }
295 | 
296 | /* Default line numbers in Line Highlight plugin */
297 | .line-highlight.line-highlight:before,
298 | .line-highlight.line-highlight[data-end]:after {
299 | 	background: hsl(220, 13%, 26%);
300 | 	color: hsl(220, 14%, 71%);
301 | 	padding: 0.1em 0.6em;
302 | 	border-radius: 0.3em;
303 | 	box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */
304 | }
305 | 
306 | /* Hovering over a linkable line number (in the gutter area) */
307 | /* Requires Line Numbers plugin as well */
308 | pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before {
309 | 	background-color: hsla(220, 100%, 80%, 0.04);
310 | }
311 | 
312 | /* Line Numbers and Command Line plugins overrides */
313 | /* Line separating gutter from coding area */
314 | .line-numbers.line-numbers .line-numbers-rows,
315 | .command-line .command-line-prompt {
316 | 	border-right-color: hsla(220, 14%, 71%, 0.15);
317 | }
318 | 
319 | /* Stuff in the gutter */
320 | .line-numbers .line-numbers-rows > span:before,
321 | .command-line .command-line-prompt > span:before {
322 | 	color: hsl(220, 14%, 45%);
323 | }
324 | 
325 | /* Match Braces plugin overrides */
326 | /* Note: Outline colour is inherited from the braces */
327 | .rainbow-braces .token.token.punctuation.brace-level-1,
328 | .rainbow-braces .token.token.punctuation.brace-level-5,
329 | .rainbow-braces .token.token.punctuation.brace-level-9 {
330 | 	color: hsl(355, 65%, 65%);
331 | }
332 | 
333 | .rainbow-braces .token.token.punctuation.brace-level-2,
334 | .rainbow-braces .token.token.punctuation.brace-level-6,
335 | .rainbow-braces .token.token.punctuation.brace-level-10 {
336 | 	color: hsl(95, 38%, 62%);
337 | }
338 | 
339 | .rainbow-braces .token.token.punctuation.brace-level-3,
340 | .rainbow-braces .token.token.punctuation.brace-level-7,
341 | .rainbow-braces .token.token.punctuation.brace-level-11 {
342 | 	color: hsl(207, 82%, 66%);
343 | }
344 | 
345 | .rainbow-braces .token.token.punctuation.brace-level-4,
346 | .rainbow-braces .token.token.punctuation.brace-level-8,
347 | .rainbow-braces .token.token.punctuation.brace-level-12 {
348 | 	color: hsl(286, 60%, 67%);
349 | }
350 | 
351 | /* Diff Highlight plugin overrides */
352 | /* Taken from https://github.com/atom/github/blob/master/styles/variables.less */
353 | pre.diff-highlight > code .token.token.deleted:not(.prefix),
354 | pre > code.diff-highlight .token.token.deleted:not(.prefix) {
355 | 	background-color: hsla(353, 100%, 66%, 0.15);
356 | }
357 | 
358 | pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection,
359 | pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection,
360 | pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection,
361 | pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection {
362 | 	background-color: hsla(353, 95%, 66%, 0.25);
363 | }
364 | 
365 | pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection,
366 | pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection,
367 | pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection,
368 | pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection {
369 | 	background-color: hsla(353, 95%, 66%, 0.25);
370 | }
371 | 
372 | pre.diff-highlight > code .token.token.inserted:not(.prefix),
373 | pre > code.diff-highlight .token.token.inserted:not(.prefix) {
374 | 	background-color: hsla(137, 100%, 55%, 0.15);
375 | }
376 | 
377 | pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection,
378 | pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection,
379 | pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection,
380 | pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection {
381 | 	background-color: hsla(135, 73%, 55%, 0.25);
382 | }
383 | 
384 | pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection,
385 | pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection,
386 | pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection,
387 | pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection {
388 | 	background-color: hsla(135, 73%, 55%, 0.25);
389 | }
390 | 
391 | /* Previewers plugin overrides */
392 | /* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-dark-ui */
393 | /* Border around popup */
394 | .prism-previewer.prism-previewer:before,
395 | .prism-previewer-gradient.prism-previewer-gradient div {
396 | 	border-color: hsl(224, 13%, 17%);
397 | }
398 | 
399 | /* Angle and time should remain as circles and are hence not included */
400 | .prism-previewer-color.prism-previewer-color:before,
401 | .prism-previewer-gradient.prism-previewer-gradient div,
402 | .prism-previewer-easing.prism-previewer-easing:before {
403 | 	border-radius: 0.3em;
404 | }
405 | 
406 | /* Triangles pointing to the code */
407 | .prism-previewer.prism-previewer:after {
408 | 	border-top-color: hsl(224, 13%, 17%);
409 | }
410 | 
411 | .prism-previewer-flipped.prism-previewer-flipped.after {
412 | 	border-bottom-color: hsl(224, 13%, 17%);
413 | }
414 | 
415 | /* Background colour within the popup */
416 | .prism-previewer-angle.prism-previewer-angle:before,
417 | .prism-previewer-time.prism-previewer-time:before,
418 | .prism-previewer-easing.prism-previewer-easing {
419 | 	background: hsl(219, 13%, 22%);
420 | }
421 | 
422 | /* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */
423 | /* For time, this is the alternate colour */
424 | .prism-previewer-angle.prism-previewer-angle circle,
425 | .prism-previewer-time.prism-previewer-time circle {
426 | 	stroke: hsl(220, 14%, 71%);
427 | 	stroke-opacity: 1;
428 | }
429 | 
430 | /* Stroke colours of the handle, direction point, and vector itself */
431 | .prism-previewer-easing.prism-previewer-easing circle,
432 | .prism-previewer-easing.prism-previewer-easing path,
433 | .prism-previewer-easing.prism-previewer-easing line {
434 | 	stroke: hsl(220, 14%, 71%);
435 | }
436 | 
437 | /* Fill colour of the handle */
438 | .prism-previewer-easing.prism-previewer-easing circle {
439 | 	fill: transparent;
440 | }
441 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/one-light.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * One Light theme for prism.js
  3 |  * Based on Atom's One Light theme: https://github.com/atom/atom/tree/master/packages/one-light-syntax
  4 |  */
  5 | 
  6 | /**
  7 |  * One Light colours (accurate as of commit eb064bf on 19 Feb 2021)
  8 |  * From colors.less
  9 |  * --mono-1: hsl(230, 8%, 24%);
 10 |  * --mono-2: hsl(230, 6%, 44%);
 11 |  * --mono-3: hsl(230, 4%, 64%)
 12 |  * --hue-1: hsl(198, 99%, 37%);
 13 |  * --hue-2: hsl(221, 87%, 60%);
 14 |  * --hue-3: hsl(301, 63%, 40%);
 15 |  * --hue-4: hsl(119, 34%, 47%);
 16 |  * --hue-5: hsl(5, 74%, 59%);
 17 |  * --hue-5-2: hsl(344, 84%, 43%);
 18 |  * --hue-6: hsl(35, 99%, 36%);
 19 |  * --hue-6-2: hsl(35, 99%, 40%);
 20 |  * --syntax-fg: hsl(230, 8%, 24%);
 21 |  * --syntax-bg: hsl(230, 1%, 98%);
 22 |  * --syntax-gutter: hsl(230, 1%, 62%);
 23 |  * --syntax-guide: hsla(230, 8%, 24%, 0.2);
 24 |  * --syntax-accent: hsl(230, 100%, 66%);
 25 |  * From syntax-variables.less
 26 |  * --syntax-selection-color: hsl(230, 1%, 90%);
 27 |  * --syntax-gutter-background-color-selected: hsl(230, 1%, 90%);
 28 |  * --syntax-cursor-line: hsla(230, 8%, 24%, 0.05);
 29 |  */
 30 | 
 31 | code[class*="language-"],
 32 | pre[class*="language-"] {
 33 | 	background: hsl(230, 1%, 98%);
 34 | 	color: hsl(230, 8%, 24%);
 35 | 	font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
 36 | 	direction: ltr;
 37 | 	text-align: left;
 38 | 	white-space: pre;
 39 | 	word-spacing: normal;
 40 | 	word-break: normal;
 41 | 	line-height: 1.5;
 42 | 	-moz-tab-size: 2;
 43 | 	-o-tab-size: 2;
 44 | 	tab-size: 2;
 45 | 	-webkit-hyphens: none;
 46 | 	-moz-hyphens: none;
 47 | 	-ms-hyphens: none;
 48 | 	hyphens: none;
 49 | }
 50 | 
 51 | /* Selection */
 52 | code[class*="language-"]::-moz-selection,
 53 | code[class*="language-"] *::-moz-selection,
 54 | pre[class*="language-"] *::-moz-selection {
 55 | 	background: hsl(230, 1%, 90%);
 56 | 	color: inherit;
 57 | }
 58 | 
 59 | code[class*="language-"]::selection,
 60 | code[class*="language-"] *::selection,
 61 | pre[class*="language-"] *::selection {
 62 | 	background: hsl(230, 1%, 90%);
 63 | 	color: inherit;
 64 | }
 65 | 
 66 | /* Code blocks */
 67 | pre[class*="language-"] {
 68 | 	padding: 1em;
 69 | 	margin: 0.5em 0;
 70 | 	overflow: auto;
 71 | 	border-radius: 0.3em;
 72 | }
 73 | 
 74 | /* Inline code */
 75 | :not(pre) > code[class*="language-"] {
 76 | 	padding: 0.2em 0.3em;
 77 | 	border-radius: 0.3em;
 78 | 	white-space: normal;
 79 | }
 80 | 
 81 | .token.comment,
 82 | .token.prolog,
 83 | .token.cdata {
 84 | 	color: hsl(230, 4%, 64%);
 85 | }
 86 | 
 87 | .token.doctype,
 88 | .token.punctuation,
 89 | .token.entity {
 90 | 	color: hsl(230, 8%, 24%);
 91 | }
 92 | 
 93 | .token.attr-name,
 94 | .token.class-name,
 95 | .token.boolean,
 96 | .token.constant,
 97 | .token.number,
 98 | .token.atrule {
 99 | 	color: hsl(35, 99%, 36%);
100 | }
101 | 
102 | .token.keyword {
103 | 	color: hsl(301, 63%, 40%);
104 | }
105 | 
106 | .token.property,
107 | .token.tag,
108 | .token.symbol,
109 | .token.deleted,
110 | .token.important {
111 | 	color: hsl(5, 74%, 59%);
112 | }
113 | 
114 | .token.selector,
115 | .token.string,
116 | .token.char,
117 | .token.builtin,
118 | .token.inserted,
119 | .token.regex,
120 | .token.attr-value,
121 | .token.attr-value > .token.punctuation {
122 | 	color: hsl(119, 34%, 47%);
123 | }
124 | 
125 | .token.variable,
126 | .token.operator,
127 | .token.function {
128 | 	color: hsl(221, 87%, 60%);
129 | }
130 | 
131 | .token.url {
132 | 	color: hsl(198, 99%, 37%);
133 | }
134 | 
135 | /* HTML overrides */
136 | .token.attr-value > .token.punctuation.attr-equals,
137 | .token.special-attr > .token.attr-value > .token.value.css {
138 | 	color: hsl(230, 8%, 24%);
139 | }
140 | 
141 | /* CSS overrides */
142 | .language-css .token.selector {
143 | 	color: hsl(5, 74%, 59%);
144 | }
145 | 
146 | .language-css .token.property {
147 | 	color: hsl(230, 8%, 24%);
148 | }
149 | 
150 | .language-css .token.function,
151 | .language-css .token.url > .token.function {
152 | 	color: hsl(198, 99%, 37%);
153 | }
154 | 
155 | .language-css .token.url > .token.string.url {
156 | 	color: hsl(119, 34%, 47%);
157 | }
158 | 
159 | .language-css .token.important,
160 | .language-css .token.atrule .token.rule {
161 | 	color: hsl(301, 63%, 40%);
162 | }
163 | 
164 | /* JS overrides */
165 | .language-javascript .token.operator {
166 | 	color: hsl(301, 63%, 40%);
167 | }
168 | 
169 | .language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation {
170 | 	color: hsl(344, 84%, 43%);
171 | }
172 | 
173 | /* JSON overrides */
174 | .language-json .token.operator {
175 | 	color: hsl(230, 8%, 24%);
176 | }
177 | 
178 | .language-json .token.null.keyword {
179 | 	color: hsl(35, 99%, 36%);
180 | }
181 | 
182 | /* MD overrides */
183 | .language-markdown .token.url,
184 | .language-markdown .token.url > .token.operator,
185 | .language-markdown .token.url-reference.url > .token.string {
186 | 	color: hsl(230, 8%, 24%);
187 | }
188 | 
189 | .language-markdown .token.url > .token.content {
190 | 	color: hsl(221, 87%, 60%);
191 | }
192 | 
193 | .language-markdown .token.url > .token.url,
194 | .language-markdown .token.url-reference.url {
195 | 	color: hsl(198, 99%, 37%);
196 | }
197 | 
198 | .language-markdown .token.blockquote.punctuation,
199 | .language-markdown .token.hr.punctuation {
200 | 	color: hsl(230, 4%, 64%);
201 | 	font-style: italic;
202 | }
203 | 
204 | .language-markdown .token.code-snippet {
205 | 	color: hsl(119, 34%, 47%);
206 | }
207 | 
208 | .language-markdown .token.bold .token.content {
209 | 	color: hsl(35, 99%, 36%);
210 | }
211 | 
212 | .language-markdown .token.italic .token.content {
213 | 	color: hsl(301, 63%, 40%);
214 | }
215 | 
216 | .language-markdown .token.strike .token.content,
217 | .language-markdown .token.strike .token.punctuation,
218 | .language-markdown .token.list.punctuation,
219 | .language-markdown .token.title.important > .token.punctuation {
220 | 	color: hsl(5, 74%, 59%);
221 | }
222 | 
223 | /* General */
224 | .token.bold {
225 | 	font-weight: bold;
226 | }
227 | 
228 | .token.comment,
229 | .token.italic {
230 | 	font-style: italic;
231 | }
232 | 
233 | .token.entity {
234 | 	cursor: help;
235 | }
236 | 
237 | .token.namespace {
238 | 	opacity: 0.8;
239 | }
240 | 
241 | /* Plugin overrides */
242 | /* Selectors should have higher specificity than those in the plugins' default stylesheets */
243 | 
244 | /* Show Invisibles plugin overrides */
245 | .token.token.tab:not(:empty):before,
246 | .token.token.cr:before,
247 | .token.token.lf:before,
248 | .token.token.space:before {
249 | 	color: hsla(230, 8%, 24%, 0.2);
250 | }
251 | 
252 | /* Toolbar plugin overrides */
253 | /* Space out all buttons and move them away from the right edge of the code block */
254 | div.code-toolbar > .toolbar.toolbar > .toolbar-item {
255 | 	margin-right: 0.4em;
256 | }
257 | 
258 | /* Styling the buttons */
259 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > button,
260 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > a,
261 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > span {
262 | 	background: hsl(230, 1%, 90%);
263 | 	color: hsl(230, 6%, 44%);
264 | 	padding: 0.1em 0.4em;
265 | 	border-radius: 0.3em;
266 | }
267 | 
268 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover,
269 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus,
270 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover,
271 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus,
272 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover,
273 | div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus {
274 | 	background: hsl(230, 1%, 78%); /* custom: darken(--syntax-bg, 20%) */
275 | 	color: hsl(230, 8%, 24%);
276 | }
277 | 
278 | /* Line Highlight plugin overrides */
279 | /* The highlighted line itself */
280 | .line-highlight.line-highlight {
281 | 	background: hsla(230, 8%, 24%, 0.05);
282 | }
283 | 
284 | /* Default line numbers in Line Highlight plugin */
285 | .line-highlight.line-highlight:before,
286 | .line-highlight.line-highlight[data-end]:after {
287 | 	background: hsl(230, 1%, 90%);
288 | 	color: hsl(230, 8%, 24%);
289 | 	padding: 0.1em 0.6em;
290 | 	border-radius: 0.3em;
291 | 	box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */
292 | }
293 | 
294 | /* Hovering over a linkable line number (in the gutter area) */
295 | /* Requires Line Numbers plugin as well */
296 | pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before {
297 | 	background-color: hsla(230, 8%, 24%, 0.05);
298 | }
299 | 
300 | /* Line Numbers and Command Line plugins overrides */
301 | /* Line separating gutter from coding area */
302 | .line-numbers.line-numbers .line-numbers-rows,
303 | .command-line .command-line-prompt {
304 | 	border-right-color: hsla(230, 8%, 24%, 0.2);
305 | }
306 | 
307 | /* Stuff in the gutter */
308 | .line-numbers .line-numbers-rows > span:before,
309 | .command-line .command-line-prompt > span:before {
310 | 	color: hsl(230, 1%, 62%);
311 | }
312 | 
313 | /* Match Braces plugin overrides */
314 | /* Note: Outline colour is inherited from the braces */
315 | .rainbow-braces .token.token.punctuation.brace-level-1,
316 | .rainbow-braces .token.token.punctuation.brace-level-5,
317 | .rainbow-braces .token.token.punctuation.brace-level-9 {
318 | 	color: hsl(5, 74%, 59%);
319 | }
320 | 
321 | .rainbow-braces .token.token.punctuation.brace-level-2,
322 | .rainbow-braces .token.token.punctuation.brace-level-6,
323 | .rainbow-braces .token.token.punctuation.brace-level-10 {
324 | 	color: hsl(119, 34%, 47%);
325 | }
326 | 
327 | .rainbow-braces .token.token.punctuation.brace-level-3,
328 | .rainbow-braces .token.token.punctuation.brace-level-7,
329 | .rainbow-braces .token.token.punctuation.brace-level-11 {
330 | 	color: hsl(221, 87%, 60%);
331 | }
332 | 
333 | .rainbow-braces .token.token.punctuation.brace-level-4,
334 | .rainbow-braces .token.token.punctuation.brace-level-8,
335 | .rainbow-braces .token.token.punctuation.brace-level-12 {
336 | 	color: hsl(301, 63%, 40%);
337 | }
338 | 
339 | /* Diff Highlight plugin overrides */
340 | /* Taken from https://github.com/atom/github/blob/master/styles/variables.less */
341 | pre.diff-highlight > code .token.token.deleted:not(.prefix),
342 | pre > code.diff-highlight .token.token.deleted:not(.prefix) {
343 | 	background-color: hsla(353, 100%, 66%, 0.15);
344 | }
345 | 
346 | pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection,
347 | pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection,
348 | pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection,
349 | pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection {
350 | 	background-color: hsla(353, 95%, 66%, 0.25);
351 | }
352 | 
353 | pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection,
354 | pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection,
355 | pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection,
356 | pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection {
357 | 	background-color: hsla(353, 95%, 66%, 0.25);
358 | }
359 | 
360 | pre.diff-highlight > code .token.token.inserted:not(.prefix),
361 | pre > code.diff-highlight .token.token.inserted:not(.prefix) {
362 | 	background-color: hsla(137, 100%, 55%, 0.15);
363 | }
364 | 
365 | pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection,
366 | pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection,
367 | pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection,
368 | pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection {
369 | 	background-color: hsla(135, 73%, 55%, 0.25);
370 | }
371 | 
372 | pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection,
373 | pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection,
374 | pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection,
375 | pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection {
376 | 	background-color: hsla(135, 73%, 55%, 0.25);
377 | }
378 | 
379 | /* Previewers plugin overrides */
380 | /* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-light-ui */
381 | /* Border around popup */
382 | .prism-previewer.prism-previewer:before,
383 | .prism-previewer-gradient.prism-previewer-gradient div {
384 | 	border-color: hsl(0, 0, 95%);
385 | }
386 | 
387 | /* Angle and time should remain as circles and are hence not included */
388 | .prism-previewer-color.prism-previewer-color:before,
389 | .prism-previewer-gradient.prism-previewer-gradient div,
390 | .prism-previewer-easing.prism-previewer-easing:before {
391 | 	border-radius: 0.3em;
392 | }
393 | 
394 | /* Triangles pointing to the code */
395 | .prism-previewer.prism-previewer:after {
396 | 	border-top-color: hsl(0, 0, 95%);
397 | }
398 | 
399 | .prism-previewer-flipped.prism-previewer-flipped.after {
400 | 	border-bottom-color: hsl(0, 0, 95%);
401 | }
402 | 
403 | /* Background colour within the popup */
404 | .prism-previewer-angle.prism-previewer-angle:before,
405 | .prism-previewer-time.prism-previewer-time:before,
406 | .prism-previewer-easing.prism-previewer-easing {
407 | 	background: hsl(0, 0%, 100%);
408 | }
409 | 
410 | /* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */
411 | /* For time, this is the alternate colour */
412 | .prism-previewer-angle.prism-previewer-angle circle,
413 | .prism-previewer-time.prism-previewer-time circle {
414 | 	stroke: hsl(230, 8%, 24%);
415 | 	stroke-opacity: 1;
416 | }
417 | 
418 | /* Stroke colours of the handle, direction point, and vector itself */
419 | .prism-previewer-easing.prism-previewer-easing circle,
420 | .prism-previewer-easing.prism-previewer-easing path,
421 | .prism-previewer-easing.prism-previewer-easing line {
422 | 	stroke: hsl(230, 8%, 24%);
423 | }
424 | 
425 | /* Fill colour of the handle */
426 | .prism-previewer-easing.prism-previewer-easing circle {
427 | 	fill: transparent;
428 | }
429 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/pojoaque.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * Pojoaque Style by Jason Tate
  3 |  * http://web-cms-designs.com/ftopict-10-pojoaque-style-for-highlight-js-code-highlighter.html
  4 |  * Based on Solarized Style from http://ethanschoonover.com/solarized
  5 |  * http://softwaremaniacs.org/media/soft/highlight/test.html
  6 | */
  7 | 
  8 | code[class*="language-"],
  9 | pre[class*="language-"] {
 10 | 	-moz-tab-size: 4;
 11 | 	-o-tab-size: 4;
 12 | 	tab-size: 4;
 13 | 	-webkit-hyphens: none;
 14 | 	-moz-hyphens: none;
 15 | 	-ms-hyphens: none;
 16 | 	hyphens: none;
 17 | 	white-space: pre;
 18 | 	white-space: pre-wrap;
 19 | 	word-break: break-all;
 20 | 	word-wrap: break-word;
 21 | 	font-family: Menlo, Monaco, "Courier New", monospace;
 22 | 	font-size: 15px;
 23 | 	line-height: 1.5;
 24 | 	color: #dccf8f;
 25 | 	text-shadow: 0;
 26 | }
 27 | 
 28 | pre > code[class*="language-"] {
 29 | 	font-size: 1em;
 30 | }
 31 | 
 32 | pre[class*="language-"],
 33 | :not(pre) > code[class*="language-"] {
 34 | 	border-radius: 5px;
 35 | 	border: 1px solid #000;
 36 | 	color: #DCCF8F;
 37 | 	background: #181914 url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAMAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQACQYGBgcGCQcHCQ0IBwgNDwsJCQsPEQ4ODw4OERENDg4ODg0RERQUFhQUERoaHBwaGiYmJiYmKysrKysrKysrKwEJCAgJCgkMCgoMDwwODA8TDg4ODhMVDg4PDg4VGhMRERERExoXGhYWFhoXHR0aGh0dJCQjJCQrKysrKysrKysr/8AAEQgAjACMAwEiAAIRAQMRAf/EAF4AAQEBAAAAAAAAAAAAAAAAAAABBwEBAQAAAAAAAAAAAAAAAAAAAAIQAAEDAwIHAQEAAAAAAAAAAADwAREhYaExkUFRcYGxwdHh8REBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AyGFEjHaBS2fDDs2zkhKmBKktb7km+ZwwCnXPkLVmCTMItj6AXFxRS465/BTnkAJvkLkJe+7AKKoi2AtRS2zuAWsCb5GOlBN8gKfmuGHZ8MFqIth3ALmFoFwbwKWyAlTAp17uKqBvgBD8sM4fTjhvAhkzhaRkBMKBrfs7jGPIpzy7gFrAqnC0C0gB0EWwBDW2cBVQwm+QtPpa3wBO3sVvszCnLAhkzgL5/RLf13cLQd8/AGlu0Cb5HTx9KuAEieGJEdcehS3eRTp2ATdt3CpIm+QtZwAhROXFeb7swp/ahaM3kBE/jSIUBc/AWrgBN8uNFAl+b7sAXFxFn2YLUU5Ns7gFX8C4ib+hN8gFWXwK3bZglxEJm+gKdciLPsFV/TClsgJUwKJ5FVA7tvIFrfZhVfGJDcsCKaYgAqv6YRbE+RWOWBtu7+AL3yRalXLyKqAIIfk+zARbDgFyEsncYwJvlgFRW+GEWntIi2P0BooyFxcNr8Ep3+ANLbMO+QyhvbiqdgC0kVvgUUiLYgBS2QtPbiVI1/sgOmG9uO+Y8DW+7jS2zAOnj6O2BndwuIAUtkdRN8gFoK3wwXMQyZwHVbClsuNLd4E3yAUR6FVDBR+BafQGt93LVMxJTv8ABts4CVLhcfYWsCb5kC9/BHdU8CLYFY5bMAd+eX9MGthhpbA1vu4B7+RKkaW2Yq4AQtVBBFsAJU/AuIXBhN8gGWnstefhiZyWvLAEnbYS1uzSFP6Jvn4Baxx70JKkQojLib5AVTey1jjgkKJGO0AKWyOm7N7cSpgSpAdPH0Tfd/gp1z5C1ZgKqN9J2wFxcUUuAFLZAm+QC0Fb4YUVRFsAOvj4KW2dwtYE3yAWk/wS/PLMKfmuGHZ8MAXF/Ja32Yi5haAKWz4Ydm2cSpgU693Atb7km+Zwwh+WGcPpxw3gAkzCLY+iYUDW/Z3Adc/gpzyFrAqnALkJe+7DoItgAtRS2zuKqGE3yAx0oJvkdvYrfZmALURbDuL5/RLf13cAuDeBS2RpbtAm+QFVA3wR+3fUtFHoBDJnC0jIXH0HWsgMY8inPLuOkd9chp4z20ALQLSA8cI9jYAIa2zjzjBd8gRafS1vgiUho/kAKcsCGTOGWvoOpkAtB3z8Hm8x2Ff5ADp4+lXAlIvcmwH/2Q==') repeat left top;
 38 | }
 39 | 
 40 | pre[class*="language-"] {
 41 | 	padding: 12px;
 42 | 	overflow: auto;
 43 | }
 44 | 
 45 | :not(pre) > code[class*="language-"] {
 46 | 	padding: 2px 6px;
 47 | }
 48 | 
 49 | .token.namespace {
 50 | 	opacity: .7;
 51 | }
 52 | 
 53 | .token.comment,
 54 | .token.prolog,
 55 | .token.doctype,
 56 | .token.cdata {
 57 | 	color: #586e75;
 58 | 	font-style: italic;
 59 | }
 60 | 
 61 | .token.number,
 62 | .token.string,
 63 | .token.char,
 64 | .token.builtin,
 65 | .token.inserted {
 66 | 	color: #468966;
 67 | }
 68 | 
 69 | .token.attr-name {
 70 | 	color: #b89859;
 71 | }
 72 | 
 73 | .token.operator,
 74 | .token.entity,
 75 | .token.url,
 76 | .language-css .token.string,
 77 | .style .token.string {
 78 | 	color: #dccf8f;
 79 | }
 80 | 
 81 | .token.selector,
 82 | .token.regex {
 83 | 	color: #859900;
 84 | }
 85 | 
 86 | .token.atrule,
 87 | .token.keyword {
 88 | 	color: #cb4b16;
 89 | }
 90 | 
 91 | .token.attr-value {
 92 | 	color: #468966;
 93 | }
 94 | 
 95 | .token.function,
 96 | .token.variable,
 97 | .token.placeholder {
 98 | 	color: #b58900;
 99 | }
100 | 
101 | .token.property,
102 | .token.tag,
103 | .token.boolean,
104 | .token.number,
105 | .token.constant,
106 | .token.symbol {
107 | 	color: #b89859;
108 | }
109 | 
110 | .token.tag {
111 | 	color: #ffb03b;
112 | }
113 | 
114 | .token.important,
115 | .token.statement,
116 | .token.deleted {
117 | 	color: #dc322f;
118 | }
119 | 
120 | .token.punctuation {
121 | 	color: #dccf8f;
122 | }
123 | 
124 | .token.entity {
125 | 	cursor: help;
126 | }
127 | 
128 | .token.bold {
129 | 	font-weight: bold;
130 | }
131 | 
132 | .token.italic {
133 | 	font-style: italic;
134 | }
135 | 
136 | /*
137 | .pojoaque-colors {
138 | 	color: #586e75;
139 | 	color: #b64926;
140 | 	color: #468966;
141 | 	color: #ffb03b;
142 | 	color: #b58900;
143 | 	color: #b89859;
144 | 	color: #dccf8f;
145 | 	color: #d3a60c;
146 | 	color: #cb4b16;
147 | 	color: #dc322f;
148 | 	color: #073642;
149 | 	color: #181914;
150 | }
151 | */
152 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/prism-shades-of-purple.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Shades of Purple Theme for Prism.js
  3 |  *
  4 |  * @author Ahmad Awais <https://twitter.com/MrAhmadAwais/>
  5 |  * @support Follow/tweet at https://twitter.com/MrAhmadAwais/
  6 |  */
  7 | 
  8 | code[class*='language-'],
  9 | pre[class*='language-'] {
 10 | 	color: #9efeff;
 11 | 	direction: ltr;
 12 | 	text-align: left;
 13 | 	white-space: pre;
 14 | 	word-spacing: normal;
 15 | 	word-break: normal;
 16 | 
 17 | 	-moz-tab-size: 4;
 18 | 	-o-tab-size: 4;
 19 | 	tab-size: 4;
 20 | 
 21 | 	-webkit-hyphens: none;
 22 | 	-moz-hyphens: none;
 23 | 	-ms-hyphens: none;
 24 | 	hyphens: none;
 25 | 
 26 | 	font-family: 'Operator Mono', 'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 27 | 	font-weight: 400;
 28 | 	font-size: 17px;
 29 | 	line-height: 25px;
 30 | 	letter-spacing: 0.5px;
 31 | 	text-shadow: 0 1px #222245;
 32 | }
 33 | 
 34 | pre[class*='language-']::-moz-selection,
 35 | pre[class*='language-'] ::-moz-selection,
 36 | code[class*='language-']::-moz-selection,
 37 | code[class*='language-'] ::-moz-selection,
 38 | pre[class*='language-']::selection,
 39 | pre[class*='language-'] ::selection,
 40 | code[class*='language-']::selection,
 41 | code[class*='language-'] ::selection {
 42 | 	color: inherit;
 43 | 	background: #a599e9;
 44 | }
 45 | 
 46 | /* Code blocks. */
 47 | pre[class*='language-'] {
 48 | 	/* padding: 2em; */
 49 | 	margin: 0.5em 0;
 50 | 	overflow: auto;
 51 | }
 52 | 
 53 | :not(pre) > code[class*='language-'],
 54 | pre[class*='language-'] {
 55 | 	background: #1e1e3f;
 56 | }
 57 | 
 58 | /* Inline code */
 59 | :not(pre) > code[class*='language-'] {
 60 | 	padding: 0.1em;
 61 | 	border-radius: 0.3em;
 62 | }
 63 | 
 64 | .token {
 65 | 	font-weight: 400;
 66 | }
 67 | 
 68 | .token.comment,
 69 | .token.prolog,
 70 | .token.cdata {
 71 | 	color: #b362ff;
 72 | }
 73 | 
 74 | .token.delimiter,
 75 | .token.keyword,
 76 | .token.selector,
 77 | .token.important,
 78 | .token.atrule {
 79 | 	color: #ff9d00;
 80 | }
 81 | 
 82 | .token.operator,
 83 | .token.attr-name {
 84 | 	color: rgb(255, 180, 84);
 85 | }
 86 | 
 87 | .token.punctuation {
 88 | 	color: #ffffff;
 89 | }
 90 | 
 91 | .token.boolean {
 92 | 	color: rgb(255, 98, 140);
 93 | }
 94 | 
 95 | .token.tag,
 96 | .token.tag .punctuation,
 97 | .token.doctype,
 98 | .token.builtin {
 99 | 	color: rgb(255, 157, 0);
100 | }
101 | 
102 | .token.entity,
103 | .token.symbol {
104 | 	color: #6897bb;
105 | }
106 | 
107 | .token.number {
108 | 	color: #ff628c;
109 | }
110 | 
111 | .token.property,
112 | .token.constant,
113 | .token.variable {
114 | 	color: #ff628c;
115 | }
116 | 
117 | .token.string,
118 | .token.char {
119 | 	color: #a5ff90;
120 | }
121 | 
122 | .token.attr-value,
123 | .token.attr-value .punctuation {
124 | 	color: #a5c261;
125 | }
126 | 
127 | .token.attr-value .punctuation:first-child {
128 | 	color: #a9b7c6;
129 | }
130 | 
131 | .token.url {
132 | 	color: #287bde;
133 | 	text-decoration: underline;
134 | }
135 | 
136 | .token.function {
137 | 	color: rgb(250, 208, 0);
138 | }
139 | 
140 | .token.regex {
141 | 	background: #364135;
142 | }
143 | 
144 | .token.bold {
145 | 	font-weight: bold;
146 | }
147 | 
148 | .token.italic {
149 | 	font-style: italic;
150 | }
151 | 
152 | .token.inserted {
153 | 	background: #00ff00;
154 | }
155 | 
156 | .token.deleted {
157 | 	background: #ff000d;
158 | }
159 | 
160 | code.language-css .token.property,
161 | code.language-css .token.property + .token.punctuation {
162 | 	color: #a9b7c6;
163 | }
164 | 
165 | code.language-css .token.id {
166 | 	color: #ffc66d;
167 | }
168 | 
169 | code.language-css .token.selector > .token.class,
170 | code.language-css .token.selector > .token.attribute,
171 | code.language-css .token.selector > .token.pseudo-class,
172 | code.language-css .token.selector > .token.pseudo-element {
173 | 	color: #ffc66d;
174 | }
175 | 
176 | .token.class-name {
177 | 	color: #fb94ff;
178 | }
179 | 
180 | .token.operator,
181 | .token.entity,
182 | .token.url,
183 | .language-css .token.string,
184 | .style .token.string {
185 | 	background: none;
186 | }
187 | 
188 | .line-highlight.line-highlight {
189 | 	margin-top: 36px;
190 | 	background: linear-gradient(to right, rgba(179, 98, 255, 0.17), transparent);
191 | }
192 | 
193 | .line-highlight.line-highlight:before,
194 | .line-highlight.line-highlight[data-end]:after {
195 | 	content: '';
196 | }
197 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/shades-of-purple.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Shades of Purple Theme for Prism.js
  3 |  *
  4 |  * @author Ahmad Awais <https://twitter.com/MrAhmadAwais/>
  5 |  * @support Follow/tweet at https://twitter.com/MrAhmadAwais/
  6 |  */
  7 | 
  8 | code[class*='language-'],
  9 | pre[class*='language-'] {
 10 | 	color: #9efeff;
 11 | 	direction: ltr;
 12 | 	text-align: left;
 13 | 	white-space: pre;
 14 | 	word-spacing: normal;
 15 | 	word-break: normal;
 16 | 
 17 | 	-moz-tab-size: 4;
 18 | 	-o-tab-size: 4;
 19 | 	tab-size: 4;
 20 | 
 21 | 	-webkit-hyphens: none;
 22 | 	-moz-hyphens: none;
 23 | 	-ms-hyphens: none;
 24 | 	hyphens: none;
 25 | 
 26 | 	font-family: 'Operator Mono', 'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 27 | 	font-weight: 400;
 28 | 	font-size: 17px;
 29 | 	line-height: 25px;
 30 | 	letter-spacing: 0.5px;
 31 | 	text-shadow: 0 1px #222245;
 32 | }
 33 | 
 34 | pre[class*='language-']::-moz-selection,
 35 | pre[class*='language-'] ::-moz-selection,
 36 | code[class*='language-']::-moz-selection,
 37 | code[class*='language-'] ::-moz-selection,
 38 | pre[class*='language-']::selection,
 39 | pre[class*='language-'] ::selection,
 40 | code[class*='language-']::selection,
 41 | code[class*='language-'] ::selection {
 42 | 	color: inherit;
 43 | 	background: #a599e9;
 44 | }
 45 | 
 46 | /* Code blocks. */
 47 | pre[class*='language-'] {
 48 | 	/* padding: 2em; */
 49 | 	margin: 0.5em 0;
 50 | 	overflow: auto;
 51 | }
 52 | 
 53 | :not(pre) > code[class*='language-'],
 54 | pre[class*='language-'] {
 55 | 	background: #1e1e3f;
 56 | }
 57 | 
 58 | /* Inline code */
 59 | :not(pre) > code[class*='language-'] {
 60 | 	padding: 0.1em;
 61 | 	border-radius: 0.3em;
 62 | }
 63 | 
 64 | .token {
 65 | 	font-weight: 400;
 66 | }
 67 | 
 68 | .token.comment,
 69 | .token.prolog,
 70 | .token.cdata {
 71 | 	color: #b362ff;
 72 | }
 73 | 
 74 | .token.delimiter,
 75 | .token.keyword,
 76 | .token.selector,
 77 | .token.important,
 78 | .token.atrule {
 79 | 	color: #ff9d00;
 80 | }
 81 | 
 82 | .token.operator,
 83 | .token.attr-name {
 84 | 	color: rgb(255, 180, 84);
 85 | }
 86 | 
 87 | .token.punctuation {
 88 | 	color: #ffffff;
 89 | }
 90 | 
 91 | .token.boolean {
 92 | 	color: rgb(255, 98, 140);
 93 | }
 94 | 
 95 | .token.tag,
 96 | .token.tag .punctuation,
 97 | .token.doctype,
 98 | .token.builtin {
 99 | 	color: rgb(255, 157, 0);
100 | }
101 | 
102 | .token.entity,
103 | .token.symbol {
104 | 	color: #6897bb;
105 | }
106 | 
107 | .token.number {
108 | 	color: #ff628c;
109 | }
110 | 
111 | .token.property,
112 | .token.constant,
113 | .token.variable {
114 | 	color: #ff628c;
115 | }
116 | 
117 | .token.string,
118 | .token.char {
119 | 	color: #a5ff90;
120 | }
121 | 
122 | .token.attr-value,
123 | .token.attr-value .punctuation {
124 | 	color: #a5c261;
125 | }
126 | 
127 | .token.attr-value .punctuation:first-child {
128 | 	color: #a9b7c6;
129 | }
130 | 
131 | .token.url {
132 | 	color: #287bde;
133 | 	text-decoration: underline;
134 | }
135 | 
136 | .token.function {
137 | 	color: rgb(250, 208, 0);
138 | }
139 | 
140 | .token.regex {
141 | 	background: #364135;
142 | }
143 | 
144 | .token.bold {
145 | 	font-weight: bold;
146 | }
147 | 
148 | .token.italic {
149 | 	font-style: italic;
150 | }
151 | 
152 | .token.inserted {
153 | 	background: #00ff00;
154 | }
155 | 
156 | .token.deleted {
157 | 	background: #ff000d;
158 | }
159 | 
160 | code.language-css .token.property,
161 | code.language-css .token.property + .token.punctuation {
162 | 	color: #a9b7c6;
163 | }
164 | 
165 | code.language-css .token.id {
166 | 	color: #ffc66d;
167 | }
168 | 
169 | code.language-css .token.selector > .token.class,
170 | code.language-css .token.selector > .token.attribute,
171 | code.language-css .token.selector > .token.pseudo-class,
172 | code.language-css .token.selector > .token.pseudo-element {
173 | 	color: #ffc66d;
174 | }
175 | 
176 | .token.class-name {
177 | 	color: #fb94ff;
178 | }
179 | 
180 | .token.operator,
181 | .token.entity,
182 | .token.url,
183 | .language-css .token.string,
184 | .style .token.string {
185 | 	background: none;
186 | }
187 | 
188 | .line-highlight.line-highlight {
189 | 	margin-top: 36px;
190 | 	background: linear-gradient(to right, rgba(179, 98, 255, 0.17), transparent);
191 | }
192 | 
193 | .line-highlight.line-highlight:before,
194 | .line-highlight.line-highlight[data-end]:after {
195 | 	content: '';
196 | }
197 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/solarized-dark-atom.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Solarized dark atom theme for `prism.js`
  3 |  * Based on Atom's `atom-dark` theme: https://github.com/atom/atom-dark-syntax
  4 |  * @author Pranay Chauhan (@PranayChauhan2516)
  5 |  */
  6 | 
  7 | code[class*="language-"],
  8 | pre[class*="language-"] {
  9 | 	color: #839496;
 10 | 	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
 11 | 	font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
 12 | 	direction: ltr;
 13 | 	text-align: left;
 14 | 	white-space: pre;
 15 | 	word-spacing: normal;
 16 | 	word-break: normal;
 17 | 	line-height: 1.5;
 18 | 
 19 | 	-moz-tab-size: 4;
 20 | 	-o-tab-size: 4;
 21 | 	tab-size: 4;
 22 | 
 23 | 	-webkit-hyphens: none;
 24 | 	-moz-hyphens: none;
 25 | 	-ms-hyphens: none;
 26 | 	hyphens: none;
 27 | }
 28 | 
 29 | /* Code blocks */
 30 | pre[class*="language-"] {
 31 | 	padding: 1em;
 32 | 	margin: .5em 0;
 33 | 	overflow: auto;
 34 | 	border-radius: 0.3em;
 35 | }
 36 | 
 37 | :not(pre) > code[class*="language-"],
 38 | pre[class*="language-"] {
 39 | 	background: #002b36;
 40 | }
 41 | 
 42 | /* Inline code */
 43 | :not(pre) > code[class*="language-"] {
 44 | 	padding: .1em;
 45 | 	border-radius: .3em;
 46 | }
 47 | 
 48 | .token.comment,
 49 | .token.prolog,
 50 | .token.doctype,
 51 | .token.cdata {
 52 | 	color: #586e75;
 53 | }
 54 | 
 55 | .token.punctuation {
 56 | 	color: #93a1a1;
 57 | }
 58 | 
 59 | .namespace {
 60 | 	opacity: .7;
 61 | }
 62 | 
 63 | .token.property,
 64 | .token.keyword,
 65 | .token.tag {
 66 | 	color: #268bd2;
 67 | }
 68 | 
 69 | .token.class-name {
 70 | 	color: #FFFFB6;
 71 | 	text-decoration: underline;
 72 | }
 73 | 
 74 | .token.boolean,
 75 | .token.constant {
 76 | 	color: #b58900;
 77 | }
 78 | 
 79 | .token.symbol,
 80 | .token.deleted {
 81 | 	color: #dc322f;
 82 | }
 83 | 
 84 | .token.number {
 85 | 	color: #859900;
 86 | }
 87 | 
 88 | .token.selector,
 89 | .token.attr-name,
 90 | .token.string,
 91 | .token.char,
 92 | .token.builtin,
 93 | .token.inserted {
 94 | 	color: #859900;
 95 | }
 96 | 
 97 | .token.variable {
 98 | 	color: #268bd2;
 99 | }
100 | 
101 | .token.operator {
102 | 	color: #EDEDED;
103 | }
104 | 
105 | .token.function {
106 | 	color: #268bd2;
107 | }
108 | 
109 | .token.regex {
110 | 	color: #E9C062;
111 | }
112 | 
113 | .token.important {
114 | 	color: #fd971f;
115 | }
116 | 
117 | .token.entity {
118 | 	color: #FFFFB6;
119 | 	cursor: help;
120 | }
121 | 
122 | .token.url {
123 | 	color: #96CBFE;
124 | }
125 | 
126 | .language-css .token.string,
127 | .style .token.string {
128 | 	color: #87C38A;
129 | }
130 | 
131 | .token.important,
132 | .token.bold {
133 | 	font-weight: bold;
134 | }
135 | 
136 | .token.italic {
137 | 	font-style: italic;
138 | }
139 | 
140 | .token.atrule,
141 | .token.attr-value {
142 | 	color: #F9EE98;
143 | }
144 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/synthwave84.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * Synthwave '84 Theme originally by Robb Owen [@Robb0wen] for Visual Studio Code
  3 |  * Demo: https://marc.dev/demo/prism-synthwave84
  4 |  *
  5 |  * Ported for PrismJS by Marc Backes [@themarcba]
  6 |  */
  7 | 
  8 | code[class*="language-"],
  9 | pre[class*="language-"] {
 10 | 	color: #f92aad;
 11 | 	text-shadow: 0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3;
 12 | 	background: none;
 13 | 	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 14 | 	font-size: 1em;
 15 | 	text-align: left;
 16 | 	white-space: pre;
 17 | 	word-spacing: normal;
 18 | 	word-break: normal;
 19 | 	word-wrap: normal;
 20 | 	line-height: 1.5;
 21 | 
 22 | 	-moz-tab-size: 4;
 23 | 	-o-tab-size: 4;
 24 | 	tab-size: 4;
 25 | 
 26 | 	-webkit-hyphens: none;
 27 | 	-moz-hyphens: none;
 28 | 	-ms-hyphens: none;
 29 | 	hyphens: none;
 30 | }
 31 | 
 32 | /* Code blocks */
 33 | pre[class*="language-"] {
 34 | 	padding: 1em;
 35 | 	margin: .5em 0;
 36 | 	overflow: auto;
 37 | }
 38 | 
 39 | :not(pre) > code[class*="language-"],
 40 | pre[class*="language-"] {
 41 | 	background-color: transparent !important;
 42 | 	background-image: linear-gradient(to bottom, #2a2139 75%, #34294f);
 43 | }
 44 | 
 45 | /* Inline code */
 46 | :not(pre) > code[class*="language-"] {
 47 | 	padding: .1em;
 48 | 	border-radius: .3em;
 49 | 	white-space: normal;
 50 | }
 51 | 
 52 | .token.comment,
 53 | .token.block-comment,
 54 | .token.prolog,
 55 | .token.doctype,
 56 | .token.cdata {
 57 | 	color: #8e8e8e;
 58 | }
 59 | 
 60 | .token.punctuation {
 61 | 	color: #ccc;
 62 | }
 63 | 
 64 | .token.tag,
 65 | .token.attr-name,
 66 | .token.namespace,
 67 | .token.number,
 68 | .token.unit,
 69 | .token.hexcode,
 70 | .token.deleted {
 71 | 	color: #e2777a;
 72 | }
 73 | 
 74 | .token.property,
 75 | .token.selector {
 76 | 	color: #72f1b8;
 77 | 	text-shadow: 0 0 2px #100c0f, 0 0 10px #257c5575, 0 0 35px #21272475;
 78 | }
 79 | 
 80 | .token.function-name {
 81 | 	color: #6196cc;
 82 | }
 83 | 
 84 | .token.boolean,
 85 | .token.selector .token.id,
 86 | .token.function {
 87 | 	color: #fdfdfd;
 88 | 	text-shadow: 0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975;
 89 | }
 90 | 
 91 | .token.class-name {
 92 | 	color: #fff5f6;
 93 | 	text-shadow: 0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75;
 94 | }
 95 | 
 96 | .token.constant,
 97 | .token.symbol {
 98 | 	color: #f92aad;
 99 | 	text-shadow: 0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3;
100 | }
101 | 
102 | .token.important,
103 | .token.atrule,
104 | .token.keyword,
105 | .token.selector .token.class,
106 | .token.builtin {
107 | 	color: #f4eee4;
108 | 	text-shadow: 0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575;
109 | }
110 | 
111 | .token.string,
112 | .token.char,
113 | .token.attr-value,
114 | .token.regex,
115 | .token.variable {
116 | 	color: #f87c32;
117 | }
118 | 
119 | .token.operator,
120 | .token.entity,
121 | .token.url {
122 | 	color: #67cdcc;
123 | }
124 | 
125 | .token.important,
126 | .token.bold {
127 | 	font-weight: bold;
128 | }
129 | 
130 | .token.italic {
131 | 	font-style: italic;
132 | }
133 | 
134 | .token.entity {
135 | 	cursor: help;
136 | }
137 | 
138 | .token.inserted {
139 | 	color: green;
140 | }
141 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/vs.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * VS theme by Andrew Lock (https://andrewlock.net)
  3 |  * Inspired by Visual Studio syntax coloring
  4 |  */
  5 | 
  6 | code[class*="language-"],
  7 | pre[class*="language-"] {
  8 | 	color: #393A34;
  9 | 	font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
 10 | 	direction: ltr;
 11 | 	text-align: left;
 12 | 	white-space: pre;
 13 | 	word-spacing: normal;
 14 | 	word-break: normal;
 15 | 	font-size: .9em;
 16 | 	line-height: 1.2em;
 17 | 
 18 | 	-moz-tab-size: 4;
 19 | 	-o-tab-size: 4;
 20 | 	tab-size: 4;
 21 | 
 22 | 	-webkit-hyphens: none;
 23 | 	-moz-hyphens: none;
 24 | 	-ms-hyphens: none;
 25 | 	hyphens: none;
 26 | }
 27 | 
 28 | pre > code[class*="language-"] {
 29 | 	font-size: 1em;
 30 | }
 31 | 
 32 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 33 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
 34 | 	background: #C1DEF1;
 35 | }
 36 | 
 37 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 38 | code[class*="language-"]::selection, code[class*="language-"] ::selection {
 39 | 	background: #C1DEF1;
 40 | }
 41 | 
 42 | /* Code blocks */
 43 | pre[class*="language-"] {
 44 | 	padding: 1em;
 45 | 	margin: .5em 0;
 46 | 	overflow: auto;
 47 | 	border: 1px solid #dddddd;
 48 | 	background-color: white;
 49 | }
 50 | 
 51 | /* Inline code */
 52 | :not(pre) > code[class*="language-"] {
 53 | 	padding: .2em;
 54 | 	padding-top: 1px;
 55 | 	padding-bottom: 1px;
 56 | 	background: #f8f8f8;
 57 | 	border: 1px solid #dddddd;
 58 | }
 59 | 
 60 | .token.comment,
 61 | .token.prolog,
 62 | .token.doctype,
 63 | .token.cdata {
 64 | 	color: #008000;
 65 | 	font-style: italic;
 66 | }
 67 | 
 68 | .token.namespace {
 69 | 	opacity: .7;
 70 | }
 71 | 
 72 | .token.string {
 73 | 	color: #A31515;
 74 | }
 75 | 
 76 | .token.punctuation,
 77 | .token.operator {
 78 | 	color: #393A34; /* no highlight */
 79 | }
 80 | 
 81 | .token.url,
 82 | .token.symbol,
 83 | .token.number,
 84 | .token.boolean,
 85 | .token.variable,
 86 | .token.constant,
 87 | .token.inserted {
 88 | 	color: #36acaa;
 89 | }
 90 | 
 91 | .token.atrule,
 92 | .token.keyword,
 93 | .token.attr-value,
 94 | .language-autohotkey .token.selector,
 95 | .language-json .token.boolean,
 96 | .language-json .token.number,
 97 | code[class*="language-css"] {
 98 | 	color: #0000ff;
 99 | }
100 | 
101 | .token.function {
102 | 	color: #393A34;
103 | }
104 | 
105 | .token.deleted,
106 | .language-autohotkey .token.tag {
107 | 	color: #9a050f;
108 | }
109 | 
110 | .token.selector,
111 | .language-autohotkey .token.keyword {
112 | 	color: #00009f;
113 | }
114 | 
115 | .token.important {
116 | 	color: #e90;
117 | }
118 | 
119 | .token.important,
120 | .token.bold {
121 | 	font-weight: bold;
122 | }
123 | 
124 | .token.italic {
125 | 	font-style: italic;
126 | }
127 | 
128 | .token.class-name,
129 | .language-json .token.property {
130 | 	color: #2B91AF;
131 | }
132 | 
133 | .token.tag,
134 | .token.selector {
135 | 	color: #800000;
136 | }
137 | 
138 | .token.attr-name,
139 | .token.property,
140 | .token.regex,
141 | .token.entity {
142 | 	color: #ff0000;
143 | }
144 | 
145 | .token.directive.tag .tag {
146 | 	background: #ffff00;
147 | 	color: #393A34;
148 | }
149 | 
150 | /* overrides color-values for the Line Numbers plugin
151 |  * http://prismjs.com/plugins/line-numbers/
152 |  */
153 | .line-numbers.line-numbers .line-numbers-rows {
154 | 	border-right-color: #a5a5a5;
155 | }
156 | 
157 | .line-numbers .line-numbers-rows > span:before {
158 | 	color: #2B91AF;
159 | }
160 | 
161 | /* overrides color-values for the Line Highlight plugin
162 | * http://prismjs.com/plugins/line-highlight/
163 | */
164 | .line-highlight.line-highlight {
165 | 	background: rgba(193, 222, 241, 0.2);
166 | 	background: -webkit-linear-gradient(left, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0));
167 | 	background: linear-gradient(to right, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0));
168 | }
169 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/vsc-dark-plus.css:
--------------------------------------------------------------------------------
  1 | pre[class*="language-"],
  2 | code[class*="language-"] {
  3 | 	color: #d4d4d4;
  4 | 	font-size: 13px;
  5 | 	text-shadow: none;
  6 | 	font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;
  7 | 	direction: ltr;
  8 | 	text-align: left;
  9 | 	white-space: pre;
 10 | 	word-spacing: normal;
 11 | 	word-break: normal;
 12 | 	line-height: 1.5;
 13 | 	-moz-tab-size: 4;
 14 | 	-o-tab-size: 4;
 15 | 	tab-size: 4;
 16 | 	-webkit-hyphens: none;
 17 | 	-moz-hyphens: none;
 18 | 	-ms-hyphens: none;
 19 | 	hyphens: none;
 20 | }
 21 | 
 22 | pre[class*="language-"]::selection,
 23 | code[class*="language-"]::selection,
 24 | pre[class*="language-"] *::selection,
 25 | code[class*="language-"] *::selection {
 26 | 	text-shadow: none;
 27 | 	background: #264F78;
 28 | }
 29 | 
 30 | @media print {
 31 | 	pre[class*="language-"],
 32 | 	code[class*="language-"] {
 33 | 		text-shadow: none;
 34 | 	}
 35 | }
 36 | 
 37 | pre[class*="language-"] {
 38 | 	padding: 1em;
 39 | 	margin: .5em 0;
 40 | 	overflow: auto;
 41 | 	background: #1e1e1e;
 42 | }
 43 | 
 44 | :not(pre) > code[class*="language-"] {
 45 | 	padding: .1em .3em;
 46 | 	border-radius: .3em;
 47 | 	color: #db4c69;
 48 | 	background: #1e1e1e;
 49 | }
 50 | /*********************************************************
 51 | * Tokens
 52 | */
 53 | .namespace {
 54 | 	opacity: .7;
 55 | }
 56 | 
 57 | .token.doctype .token.doctype-tag {
 58 | 	color: #569CD6;
 59 | }
 60 | 
 61 | .token.doctype .token.name {
 62 | 	color: #9cdcfe;
 63 | }
 64 | 
 65 | .token.comment,
 66 | .token.prolog {
 67 | 	color: #6a9955;
 68 | }
 69 | 
 70 | .token.punctuation,
 71 | .language-html .language-css .token.punctuation,
 72 | .language-html .language-javascript .token.punctuation {
 73 | 	color: #d4d4d4;
 74 | }
 75 | 
 76 | .token.property,
 77 | .token.tag,
 78 | .token.boolean,
 79 | .token.number,
 80 | .token.constant,
 81 | .token.symbol,
 82 | .token.inserted,
 83 | .token.unit {
 84 | 	color: #b5cea8;
 85 | }
 86 | 
 87 | .token.selector,
 88 | .token.attr-name,
 89 | .token.string,
 90 | .token.char,
 91 | .token.builtin,
 92 | .token.deleted {
 93 | 	color: #ce9178;
 94 | }
 95 | 
 96 | .language-css .token.string.url {
 97 | 	text-decoration: underline;
 98 | }
 99 | 
100 | .token.operator,
101 | .token.entity {
102 | 	color: #d4d4d4;
103 | }
104 | 
105 | .token.operator.arrow {
106 | 	color: #569CD6;
107 | }
108 | 
109 | .token.atrule {
110 | 	color: #ce9178;
111 | }
112 | 
113 | .token.atrule .token.rule {
114 | 	color: #c586c0;
115 | }
116 | 
117 | .token.atrule .token.url {
118 | 	color: #9cdcfe;
119 | }
120 | 
121 | .token.atrule .token.url .token.function {
122 | 	color: #dcdcaa;
123 | }
124 | 
125 | .token.atrule .token.url .token.punctuation {
126 | 	color: #d4d4d4;
127 | }
128 | 
129 | .token.keyword {
130 | 	color: #569CD6;
131 | }
132 | 
133 | .token.keyword.module,
134 | .token.keyword.control-flow {
135 | 	color: #c586c0;
136 | }
137 | 
138 | .token.function,
139 | .token.function .token.maybe-class-name {
140 | 	color: #dcdcaa;
141 | }
142 | 
143 | .token.regex {
144 | 	color: #d16969;
145 | }
146 | 
147 | .token.important {
148 | 	color: #569cd6;
149 | }
150 | 
151 | .token.italic {
152 | 	font-style: italic;
153 | }
154 | 
155 | .token.constant {
156 | 	color: #9cdcfe;
157 | }
158 | 
159 | .token.class-name,
160 | .token.maybe-class-name {
161 | 	color: #4ec9b0;
162 | }
163 | 
164 | .token.console {
165 | 	color: #9cdcfe;
166 | }
167 | 
168 | .token.parameter {
169 | 	color: #9cdcfe;
170 | }
171 | 
172 | .token.interpolation {
173 | 	color: #9cdcfe;
174 | }
175 | 
176 | .token.punctuation.interpolation-punctuation {
177 | 	color: #569cd6;
178 | }
179 | 
180 | .token.boolean {
181 | 	color: #569cd6;
182 | }
183 | 
184 | .token.property,
185 | .token.variable,
186 | .token.imports .token.maybe-class-name,
187 | .token.exports .token.maybe-class-name {
188 | 	color: #9cdcfe;
189 | }
190 | 
191 | .token.selector {
192 | 	color: #d7ba7d;
193 | }
194 | 
195 | .token.escape {
196 | 	color: #d7ba7d;
197 | }
198 | 
199 | .token.tag {
200 | 	color: #569cd6;
201 | }
202 | 
203 | .token.tag .token.punctuation {
204 | 	color: #808080;
205 | }
206 | 
207 | .token.cdata {
208 | 	color: #808080;
209 | }
210 | 
211 | .token.attr-name {
212 | 	color: #9cdcfe;
213 | }
214 | 
215 | .token.attr-value,
216 | .token.attr-value .token.punctuation {
217 | 	color: #ce9178;
218 | }
219 | 
220 | .token.attr-value .token.punctuation.attr-equals {
221 | 	color: #d4d4d4;
222 | }
223 | 
224 | .token.entity {
225 | 	color: #569cd6;
226 | }
227 | 
228 | .token.namespace {
229 | 	color: #4ec9b0;
230 | }
231 | /*********************************************************
232 | * Language Specific
233 | */
234 | 
235 | pre[class*="language-javascript"],
236 | code[class*="language-javascript"],
237 | pre[class*="language-jsx"],
238 | code[class*="language-jsx"],
239 | pre[class*="language-typescript"],
240 | code[class*="language-typescript"],
241 | pre[class*="language-tsx"],
242 | code[class*="language-tsx"] {
243 | 	color: #9cdcfe;
244 | }
245 | 
246 | pre[class*="language-css"],
247 | code[class*="language-css"] {
248 | 	color: #ce9178;
249 | }
250 | 
251 | pre[class*="language-html"],
252 | code[class*="language-html"] {
253 | 	color: #d4d4d4;
254 | }
255 | 
256 | .language-regex .token.anchor {
257 | 	color: #dcdcaa;
258 | }
259 | 
260 | .language-html .token.punctuation {
261 | 	color: #808080;
262 | }
263 | /*********************************************************
264 | * Line highlighting
265 | */
266 | pre[class*="language-"] > code[class*="language-"] {
267 | 	position: relative;
268 | 	z-index: 1;
269 | }
270 | 
271 | .line-highlight.line-highlight {
272 | 	background: #f7ebc6;
273 | 	box-shadow: inset 5px 0 0 #f7d87c;
274 | 	z-index: 0;
275 | }
276 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/xonokai.css:
--------------------------------------------------------------------------------
  1 | /**
  2 | * xonokai theme for JavaScript, CSS and HTML
  3 | * based on: https://github.com/MoOx/sass-prism-theme-base by Maxime Thirouin ~ MoOx --> http://moox.fr/ , which is Loosely based on Monokai textmate theme by http://www.monokai.nl/
  4 | * license: MIT; http://moox.mit-license.org/
  5 | */
  6 | code[class*="language-"],
  7 | pre[class*="language-"] {
  8 | 	-moz-tab-size: 2;
  9 | 	-o-tab-size: 2;
 10 | 	tab-size: 2;
 11 | 	-webkit-hyphens: none;
 12 | 	-moz-hyphens: none;
 13 | 	-ms-hyphens: none;
 14 | 	hyphens: none;
 15 | 	white-space: pre;
 16 | 	white-space: pre-wrap;
 17 | 	word-wrap: normal;
 18 | 	font-family: Menlo, Monaco, "Courier New", monospace;
 19 | 	font-size: 14px;
 20 | 	color: #76d9e6;
 21 | 	text-shadow: none;
 22 | }
 23 | 
 24 | pre > code[class*="language-"] {
 25 | 	font-size: 1em;
 26 | }
 27 | 
 28 | pre[class*="language-"],
 29 | :not(pre) > code[class*="language-"] {
 30 | 	background: #2a2a2a;
 31 | }
 32 | 
 33 | pre[class*="language-"] {
 34 | 	padding: 15px;
 35 | 	border-radius: 4px;
 36 | 	border: 1px solid #e1e1e8;
 37 | 	overflow: auto;
 38 | 	position: relative;
 39 | }
 40 | 
 41 | pre[class*="language-"] code {
 42 | 	white-space: pre;
 43 | 	display: block;
 44 | }
 45 | 
 46 | :not(pre) > code[class*="language-"] {
 47 | 	padding: 0.15em 0.2em 0.05em;
 48 | 	border-radius: .3em;
 49 | 	border: 0.13em solid #7a6652;
 50 | 	box-shadow: 1px 1px 0.3em -0.1em #000 inset;
 51 | }
 52 | 
 53 | .token.namespace {
 54 | 	opacity: .7;
 55 | }
 56 | 
 57 | .token.comment,
 58 | .token.prolog,
 59 | .token.doctype,
 60 | .token.cdata {
 61 | 	color: #6f705e;
 62 | }
 63 | 
 64 | .token.operator,
 65 | .token.boolean,
 66 | .token.number {
 67 | 	color: #a77afe;
 68 | }
 69 | 
 70 | .token.attr-name,
 71 | .token.string {
 72 | 	color: #e6d06c;
 73 | }
 74 | 
 75 | .token.entity,
 76 | .token.url,
 77 | .language-css .token.string,
 78 | .style .token.string {
 79 | 	color: #e6d06c;
 80 | }
 81 | 
 82 | .token.selector,
 83 | .token.inserted {
 84 | 	color: #a6e22d;
 85 | }
 86 | 
 87 | .token.atrule,
 88 | .token.attr-value,
 89 | .token.keyword,
 90 | .token.important,
 91 | .token.deleted {
 92 | 	color: #ef3b7d;
 93 | }
 94 | 
 95 | .token.regex,
 96 | .token.statement {
 97 | 	color: #76d9e6;
 98 | }
 99 | 
100 | .token.placeholder,
101 | .token.variable {
102 | 	color: #fff;
103 | }
104 | 
105 | .token.important,
106 | .token.statement,
107 | .token.bold {
108 | 	font-weight: bold;
109 | }
110 | 
111 | .token.punctuation {
112 | 	color: #bebec5;
113 | }
114 | 
115 | .token.entity {
116 | 	cursor: help;
117 | }
118 | 
119 | .token.italic {
120 | 	font-style: italic;
121 | }
122 | 
123 | code.language-markup {
124 | 	color: #f9f9f9;
125 | }
126 | 
127 | code.language-markup .token.tag {
128 | 	color: #ef3b7d;
129 | }
130 | 
131 | code.language-markup .token.attr-name {
132 | 	color: #a6e22d;
133 | }
134 | 
135 | code.language-markup .token.attr-value {
136 | 	color: #e6d06c;
137 | }
138 | 
139 | code.language-markup .token.style,
140 | code.language-markup .token.script {
141 | 	color: #76d9e6;
142 | }
143 | 
144 | code.language-markup .token.script .token.keyword {
145 | 	color: #76d9e6;
146 | }
147 | 
148 | /* Line highlight plugin */
149 | .line-highlight.line-highlight {
150 | 	padding: 0;
151 | 	background: rgba(255, 255, 255, 0.08);
152 | }
153 | 
154 | .line-highlight.line-highlight:before,
155 | .line-highlight.line-highlight[data-end]:after {
156 | 	padding: 0.2em 0.5em;
157 | 	background-color: rgba(255, 255, 255, 0.4);
158 | 	color: black;
159 | 	height: 1em;
160 | 	line-height: 1em;
161 | 	box-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
162 | }
163 | 


--------------------------------------------------------------------------------
/example/src/prism-themes/z-touch.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * Z-Toch
  3 |  * by Zeel Codder
  4 |  * https://github.com/zeel-codder
  5 |  *
  6 |  */
  7 | code[class*="language-"],
  8 | pre[class*="language-"] {
  9 | 	color: #22da17;
 10 | 	font-family: monospace;
 11 | 	text-align: left;
 12 | 	white-space: pre;
 13 | 	word-spacing: normal;
 14 | 	word-break: normal;
 15 | 	word-wrap: normal;
 16 | 	-moz-tab-size: 4;
 17 | 	-o-tab-size: 4;
 18 | 	tab-size: 4;
 19 | 	-webkit-hyphens: none;
 20 | 	-moz-hyphens: none;
 21 | 	-ms-hyphens: none;
 22 | 	hyphens: none;
 23 | 	line-height: 25px;
 24 | 	font-size: 18px;
 25 | 	margin: 5px 0;
 26 | }
 27 | 
 28 | pre[class*="language-"] * {
 29 | 	font-family: monospace;
 30 | }
 31 | 
 32 | :not(pre) > code[class*="language-"],
 33 | pre[class*="language-"] {
 34 | 	color: white;
 35 | 	background: #0a143c;
 36 | 	padding: 22px;
 37 | }
 38 | 
 39 | /* Code blocks */
 40 | pre[class*="language-"] {
 41 | 	padding: 1em;
 42 | 	margin: 0.5em 0;
 43 | 	overflow: auto;
 44 | }
 45 | 
 46 | pre[class*="language-"]::-moz-selection,
 47 | pre[class*="language-"] ::-moz-selection,
 48 | code[class*="language-"]::-moz-selection,
 49 | code[class*="language-"] ::-moz-selection {
 50 | 	text-shadow: none;
 51 | 	background: rgba(29, 59, 83, 0.99);
 52 | }
 53 | 
 54 | pre[class*="language-"]::selection,
 55 | pre[class*="language-"] ::selection,
 56 | code[class*="language-"]::selection,
 57 | code[class*="language-"] ::selection {
 58 | 	text-shadow: none;
 59 | 	background: rgba(29, 59, 83, 0.99);
 60 | }
 61 | 
 62 | @media print {
 63 | 	code[class*="language-"],
 64 | 	pre[class*="language-"] {
 65 | 		text-shadow: none;
 66 | 	}
 67 | }
 68 | 
 69 | :not(pre) > code[class*="language-"] {
 70 | 	padding: 0.1em;
 71 | 	border-radius: 0.3em;
 72 | 	white-space: normal;
 73 | }
 74 | 
 75 | .token.comment,
 76 | .token.prolog,
 77 | .token.cdata {
 78 | 	color: rgb(99, 119, 119);
 79 | 	font-style: italic;
 80 | }
 81 | 
 82 | .token.punctuation {
 83 | 	color: rgb(199, 146, 234);
 84 | }
 85 | 
 86 | .namespace {
 87 | 	color: rgb(178, 204, 214);
 88 | }
 89 | 
 90 | .token.deleted {
 91 | 	color: rgba(239, 83, 80, 0.56);
 92 | 	font-style: italic;
 93 | }
 94 | 
 95 | .token.symbol,
 96 | .token.property {
 97 | 	color: rgb(128, 203, 196);
 98 | }
 99 | 
100 | .token.tag,
101 | .token.operator,
102 | .token.keyword {
103 | 	color: rgb(127, 219, 202);
104 | }
105 | 
106 | .token.boolean {
107 | 	color: rgb(255, 88, 116);
108 | }
109 | 
110 | .token.number {
111 | 	color: rgb(247, 140, 108);
112 | }
113 | 
114 | .token.constant,
115 | .token.function,
116 | .token.builtin,
117 | .token.char {
118 | 	color: rgb(34 183 199);
119 | }
120 | 
121 | .token.selector,
122 | .token.doctype {
123 | 	color: rgb(199, 146, 234);
124 | 	font-style: italic;
125 | }
126 | 
127 | .token.attr-name,
128 | .token.inserted {
129 | 	color: rgb(173, 219, 103);
130 | 	font-style: italic;
131 | }
132 | 
133 | .token.string,
134 | .token.url,
135 | .token.entity,
136 | .language-css .token.string,
137 | .style .token.string {
138 | 	color: rgb(173, 219, 103);
139 | }
140 | 
141 | .token.class-name,
142 | .token.atrule,
143 | .token.attr-value {
144 | 	color: rgb(255, 203, 139);
145 | }
146 | 
147 | .token.regex,
148 | .token.important,
149 | .token.variable {
150 | 	color: rgb(214, 222, 235);
151 | }
152 | 
153 | .token.important,
154 | .token.bold {
155 | 	font-weight: bold;
156 | }
157 | 
158 | .token.italic {
159 | 	font-style: italic;
160 | }
161 | 


--------------------------------------------------------------------------------
/example/src/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 4 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 |   display: flex;
 9 |   color: white;
10 |   justify-content: center;
11 |   background-color: rgb(32, 32, 32);
12 |   background-repeat: no-repeat;
13 |   height: 100vh;
14 |   color: white;
15 |   width: 100vw;
16 | }
17 | 
18 | code {
19 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
20 |     monospace;
21 | }
22 | 
23 | * {
24 |   box-sizing: border-box;
25 | }
26 | 
27 | #root {
28 |   width: 100vh;
29 | }
30 | 


--------------------------------------------------------------------------------
/example/src/themes/nord-highlight.css:
--------------------------------------------------------------------------------
  1 | pre code.hljs {
  2 |   display: block;
  3 |   overflow-x: auto;
  4 |   padding: 1em;
  5 | }
  6 | code.hljs {
  7 |   padding: 3px 5px;
  8 | }
  9 | .hljs {
 10 |   background: #2e3440;
 11 | }
 12 | .hljs,
 13 | .hljs-subst {
 14 |   color: #d8dee9;
 15 | }
 16 | .hljs-selector-tag {
 17 |   color: #81a1c1;
 18 | }
 19 | .hljs-selector-id {
 20 |   color: #8fbcbb;
 21 |   font-weight: 700;
 22 | }
 23 | .hljs-selector-attr,
 24 | .hljs-selector-class {
 25 |   color: #8fbcbb;
 26 | }
 27 | .hljs-property,
 28 | .hljs-selector-pseudo {
 29 |   color: #88c0d0;
 30 | }
 31 | .hljs-addition {
 32 |   background-color: rgba(163, 190, 140, 0.5);
 33 | }
 34 | .hljs-deletion {
 35 |   background-color: rgba(191, 97, 106, 0.5);
 36 | }
 37 | .hljs-built_in,
 38 | .hljs-class,
 39 | .hljs-type {
 40 |   color: #8fbcbb;
 41 | }
 42 | .hljs-function,
 43 | .hljs-function > .hljs-title,
 44 | .hljs-title.hljs-function {
 45 |   color: #88c0d0;
 46 | }
 47 | .hljs-keyword,
 48 | .hljs-literal,
 49 | .hljs-symbol {
 50 |   color: #81a1c1;
 51 | }
 52 | .hljs-number {
 53 |   color: #b48ead;
 54 | }
 55 | .hljs-regexp {
 56 |   color: #ebcb8b;
 57 | }
 58 | .hljs-string {
 59 |   color: #a3be8c;
 60 | }
 61 | .hljs-title {
 62 |   color: #8fbcbb;
 63 | }
 64 | .hljs-params {
 65 |   color: #d8dee9;
 66 | }
 67 | .hljs-bullet {
 68 |   color: #81a1c1;
 69 | }
 70 | .hljs-code {
 71 |   color: #8fbcbb;
 72 | }
 73 | .hljs-emphasis {
 74 |   font-style: italic;
 75 | }
 76 | .hljs-formula {
 77 |   color: #8fbcbb;
 78 | }
 79 | .hljs-strong {
 80 |   font-weight: 700;
 81 | }
 82 | .hljs-link:hover {
 83 |   text-decoration: underline;
 84 | }
 85 | .hljs-comment,
 86 | .hljs-quote {
 87 |   color: #4c566a;
 88 | }
 89 | .hljs-doctag {
 90 |   color: #8fbcbb;
 91 | }
 92 | .hljs-meta,
 93 | .hljs-meta .hljs-keyword {
 94 |   color: #5e81ac;
 95 | }
 96 | .hljs-meta .hljs-string {
 97 |   color: #a3be8c;
 98 | }
 99 | .hljs-attr {
100 |   color: #8fbcbb;
101 | }
102 | .hljs-attribute {
103 |   color: #d8dee9;
104 | }
105 | .hljs-name {
106 |   color: #81a1c1;
107 | }
108 | .hljs-section {
109 |   color: #88c0d0;
110 | }
111 | .hljs-tag {
112 |   color: #81a1c1;
113 | }
114 | .hljs-template-variable,
115 | .hljs-variable {
116 |   color: #d8dee9;
117 | }
118 | .hljs-template-tag {
119 |   color: #5e81ac;
120 | }
121 | .language-abnf .hljs-attribute {
122 |   color: #88c0d0;
123 | }
124 | .language-abnf .hljs-symbol {
125 |   color: #ebcb8b;
126 | }
127 | .language-apache .hljs-attribute {
128 |   color: #88c0d0;
129 | }
130 | .language-apache .hljs-section {
131 |   color: #81a1c1;
132 | }
133 | .language-arduino .hljs-built_in {
134 |   color: #88c0d0;
135 | }
136 | .language-aspectj .hljs-meta {
137 |   color: #d08770;
138 | }
139 | .language-aspectj > .hljs-title {
140 |   color: #88c0d0;
141 | }
142 | .language-bnf .hljs-attribute {
143 |   color: #8fbcbb;
144 | }
145 | .language-clojure .hljs-name {
146 |   color: #88c0d0;
147 | }
148 | .language-clojure .hljs-symbol {
149 |   color: #ebcb8b;
150 | }
151 | .language-coq .hljs-built_in {
152 |   color: #88c0d0;
153 | }
154 | .language-cpp .hljs-meta .hljs-string {
155 |   color: #8fbcbb;
156 | }
157 | .language-css .hljs-built_in {
158 |   color: #88c0d0;
159 | }
160 | .language-css .hljs-keyword {
161 |   color: #d08770;
162 | }
163 | .language-diff .hljs-meta,
164 | .language-ebnf .hljs-attribute {
165 |   color: #8fbcbb;
166 | }
167 | .language-glsl .hljs-built_in {
168 |   color: #88c0d0;
169 | }
170 | .language-groovy .hljs-meta:not(:first-child),
171 | .language-haxe .hljs-meta,
172 | .language-java .hljs-meta {
173 |   color: #d08770;
174 | }
175 | .language-ldif .hljs-attribute {
176 |   color: #8fbcbb;
177 | }
178 | .language-lisp .hljs-name,
179 | .language-lua .hljs-built_in,
180 | .language-moonscript .hljs-built_in,
181 | .language-nginx .hljs-attribute {
182 |   color: #88c0d0;
183 | }
184 | .language-nginx .hljs-section {
185 |   color: #5e81ac;
186 | }
187 | .language-pf .hljs-built_in,
188 | .language-processing .hljs-built_in {
189 |   color: #88c0d0;
190 | }
191 | .language-scss .hljs-keyword,
192 | .language-stylus .hljs-keyword {
193 |   color: #81a1c1;
194 | }
195 | .language-swift .hljs-meta {
196 |   color: #d08770;
197 | }
198 | .language-vim .hljs-built_in {
199 |   color: #88c0d0;
200 |   font-style: italic;
201 | }
202 | .language-yaml .hljs-meta {
203 |   color: #d08770;
204 | }
205 | 


--------------------------------------------------------------------------------
/example/src/themes/nord-prism.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Nord Theme Originally by Arctic Ice Studio
  3 |  * https://nordtheme.com
  4 |  *
  5 |  * Ported for PrismJS by Zane Hitchcoxc (@zwhitchcox) and Gabriel Ramos (@gabrieluizramos)
  6 |  */
  7 | 
  8 | code[class*='language-'],
  9 | pre[class*='language-'] {
 10 |   color: #f8f8f2;
 11 |   background: none;
 12 |   font-family: 'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono',
 13 |     monospace;
 14 |   text-align: left;
 15 |   white-space: pre;
 16 |   word-spacing: normal;
 17 |   word-break: normal;
 18 |   word-wrap: normal;
 19 |   line-height: 1.5;
 20 |   -moz-tab-size: 4;
 21 |   -o-tab-size: 4;
 22 |   tab-size: 4;
 23 |   -webkit-hyphens: none;
 24 |   -moz-hyphens: none;
 25 |   -ms-hyphens: none;
 26 |   hyphens: none;
 27 | }
 28 | 
 29 | /* Code blocks */
 30 | pre[class*='language-'] {
 31 |   padding: 1em;
 32 |   margin: 0.5em 0;
 33 |   overflow: auto;
 34 |   border-radius: 0.3em;
 35 | }
 36 | 
 37 | :not(pre) > code[class*='language-'],
 38 | pre[class*='language-'] {
 39 |   background: #2e3440;
 40 | }
 41 | 
 42 | /* Inline code */
 43 | :not(pre) > code[class*='language-'] {
 44 |   padding: 0.1em;
 45 |   border-radius: 0.3em;
 46 |   white-space: normal;
 47 | }
 48 | 
 49 | .token.comment,
 50 | .token.prolog,
 51 | .token.doctype,
 52 | .token.cdata {
 53 |   color: #636f88;
 54 | }
 55 | 
 56 | .token.punctuation {
 57 |   color: #81a1c1;
 58 | }
 59 | 
 60 | .namespace {
 61 |   opacity: 0.7;
 62 | }
 63 | 
 64 | .token.property,
 65 | .token.tag,
 66 | .token.constant,
 67 | .token.symbol,
 68 | .token.deleted {
 69 |   color: #81a1c1;
 70 | }
 71 | 
 72 | .token.number {
 73 |   color: #b48ead;
 74 | }
 75 | 
 76 | .token.boolean {
 77 |   color: #81a1c1;
 78 | }
 79 | 
 80 | .token.selector,
 81 | .token.attr-name,
 82 | .token.string,
 83 | .token.char,
 84 | .token.builtin,
 85 | .token.inserted {
 86 |   color: #a3be8c;
 87 | }
 88 | 
 89 | .token.operator,
 90 | .token.entity,
 91 | .token.url,
 92 | .language-css .token.string,
 93 | .style .token.string,
 94 | .token.variable {
 95 |   color: #81a1c1;
 96 | }
 97 | 
 98 | .token.atrule,
 99 | .token.attr-value,
100 | .token.function,
101 | .token.class-name {
102 |   color: #88c0d0;
103 | }
104 | 
105 | .token.keyword {
106 |   color: #81a1c1;
107 | }
108 | 
109 | .token.regex,
110 | .token.important {
111 |   color: #ebcb8b;
112 | }
113 | 
114 | .token.important,
115 | .token.bold {
116 |   font-weight: bold;
117 | }
118 | 
119 | .token.italic {
120 |   font-style: italic;
121 | }
122 | 
123 | .token.entity {
124 |   cursor: help;
125 | }
126 | 


--------------------------------------------------------------------------------
/example/src/utils.ts:
--------------------------------------------------------------------------------
  1 | // Credit to: WebCoder49 for the below code
  2 | // https://github.com/WebCoder49/code-input/blob/main/plugins/indent.js
  3 | export function handleTabKey(
  4 |   event: KeyboardEvent,
  5 |   input_element: HTMLTextAreaElement,
  6 |   code: string,
  7 | ) {
  8 |   event.preventDefault();
  9 |   if (
 10 |     !event.shiftKey &&
 11 |     input_element.selectionStart === input_element.selectionEnd
 12 |   ) {
 13 |     const before_selection = code.slice(0, input_element.selectionStart);
 14 |     const after_selection = code.slice(input_element.selectionEnd);
 15 |     const cursor_pos = input_element.selectionEnd + 1;
 16 |     const tab = '\t';
 17 |     input_element.value = before_selection + tab + after_selection;
 18 |     input_element.selectionStart = cursor_pos;
 19 |     input_element.selectionEnd = cursor_pos;
 20 |   } else {
 21 |     let lines = input_element.value.split('\n');
 22 |     let letter_i = 0;
 23 | 
 24 |     let selection_start = input_element.selectionStart; // where cursor moves after tab - moving forward by 1 indent
 25 |     let selection_end = input_element.selectionEnd; // where cursor moves after tab - moving forward by 1 indent
 26 | 
 27 |     let number_indents = 0;
 28 |     let first_line_indents = 0;
 29 | 
 30 |     for (let i = 0; i < lines.length; i++) {
 31 |       letter_i += lines[i].length + 1; // newline counted
 32 | 
 33 |       if (
 34 |         input_element.selectionStart <= letter_i &&
 35 |         input_element.selectionEnd >= letter_i - lines[i].length
 36 |       ) {
 37 |         // Starts before or at last char and ends after or at first char
 38 |         if (event.shiftKey) {
 39 |           if (lines[i][0] == '\t') {
 40 |             // Remove first tab
 41 |             lines[i] = lines[i].slice(1);
 42 |             if (number_indents == 0) first_line_indents--;
 43 |             number_indents--;
 44 |           }
 45 |         } else {
 46 |           lines[i] = '\t' + lines[i];
 47 |           if (number_indents == 0) first_line_indents++;
 48 |           number_indents++;
 49 |         }
 50 |       }
 51 |     }
 52 |     input_element.value = lines.join('\n');
 53 |     input_element.selectionStart = selection_start + first_line_indents;
 54 |     input_element.selectionEnd = selection_end + number_indents;
 55 |   }
 56 | }
 57 | 
 58 | export function handleEnterKey(
 59 |   event: KeyboardEvent,
 60 |   input_element: HTMLTextAreaElement,
 61 | ) {
 62 |   event.preventDefault();
 63 |   let lines = input_element.value.split('\n');
 64 |   let letter_i = 0;
 65 |   let current_line = lines.length - 1;
 66 |   let new_line = '';
 67 |   let number_indents = 0;
 68 | 
 69 |   // find the index of the line our cursor is currently on
 70 |   for (let i = 0; i < lines.length; i++) {
 71 |     letter_i += lines[i].length + 1; // newline counted
 72 |     if (input_element.selectionStart <= letter_i) {
 73 |       current_line = i;
 74 |       break;
 75 |     }
 76 |   }
 77 | 
 78 |   // count the number of indents the current line starts with (up to our cursor position in the line)
 79 |   let cursor_pos_in_line =
 80 |     lines[current_line].length - (letter_i - input_element.selectionEnd) + 1;
 81 |   for (let i = 0; i < cursor_pos_in_line; i++) {
 82 |     if (lines[current_line][i] == '\t') {
 83 |       number_indents++;
 84 |     } else {
 85 |       break;
 86 |     }
 87 |   }
 88 | 
 89 |   // determine the text before and after the cursor and chop the current line at the new line break
 90 |   let text_after_cursor = '';
 91 |   if (cursor_pos_in_line != lines[current_line].length) {
 92 |     text_after_cursor = lines[current_line].substring(cursor_pos_in_line);
 93 |     lines[current_line] = lines[current_line].substring(0, cursor_pos_in_line);
 94 |   }
 95 | 
 96 |   // insert our indents and any text from the previous line that might have been after the line break
 97 |   for (let i = 0; i < number_indents; i++) {
 98 |     new_line += '\t';
 99 |   }
100 |   new_line += text_after_cursor;
101 | 
102 |   // save the current cursor position
103 |   let selection_start = input_element.selectionStart;
104 |   let selection_end = input_element.selectionEnd;
105 | 
106 |   // splice our new line into the list of existing lines and join them all back up
107 |   lines.splice(current_line + 1, 0, new_line);
108 |   input_element.value = lines.join('\n');
109 | 
110 |   // move cursor to new position
111 |   input_element.selectionStart = selection_start + number_indents + 1; // count the indent level and the newline character
112 |   input_element.selectionEnd = selection_end + number_indents + 1;
113 | }
114 | 


--------------------------------------------------------------------------------
/example/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "useDefineForClassFields": true,
 5 |     "module": "ESNext",
 6 |     "lib": ["ESNext", "DOM"],
 7 |     "moduleResolution": "Node",
 8 |     "strict": true,
 9 |     "sourceMap": true,
10 |     "resolveJsonModule": true,
11 |     "isolatedModules": true,
12 |     "esModuleInterop": true,
13 |     "noEmit": true,
14 |     "noUnusedLocals": true,
15 |     "noUnusedParameters": true,
16 |     "noImplicitReturns": true,
17 |     "skipLibCheck": true,
18 |     "jsx": "preserve",
19 |     "jsxImportSource": "solid-js"
20 |   },
21 |   "include": ["src", "example", "../dist"]
22 | }
23 | 


--------------------------------------------------------------------------------
/example/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "composite": true,
4 |     "module": "esnext",
5 |     "moduleResolution": "node"
6 |   },
7 |   "include": ["vite.config.ts"]
8 | }
9 | 


--------------------------------------------------------------------------------
/example/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite';
2 | import dts from 'vite-plugin-dts';
3 | import solid from 'vite-plugin-solid';
4 | 
5 | // https://vitejs.dev/config/
6 | export default defineConfig({
7 |   plugins: [solid(), dts()],
8 | });
9 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@srsholmes/solid-code-input",
 3 |   "version": "0.0.18",
 4 |   "description": "Simple Code Input with syntax highlighting for SolidJS",
 5 |   "main": "dist/cjs/index.js",
 6 |   "module": "dist/esm/index.js",
 7 |   "types": "dist/types/index.d.ts",
 8 |   "repository": {
 9 |     "type": "git",
10 |     "url": "git+https://github.com/srsholmes/solid-code-input.git"
11 |   },
12 |   "publishConfig": {
13 |     "access": "public",
14 |     "registry": "https://registry.npmjs.org/"
15 |   },
16 |   "exports": {
17 |     ".": {
18 |       "solid": "./dist/source/index.jsx",
19 |       "import": "./dist/esm/index.js",
20 |       "browser": "./dist/esm/index.js",
21 |       "require": "./dist/cjs/index.js",
22 |       "node": "./dist/cjs/index.js"
23 |     }
24 |   },
25 |   "files": [
26 |     "dist",
27 |     "src"
28 |   ],
29 |   "keywords": [
30 |     "solidjs",
31 |     "solid",
32 |     "code",
33 |     "input",
34 |     "highlight",
35 |     "prismjs",
36 |     "highlightjs"
37 |   ],
38 |   "author": "Simon Holmes",
39 |   "license": "MIT",
40 |   "bugs": {
41 |     "url": "https://github.com/srsholmes/solid-code-input/issues"
42 |   },
43 |   "sideEffects": false,
44 |   "scripts": {
45 |     "build": "rollup -c && node scripts/copy.js",
46 |     "dev:local": "rollup -c --watch",
47 |     "minify": "terser --compress --mangle --module -- dist/cjs/index.js > dist/cjs/index.min.js",
48 |     "format": "prettier --write src example"
49 |   },
50 |   "homepage": "https://github.com/srsholmes/solid-code-input#readme",
51 |   "dependencies": {},
52 |   "peerDependencies": {
53 |     "solid-js": "^1.6.10",
54 |     "@types/highlight.js": "9.12.2",
55 |     "@types/prismjs": "1.26.0"
56 |   },
57 |   "devDependencies": {
58 |     "postcss": "8.4.21",
59 |     "rollup-plugin-postcss": "4.0.2",
60 |     "@rollup/plugin-babel": "^6.0.0",
61 |     "@types/node": "^18.7.16",
62 |     "prettier": "^2.7.1",
63 |     "rollup": "^2.75.7",
64 |     "rollup-plugin-terser": "^7.0.2",
65 |     "rollup-preset-solid": "^1.4.0",
66 |     "solid-js": "^1.6.10",
67 |     "terser": "^5.14.1",
68 |     "typescript": "^4.9.5"
69 |   },
70 |   "prettier": {
71 |     "singleQuote": true,
72 |     "trailingComma": "all"
73 |   }
74 | }
75 | 


--------------------------------------------------------------------------------
/resources/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/srsholmes/solid-code-input/b8ece72ebdec0a6d346846a874a337ead90b6767/resources/demo.gif


--------------------------------------------------------------------------------
/resources/demo.mkv:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/srsholmes/solid-code-input/b8ece72ebdec0a6d346846a874a337ead90b6767/resources/demo.mkv


--------------------------------------------------------------------------------
/resources/example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/srsholmes/solid-code-input/b8ece72ebdec0a6d346846a874a337ead90b6767/resources/example.png


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import withSolid from 'rollup-preset-solid';
 2 | import postcss from 'rollup-plugin-postcss';
 3 | 
 4 | export default withSolid({
 5 |   targets: ['esm', 'cjs'],
 6 |   input: 'src/index.tsx',
 7 |   plugins: [
 8 |     postcss({
 9 |       include: ['**/*.module.css', '**/*.scss'],
10 |       // extract: 'dist/source/components/CodeInput/styles.module.css',
11 |       // extract: false,
12 |       modules: true,
13 |     }),
14 |   ],
15 | });
16 | 


--------------------------------------------------------------------------------
/scripts/copy.js:
--------------------------------------------------------------------------------
 1 | // copy the file at src/components/CodeInput/styles.module.css
 2 | // to dist/source/components/CodeInput/styles.module.css
 3 | 
 4 | // Path: scripts/copy.js
 5 | 
 6 | function copyCSSModuleFile() {
 7 |   const fs = require('fs');
 8 |   const path = require('path');
 9 |   const cssModuleFile = path.resolve(
10 |     __dirname,
11 |     '../src/components/CodeInput/styles.module.css',
12 |   );
13 |   const distCSSModuleFile = path.resolve(
14 |     __dirname,
15 |     '../dist/source/components/CodeInput/styles.module.css',
16 |   );
17 |   fs.copyFile(cssModuleFile, distCSSModuleFile, (err) => {
18 |     if (err) throw err;
19 |     console.log('CSS Module file was copied to dist');
20 |   });
21 | }
22 | 
23 | copyCSSModuleFile();
24 | 


--------------------------------------------------------------------------------
/src/components/CodeInput/CodeInput.tsx:
--------------------------------------------------------------------------------
  1 | import { Component, createSignal, mergeProps, onMount } from 'solid-js';
  2 | import { CodeInputProps } from '../../types';
  3 | import { handleEnterKey, handleTabKey } from '../../utils';
  4 | import styles from './styles.module.css';
  5 | 
  6 | export const CodeInput: Component<CodeInputProps> = (props) => {
  7 |   const merged = mergeProps({ autoHeight: true }, props);
  8 | 
  9 |   const language = () => merged.language || 'typescript';
 10 |   const value = () => merged.value || '';
 11 | 
 12 |   let preElement: HTMLPreElement;
 13 |   let textAreaElement: HTMLTextAreaElement;
 14 |   let wrapperElement: HTMLDivElement;
 15 |   let outerElement: HTMLDivElement;
 16 | 
 17 |   // Used to detect when the user manually resizes the wrapper with handle
 18 |   let wrapperHeight: number;
 19 |   let wrapperWidth: number;
 20 | 
 21 |   const [manualResize, setManualResize] = createSignal(false);
 22 | 
 23 |   onMount(async () => {
 24 |     watchResize();
 25 |     if (props.autoHeight) {
 26 |       autoHeight();
 27 |     }
 28 |     setBackgroundWrapper();
 29 |   });
 30 | 
 31 |   function setBackgroundWrapper() {
 32 |     const preBackground = window.getComputedStyle(preElement).backgroundColor;
 33 |     outerElement.style.backgroundColor = preBackground;
 34 |   }
 35 | 
 36 |   function setSizes() {
 37 |     const { height, width } = getTextareaSize();
 38 |     preElement.style.width = `${width}px`;
 39 |     preElement.style.height = `${height}px`;
 40 |     wrapperElement.style.width = `${width}px`;
 41 |     wrapperElement.style.height = `${height}px`;
 42 | 
 43 |     // calculate what 1rem is in pixels
 44 |     const rem = parseFloat(
 45 |       window.getComputedStyle(document.documentElement).fontSize,
 46 |     );
 47 |     outerElement.style.width = `${width + rem}px`;
 48 |     outerElement.style.height = `${height + rem}px`;
 49 |   }
 50 | 
 51 |   function getTextareaSize() {
 52 |     const { height, width } = textAreaElement.getBoundingClientRect();
 53 |     return { height, width };
 54 |   }
 55 | 
 56 |   function autoHeight() {
 57 |     if (manualResize() === true) {
 58 |       return;
 59 |     }
 60 |     wrapperElement.style.height = `0px`;
 61 |     wrapperElement.style.height = textAreaElement.scrollHeight + 'px';
 62 |   }
 63 | 
 64 |   function watchResize() {
 65 |     new ResizeObserver(setSizes).observe(textAreaElement);
 66 |   }
 67 | 
 68 |   function syncScroll() {
 69 |     preElement.scrollTop = textAreaElement.scrollTop;
 70 |     preElement.scrollLeft = textAreaElement.scrollLeft;
 71 |     // Prevents a scrolling issue when the user manually resizes the wrapper
 72 |     if (textAreaElement.scrollTop > preElement.scrollTop) {
 73 |       textAreaElement.scrollTop = preElement.scrollTop;
 74 |     }
 75 |     if (textAreaElement.scrollLeft > preElement.scrollLeft) {
 76 |       textAreaElement.scrollLeft = preElement.scrollLeft;
 77 |     }
 78 |   }
 79 | 
 80 |   const codeTokens = () => {
 81 |     try {
 82 |       if (merged.prismJS) {
 83 |         if (merged.prismJS.languages[language()]) {
 84 |           if (merged.autoHeight) {
 85 |             autoHeight();
 86 |           }
 87 |           const tokens = merged.prismJS.highlight(
 88 |             value(),
 89 |             merged.prismJS.languages[language()],
 90 |             language(),
 91 |           );
 92 |           return tokens;
 93 |         } else {
 94 |           if (merged.autoHeight) {
 95 |             autoHeight();
 96 |           }
 97 |           return merged.prismJS.util.encode(value()).toString();
 98 |         }
 99 |       } else if (merged.highlightjs) {
100 |         const tokens = merged.highlightjs.highlight(value(), {
101 |           language: language(),
102 |         }).value;
103 |         if (merged.autoHeight) {
104 |           autoHeight();
105 |         }
106 |         return tokens;
107 |       }
108 |     } catch (e) {
109 |       console.error(e);
110 |     }
111 |   };
112 | 
113 |   function handleKeyDown(event: KeyboardEvent) {
114 |     let input_element = textAreaElement;
115 |     let code = input_element.value;
116 |     if (event.key === 'Tab') {
117 |       handleTabKey(event, input_element, code);
118 |       merged.onChange(input_element.value);
119 |     }
120 |     if (event.key === 'Enter') {
121 |       handleEnterKey(event, input_element);
122 |       merged.onChange(input_element.value);
123 |     }
124 |   }
125 | 
126 |   async function handleInput(e: Event) {
127 |     merged.onChange((e.target as HTMLTextAreaElement).value);
128 |   }
129 | 
130 |   function handleMouseDown() {
131 |     const { height, width } = getTextareaSize();
132 |     wrapperHeight = height;
133 |     wrapperWidth = width;
134 |   }
135 | 
136 |   function handleMouseUp() {
137 |     const { height, width } = getTextareaSize();
138 |     if (height !== wrapperHeight || width !== wrapperWidth) {
139 |       setManualResize(true);
140 |     }
141 |   }
142 | 
143 |   return (
144 |     <div
145 |       ref={outerElement!}
146 |       style={`padding: 1rem; box-sizing: border-box;`}
147 |       class={styles['outer-wrapper']}
148 |     >
149 |       <div
150 |         onMouseDown={handleMouseDown}
151 |         onMouseUp={handleMouseUp}
152 |         ref={wrapperElement!}
153 |         class={styles.wrap}
154 |       >
155 |         <textarea
156 |           class={`${merged.resize ? styles[`resize-${merged.resize}`] : ''}`}
157 |           spellcheck={false}
158 |           onKeyDown={handleKeyDown}
159 |           onInput={handleInput}
160 |           onScroll={syncScroll}
161 |           ref={textAreaElement!}
162 |           placeholder={merged.placeholder || 'Type code here...'}
163 |           value={value()}
164 |         ></textarea>
165 |         <pre
166 |           ref={preElement!}
167 |           class={`language-${language()}`}
168 |           aria-hidden={true}
169 |         >
170 |           <div innerHTML={codeTokens()} class="code-highlighted"></div>
171 |         </pre>
172 |       </div>
173 |     </div>
174 |   );
175 | };
176 | 
177 | export default CodeInput;
178 | 


--------------------------------------------------------------------------------
/src/components/CodeInput/styles.module.css:
--------------------------------------------------------------------------------
 1 | /* Original CSS written by Oliver Geer (WebCoder49) */
 2 | /* https://css-tricks.com/creating-an-editable-textarea-that-supports-syntax-highlighted-code/ */
 3 | /* Updated for solid-code-input */
 4 | 
 5 | .outer-wrapper * {
 6 |   box-sizing: border-box;
 7 | }
 8 | 
 9 | .wrap {
10 |   position: relative;
11 |   display: block;
12 |   min-height: 60px;
13 |   box-sizing: border-box;
14 |   position: relative;
15 |   top: 0;
16 |   left: 0;
17 |   display: block;
18 |   overflow: hidden;
19 |   min-height: 76px;
20 |   font-size: 16px;
21 |   font-family: monospace;
22 |   line-height: normal;
23 |   tab-size: 2;
24 |   caret-color: darkgrey;
25 |   white-space: pre;
26 | }
27 | 
28 | .wrap textarea,
29 | .wrap pre {
30 |   width: 100%;
31 |   height: 100%;
32 |   border: none;
33 |   overflow: auto;
34 |   outline: none;
35 |   position: absolute;
36 |   top: 0;
37 |   left: 0;
38 |   font-family: monospace;
39 |   font-size: inherit !important;
40 |   line-height: inherit !important;
41 |   background: transparent;
42 |   padding: 0 !important;
43 |   margin: 0 !important;
44 | }
45 | 
46 | .wrap textarea,
47 | .wrap pre,
48 | .wrap pre * {
49 |   font-size: inherit !important;
50 |   font-family: inherit !important;
51 |   line-height: inherit !important;
52 |   tab-size: inherit !important;
53 | }
54 | 
55 | .wrap textarea {
56 |   display: block;
57 |   color: transparent;
58 |   background: transparent;
59 |   caret-color: inherit !important;
60 |   z-index: 1;
61 | }
62 | 
63 | .wrap pre::-webkit-scrollbar {
64 |   width: 0;
65 |   height: 0;
66 | }
67 | 
68 | .wrap pre {
69 |   z-index: 0;
70 | }
71 | 
72 | .wrap textarea,
73 | .wrap pre {
74 |   overflow: auto !important;
75 |   white-space: inherit;
76 |   word-spacing: normal;
77 |   word-break: normal;
78 |   word-wrap: normal;
79 | }
80 | 
81 | .wrap textarea.resize-both {
82 |   resize: both;
83 | }
84 | 
85 | .wrap textarea.resize-none {
86 |   resize: none;
87 | }
88 | 
89 | .wrap textarea.resize-horizontal {
90 |   resize: horizontal;
91 | }
92 | 
93 | .wrap textarea.resize-vertical {
94 |   resize: vertical;
95 | }
96 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | export * from './types';
2 | import { CodeInput } from './components/CodeInput/CodeInput';
3 | export { CodeInput };
4 | 


--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
 1 | import highlightjs from 'highlight.js';
 2 | import Prism from 'prismjs';
 3 | 
 4 | export type CodeInputProps = {
 5 |   prismJS?: typeof Prism;
 6 |   highlightjs?: typeof highlightjs;
 7 |   value: string;
 8 |   language: string;
 9 |   onChange: (value: string) => void;
10 |   placeholder?: string;
11 |   resize?: 'none' | 'both' | 'horizontal' | 'vertical';
12 |   autoHeight?: boolean;
13 | };
14 | 


--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
  1 | /* Original Code written by Oliver Geer (WebCoder49) */
  2 | // https://github.com/WebCoder49/code-input/blob/main/plugins/indent.js
  3 | 
  4 | export function handleTabKey(
  5 |   event: KeyboardEvent,
  6 |   input_element: HTMLTextAreaElement,
  7 |   code: string,
  8 | ) {
  9 |   event.preventDefault(); // stop normal
 10 | 
 11 |   if (
 12 |     !event.shiftKey &&
 13 |     input_element.selectionStart == input_element.selectionEnd
 14 |   ) {
 15 |     // Shift always means dedent - this places a tab here.
 16 |     let before_selection = code.slice(0, input_element.selectionStart); // text before tab
 17 |     let after_selection = code.slice(
 18 |       input_element.selectionEnd,
 19 |       input_element.value.length,
 20 |     ); // text after tab
 21 | 
 22 |     let cursor_pos = input_element.selectionEnd + 1; // where cursor moves after tab - moving forward by 1 char to after tab
 23 |     input_element.value = before_selection + '\t' + after_selection; // add tab char
 24 | 
 25 |     // move cursor
 26 |     input_element.selectionStart = cursor_pos;
 27 |     input_element.selectionEnd = cursor_pos;
 28 |   } else {
 29 |     let lines = input_element.value.split('\n');
 30 |     let letter_i = 0;
 31 | 
 32 |     let selection_start = input_element.selectionStart; // where cursor moves after tab - moving forward by 1 indent
 33 |     let selection_end = input_element.selectionEnd; // where cursor moves after tab - moving forward by 1 indent
 34 | 
 35 |     let number_indents = 0;
 36 |     let first_line_indents = 0;
 37 | 
 38 |     for (let i = 0; i < lines.length; i++) {
 39 |       letter_i += lines[i].length + 1; // newline counted
 40 |       if (
 41 |         input_element.selectionStart <= letter_i &&
 42 |         input_element.selectionEnd >= letter_i - lines[i].length
 43 |       ) {
 44 |         // Starts before or at last char and ends after or at first char
 45 |         if (event.shiftKey) {
 46 |           if (lines[i][0] == '\t') {
 47 |             // Remove first tab
 48 |             lines[i] = lines[i].slice(1);
 49 |             if (number_indents == 0) first_line_indents--;
 50 |             number_indents--;
 51 |           }
 52 |         } else {
 53 |           lines[i] = '\t' + lines[i];
 54 |           if (number_indents == 0) first_line_indents++;
 55 |           number_indents++;
 56 |         }
 57 |       }
 58 |     }
 59 |     input_element.value = lines.join('\n');
 60 | 
 61 |     // move cursor
 62 |     input_element.selectionStart = selection_start + first_line_indents;
 63 |     input_element.selectionEnd = selection_end + number_indents;
 64 |   }
 65 | }
 66 | 
 67 | export function handleEnterKey(
 68 |   event: KeyboardEvent,
 69 |   input_element: HTMLTextAreaElement,
 70 | ) {
 71 |   event.preventDefault();
 72 |   let lines = input_element.value.split('\n');
 73 |   let letter_i = 0;
 74 |   let current_line = lines.length - 1;
 75 |   let new_line = '';
 76 |   let number_indents = 0;
 77 | 
 78 |   // find the index of the line our cursor is currently on
 79 |   for (let i = 0; i < lines.length; i++) {
 80 |     letter_i += lines[i].length + 1; // newline counted
 81 |     if (input_element.selectionStart <= letter_i) {
 82 |       current_line = i;
 83 |       break;
 84 |     }
 85 |   }
 86 | 
 87 |   // count the number of indents the current line starts with (up to our cursor position in the line)
 88 |   let cursor_pos_in_line =
 89 |     lines[current_line].length - (letter_i - input_element.selectionEnd) + 1;
 90 |   for (let i = 0; i < cursor_pos_in_line; i++) {
 91 |     if (lines[current_line][i] == '\t') {
 92 |       number_indents++;
 93 |     } else {
 94 |       break;
 95 |     }
 96 |   }
 97 | 
 98 |   // determine the text before and after the cursor and chop the current line at the new line break
 99 |   let text_after_cursor = '';
100 |   if (cursor_pos_in_line != lines[current_line].length) {
101 |     text_after_cursor = lines[current_line].substring(cursor_pos_in_line);
102 |     lines[current_line] = lines[current_line].substring(0, cursor_pos_in_line);
103 |   }
104 | 
105 |   // insert our indents and any text from the previous line that might have been after the line break
106 |   for (let i = 0; i < number_indents; i++) {
107 |     new_line += '\t';
108 |   }
109 |   new_line += text_after_cursor;
110 | 
111 |   // save the current cursor position
112 |   let selection_start = input_element.selectionStart;
113 |   let selection_end = input_element.selectionEnd;
114 | 
115 |   // splice our new line into the list of existing lines and join them all back up
116 |   lines.splice(current_line + 1, 0, new_line);
117 |   input_element.value = lines.join('\n');
118 | 
119 |   // move cursor to new position
120 |   input_element.selectionStart = selection_start + number_indents + 1; // count the indent level and the newline character
121 |   input_element.selectionEnd = selection_end + number_indents + 1;
122 | }
123 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "useDefineForClassFields": true,
 5 |     "module": "ESNext",
 6 |     "lib": ["ESNext", "DOM"],
 7 |     "moduleResolution": "Node",
 8 |     "strict": true,
 9 |     "sourceMap": true,
10 |     "resolveJsonModule": true,
11 |     "isolatedModules": true,
12 |     "esModuleInterop": true,
13 |     "noEmit": true,
14 |     "noUnusedLocals": true,
15 |     "noUnusedParameters": true,
16 |     "noImplicitReturns": true,
17 |     "skipLibCheck": true,
18 |     "jsx": "preserve",
19 |     "jsxImportSource": "solid-js"
20 |   },
21 |   "include": ["src", "example"]
22 | }
23 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "composite": true,
4 |     "module": "esnext",
5 |     "moduleResolution": "node"
6 |   },
7 |   "include": ["vite.config.ts"]
8 | }


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