You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A syntax highlighting plugin for [Gatsby](https://www.gatsbyjs.org/) that uses VS Code’s extensions, themes, and highlighting engine. Any language and theme VS Code supports, whether built-in or via a [Marketplace extension](https://marketplace.visualstudio.com/vscode), can be rendered on your Gatsby site.
-[Dark mode support via `prefers-color-scheme`](#dark-mode-support-via-prefers-color-scheme)
14
14
-[Built-in languages and themes](#built-in-languages-and-themes)
15
15
-[Languages](#languages)
@@ -26,7 +26,7 @@ Includes OS dark mode support 🌙
26
26
27
27
## Why gatsby-remark-vscode?
28
28
29
-
JavaScript syntax highlighting libraries that were designed to run in the browser, like [Prism](https://www.gatsbyjs.org/packages/gatsby-remark-prismjs/), have to make compromises given the constraints of their intended environment. Since they get downloaded and executed whenever a user visits a page, they have to be ultra-fast and ultra-lightweight. Your Gatsby app, on the other hand, renders to HTML at build-time in Node, so these constraints don’t apply. So why make tradeoffs that don’t buy you anything? There’s no reason why the syntax highlighting on your blog should be any less sophisticated than the syntax highlighting in your code editor. And since VS Code is built with JavaScript and CSS, is open source, and has a rich extension ecosystem, it turns out that it’s pretty easy to hook use its highlighting engine and extensions and get great results. A few examples of where gatsby-remark-vscode excels:
29
+
JavaScript syntax highlighting libraries that were designed to run in the browser, like [Prism](https://www.gatsbyjs.org/packages/gatsby-remark-prismjs/), have to make compromises given the constraints of their intended environment. Since they get downloaded and executed whenever a user visits a page, they have to be ultra-fast and ultra-lightweight. Your Gatsby app, on the other hand, renders to HTML at build-time in Node, so these constraints don’t apply. So why make tradeoffs that don’t buy you anything? There’s no reason why the syntax highlighting on your blog should be any less sophisticated than the syntax highlighting in your code editor. And since VS Code is built with JavaScript and CSS, is open source, and has a rich extension ecosystem, it turns out that it’s pretty easy to use its highlighting engine and extensions and get great results. A few examples of where gatsby-remark-vscode excels:
@@ -82,6 +82,8 @@ Write code examples in your markdown file as usual:
82
82
Instead of passing a string for `colorTheme`, you can pass an object specifying which theme to use for different values of a user’s operating system color scheme preference.
83
83
84
84
```js
85
+
// Note: you probably don’t actually want to provide all three options,
86
+
// this example just aims to show all possible options.
85
87
{
86
88
colorTheme: {
87
89
defaultTheme:'Solarized Light', // Required
@@ -93,6 +95,8 @@ Instead of passing a string for `colorTheme`, you can pass an object specifying
93
95
94
96
This places CSS for each theme inside a corresponding [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) media query. [See browser support.](https://caniuse.com/#feat=prefers-color-scheme)
95
97
98
+
Generally, you probably don’t need or want to set all three `colorTheme` options—typical usage would be to set `defaultTheme` to a light theme and `prefersDarkTheme` to a dark theme.
99
+
96
100
## Built-in languages and themes
97
101
98
102
The following can be used without specifying an extension to download from the marketplace:
0 commit comments