Skip to content

Commit e73e694

Browse files
committed
README improvements
1 parent ba43231 commit e73e694

File tree

1 file changed

+7
-3
lines changed

1 file changed

+7
-3
lines changed

README.md

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
# gatsby-remark-vscode
22

3-
[![Greenkeeper badge](https://badges.greenkeeper.io/andrewbranch/gatsby-remark-vscode.svg)](https://greenkeeper.io/)
3+
[![Greenkeeper badge](https://badges.greenkeeper.io/andrewbranch/gatsby-remark-vscode.svg)](https://greenkeeper.io/) [![npm](https://img.shields.io/npm/v/gatsby-remark-vscode.svg)](https://www.npmjs.com/package/gatsby-remark-vscode)
44

55
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.
66

77
Includes OS dark mode support 🌙
88

99
## Table of contents
1010

11-
- [Getting started](#getting-started)
1211
- [Why gatsby-remark-vscode?](#why-gatsby-remark-vscode)
12+
- [Getting started](#getting-started)
1313
- [Dark mode support via `prefers-color-scheme`](#dark-mode-support-via-prefers-color-scheme)
1414
- [Built-in languages and themes](#built-in-languages-and-themes)
1515
- [Languages](#languages)
@@ -26,7 +26,7 @@ Includes OS dark mode support 🌙
2626

2727
## Why gatsby-remark-vscode?
2828

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:
3030

3131
| Scenario | Others | gatsby-remark-vscode |
3232
|-------------------------|------------------------|----------------------|
@@ -82,6 +82,8 @@ Write code examples in your markdown file as usual:
8282
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.
8383
8484
```js
85+
// Note: you probably don’t actually want to provide all three options,
86+
// this example just aims to show all possible options.
8587
{
8688
colorTheme: {
8789
defaultTheme: 'Solarized Light', // Required
@@ -93,6 +95,8 @@ Instead of passing a string for `colorTheme`, you can pass an object specifying
9395
9496
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)
9597
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+
96100
## Built-in languages and themes
97101
98102
The following can be used without specifying an extension to download from the marketplace:

0 commit comments

Comments
 (0)