├── .editorconfig ├── .github ├── FUNDING.yml └── workflows │ ├── build-release.yml │ ├── deploy.yml │ └── pr-checks.yml ├── .gitignore ├── .prettierignore ├── .prettierrc ├── .tool-versions ├── .vscode └── launch.json ├── .vscodeignore ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── code-examples ├── .c ├── .cs ├── .css ├── .go ├── .html ├── .java ├── .js ├── .psm1 ├── .py ├── .sh └── .ts ├── eslint.config.mjs ├── images ├── icon.png ├── icon.svg └── screenshots.jpg ├── package-lock.json ├── package.json ├── release.config.mjs ├── src ├── colors │ ├── base.ts │ ├── extensions │ │ ├── gitlens.ts │ │ └── jupyter-notebook.ts │ └── types.ts ├── main.ts ├── semantic-colors.ts ├── shared.ts └── token-colors │ ├── base.ts │ ├── languages │ ├── c.ts │ ├── css.ts │ ├── cucumber.ts │ ├── golang.ts │ ├── java.ts │ ├── js-ts.ts │ ├── json.ts │ ├── latex.ts │ ├── lisp.ts │ ├── makefile.ts │ ├── mark-up-down.ts │ ├── powershell.ts │ ├── python.ts │ ├── reason-ml.ts │ ├── shell.ts │ └── xml-html.ts │ └── types.ts ├── themes └── .gitignore └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: jdinhify # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: jdinhify # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 12 | polar: # Replace with a single Polar username 13 | buy_me_a_coffee: # Replace with a single Buy Me a Coffee username 14 | thanks_dev: # Replace with a single thanks.dev username 15 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 16 | -------------------------------------------------------------------------------- /.github/workflows/build-release.yml: -------------------------------------------------------------------------------- 1 | name: build & release 2 | 3 | on: 4 | push: 5 | branches: [main] 6 | 7 | jobs: 8 | build-release: 9 | runs-on: ubuntu-latest 10 | 11 | steps: 12 | - uses: actions/checkout@v4 13 | - uses: actions/setup-node@v4 14 | with: 15 | node-version: 22.14.0 16 | - uses: actions/cache@v4 17 | with: 18 | path: | 19 | ~/.npm 20 | key: ${{ runner.os }}-${{ hashFiles('**/package-lock.json') }} 21 | 22 | - run: npm ci 23 | 24 | - run: npm run build 25 | 26 | - name: release 27 | env: 28 | GH_TOKEN: ${{ secrets.GH_TOKEN }} 29 | run: npx semantic-release 30 | -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: deploy 2 | 3 | on: 4 | release: 5 | types: [published] 6 | 7 | jobs: 8 | build-deploy: 9 | runs-on: ubuntu-latest 10 | 11 | steps: 12 | - uses: actions/checkout@v4 13 | - uses: actions/setup-node@v4 14 | with: 15 | node-version: 22.14.0 16 | - uses: actions/cache@v4 17 | with: 18 | path: | 19 | ~/.npm 20 | key: ${{ runner.os }}-${{ hashFiles('**/package-lock.json') }} 21 | 22 | - run: npm ci 23 | 24 | - name: publish to vscode marketplace & open-vsx 25 | env: 26 | GH_TOKEN: ${{ secrets.GH_TOKEN }} 27 | VSCE_TOKEN: ${{ secrets.VSCE_TOKEN }} 28 | OVSX_TOKEN: ${{ secrets.OVSX_TOKEN }} 29 | run: | 30 | echo "--- build theme json files" 31 | npm run build 32 | 33 | echo "--- generate changelog.md from github releases" 34 | gh api /repos/{owner}/{repo}/releases --jq '.[] | .body' > changelog.md 35 | 36 | echo "--- publish" 37 | version=$(gh release view --json tagName --jq '.tagName | .[1:]') 38 | echo "version: $version" 39 | git config user.email "14046273+jdinhify@users.noreply.github.com" 40 | git config user.name "jd" 41 | npx vsce publish -p $VSCE_TOKEN --no-git-tag-version $version 42 | npx ovsx publish -p $OVSX_TOKEN --packageVersion $version 43 | -------------------------------------------------------------------------------- /.github/workflows/pr-checks.yml: -------------------------------------------------------------------------------- 1 | name: pr-checks 2 | 3 | on: 4 | pull_request: 5 | 6 | jobs: 7 | pr-checks: 8 | runs-on: ubuntu-latest 9 | 10 | steps: 11 | - uses: actions/checkout@v4 12 | - uses: actions/setup-node@v4 13 | with: 14 | node-version: 22.14.0 15 | - uses: actions/cache@v4 16 | with: 17 | path: | 18 | ~/.npm 19 | key: ${{ runner.os }}-${{ hashFiles('**/package-lock.json') }} 20 | 21 | - run: npm ci 22 | 23 | - name: typecheck 24 | run: npm run type:check 25 | - name: lint 26 | run: npm run lint:check 27 | - name: format check 28 | run: npm run format:check 29 | - name: build check 30 | run: npm run build 31 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # Ignore artifacts: 2 | build 3 | coverage 4 | 5 | CHANGELOG.md 6 | .vscode 7 | themes 8 | package.json 9 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "tabWidth": 2 4 | } 5 | -------------------------------------------------------------------------------- /.tool-versions: -------------------------------------------------------------------------------- 1 | nodejs 22.14.0 2 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | // A launch configuration that launches the extension inside a new window 2 | { 3 | "version": "0.1.0", 4 | "configurations": [ 5 | { 6 | "name": "Launch Extension", 7 | "type": "extensionHost", 8 | "request": "launch", 9 | "internalConsoleOptions": "openOnFirstSessionStart", 10 | "stopOnEntry": false, 11 | "runtimeExecutable": "${execPath}", 12 | "args": ["--extensionDevelopmentPath=${workspaceRoot}" ] 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /.vscodeignore: -------------------------------------------------------------------------------- 1 | * 2 | src 3 | code-examples 4 | .github 5 | .vscode 6 | node_modules 7 | 8 | !package.json 9 | !LICENSE 10 | !images 11 | !README.md 12 | !changelog.md 13 | !themes 14 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## How to contribute 2 | 3 | 1. Fork and clone this repo. 4 | 2. Create a branch for your changes. `git switch -c my-new-feature` 5 | 3. Install nodejs, see [.tool-versions](.tool-versions) for the exact version, 6 | 4. Install dependencies. `npm install` 7 | 5. Open the cloned folder in vscode. 8 | 6. Run `npm run dev` to start generating themes 9 | 7. Build and examine your changes in an Extension Development Host. 10 | - Debug > Start Debugging or use F5 as a shortcut 11 | 8. Commit and push your changes. 12 | 9. Submit a PR for discussion, keeping in mind that not all suggestions can be accepted. 13 | 14 | ### Tips 15 | 16 | - VSCode's `Developer: Inspect TM Scopes` command is useful to find out the scope 17 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright © 2017 JD 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 19 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
code.language-xxxx
), done!
33 | .comment
, .string
,
57 | .property
etc
58 | 66 | Prism is used on several websites, small and large. Some of them are: 67 |
68 | 69 | 96 | 97 |98 | It’s also used on 99 | the personal blog of Brendan Eich, creator of JavaScript itself! 104 |
105 |111 | The Prism source, highlighted with Prism (don’t you just love how meta 112 | this is?): 113 |
114 | 115 | 116 |This page’s CSS code, highlighted with Prism:
117 | 118 | 119 |This page’s HTML, highlighted with Prism:
120 | 121 | 122 |This page’s logo (SVG), highlighted with Prism:
123 | 124 | 125 |126 | If you’re still not sold, you can 127 | view more examples or 128 | try it out for yourself. 129 |
130 |<pre>
(on its own) or <script>
. Prism
143 | forces you to use the correct element for marking up code:
144 | <code>
. On its own for inline code, or inside a
145 | <pre> for blocks of code. In addition, the language is defined
146 | through the way recommended in the HTML5 draft: through a
147 | language-xxxx class.
148 |
235 | You will need to include the prism.css
and
236 | prism.js
files you downloaded in your page. Example:
237 |
249 | 250 |<!DOCTYPE html> 239 | <html> 240 | <head> 241 | ...
242 |<link href="themes/prism.css" rel="stylesheet" />
243 |</head> 244 | <body> 245 | ...
246 |<script src="prism.js"></script>
247 |</body> 248 | </html>
251 | Prism does its best to encourage good authoring practices. Therefore, it
252 | only works with <code>
elements, since marking up code
253 | without a <code>
element is semantically invalid.
254 | According to the HTML5 spec, the recommended way to define a code language is a
258 | language-xxxx
class, which is what Prism uses. To make
259 | things easier however, Prism assumes that this language definition is
260 | inherited. Therefore, if multiple <code>
elements have
261 | the same language, you can add the language-xxxx
class on
262 | one of their common ancestors. This way, you can also define a
263 | document-wide default language, by adding a
264 | language-xxxx
class on the <body>
or
265 | <html>
element.
266 |
269 | If you want to opt-out of highlighting for a
270 | <code>
element that is a descendant of an element with a
271 | declared code language, you can add the class
272 | language-none
to it (or any non-existing language, really).
273 |
276 | The
277 | recommended way to mark up a code block
281 | (both for semantics and for Prism) is a <pre>
element
282 | with a <code>
element inside, like so:
283 |
<pre><code class="language-css">p { color: red }</code></pre>
285 |
286 | If you use that pattern, the <pre>
will automatically
287 | get the language-xxxx
class (if it doesn’t already have it)
288 | and will be styled as a code block.
289 |
292 | If you want to prevent any elements from being automatically
293 | highlighted, you can use the attribute data-manual
on the
294 | <script>
element you used for prism and use the
295 | API. Example:
296 |
<script src="prism.js" data-manual></script>
298 |
299 | 300 | If you want to use Prism on the server or through the command line, 301 | Prism can be used with Node.js as well. This might be useful if you're 302 | trying to generate static HTML pages with highlighted code for 303 | environments that don't support browser-side JS, like 304 | AMP pages. 305 |
306 | 307 |You can install Prism for Node.js by running:
308 |$ npm install prismjs
309 |
310 | Example:
311 |var Prism = require('prismjs');
312 |
313 | // The code snippet you want to highlight, as a string
314 | var code = "var data = 1;";
315 |
316 | // Returns a highlighted HTML string
317 | var html = Prism.highlight(code, Prism.languages.javascript);
318 |
323 | This is the list of all
324 | languages currently supported by
325 | Prism, with their corresponding alias, to use in place of
326 | xxxx
in the language-xxxx
class:
327 |
333 | Plugins are additional scripts (and CSS code) that extend Prism’s 334 | functionality. Many of the following plugins are official, but are 335 | released as plugins to keep the Prism Core small for those who don’t 336 | need the extra functionality. 337 |
338 |341 | No assembly required to use them. Just select them in the 342 | download page. 343 |
344 |345 | It’s very easy to 346 | write your own Prism plugins. Did you write a plugin for Prism that you want added to this list? 348 | Send a pull request! 351 |
352 |370 | Several tutorials have been written by members of the community to help 371 | you integrate Prism into multiple different website types and 372 | configurations: 373 |
374 | 375 |448 | Please note that the tutorials listed here are not verified to contain 449 | correct information. Read at your risk and always check the official 450 | documentation here if something doesn’t work :) 451 |
452 | 453 |454 | Have you written a tutorial about Prism that’s not already included 455 | here? Send a pull request! 456 |
457 |