Adds syntax highlighting to the code

.vscode/launch.json

@@ -6,7 +6,7 @@
       "type": "node",
       "request": "launch",
       "protocol": "inspector",
-      "program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby",
+      "program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby.js",
       "args": ["develop"],
       "cwd": "${workspaceFolder}/packages/typescriptlang-org",
       "stopOnEntry": false,
@@ -18,7 +18,7 @@
       "type": "node",
       "request": "launch",
       "protocol": "inspector",
-      "program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby",
+      "program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby.js",
       "args": ["build"],
       "cwd": "${workspaceFolder}/packages/typescriptlang-org",
       "stopOnEntry": false,

packages/gatsby-remark-shiki/README.md

@@ -0,0 +1,21 @@
+### gatsby-remark-shiki
+
+Sets up code blocks to run through shiki:
+
+```js
+{
+  resolve: `gatsby-transformer-remark`,
+  options: {
+    plugins: [
+      "gatsby-remark-twoslasher-code-blocks",
+      "gatsby-remark-autolink-headers",
+      "gatsby-remark-shiki",
+      "gatsby-remark-copy-linked-files",
+      "gatsby-remark-smartypants",
+    ],
+  },
+}
+```
+
+You want this really late in the plugin process if you have anything else touching your code, as after this
+the code will be raw HTML.

packages/gatsby-remark-shiki/index.js

@@ -0,0 +1,66 @@
+// @ts-enable
+
+const shiki = require('shiki')
+const visit = require('unist-util-visit')
+
+const { commonLangIds, commonLangAliases, otherLangIds } = require('shiki-languages')
+const languages = [...commonLangIds, ...commonLangAliases, ...otherLangIds]
+
+/** 
+ * This gets filled in by the promise below, then should 
+ * hopefully be more or less synchronous access by each parse
+ * of the highlighter
+ */
+let highlighter = null
+
+const getHighlighter = options => {
+  if (highlighter) return highlighter
+
+  var settings = options || {}
+  var theme = settings.theme || 'nord'
+  var shikiTheme
+
+  try {
+    shikiTheme = shiki.getTheme(theme)
+  } catch (error) {
+    try {
+      shikiTheme = shiki.loadTheme(theme)
+    } catch (error) {
+      throw new Error('Unable to load theme: ' + theme)
+    }
+  }
+
+  return shiki.getHighlighter({ theme: shikiTheme, langs: languages }).then(newHighlighter => {
+    highlighter = newHighlighter
+    return highlighter
+  })
+}
+
+/**
+ * The function doing the work of transforming any codeblock samples
+ * which have opted-in to the twoslash pattern.
+ *
+ * @param {Node} node
+ */
+const visitor = node => {
+  let lang = node.lang
+  const replacer = {
+    "json5": "json"
+  }
+
+  if (replacer[lang]) lang = replacer[lang]
+
+  const shouldHighlight = lang && languages.includes(lang)
+  if (shouldHighlight) {
+    const results = highlighter.codeToHtml(node.value, lang)
+    node.type = "html"
+    node.value = results
+    node.children = []
+  }
+}
+
+/** The plugin API */
+module.exports = async ({ markdownAST }) => {
+  await getHighlighter()
+  visit(markdownAST, 'code', visitor)
+}

packages/gatsby-remark-shiki/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "gatsby-remark-shiki",
+  "version": "0.1.0",
+  "license": "MIT",
+  "dependencies": {
+    "shiki": "~0.1.6"
+  },
+  "scripts": {
+    "build": "echo 'NOOP'",
+    "test": "echo 'NOOP'"
+  }
+}

packages/gatsby-remark-shiki/scripts/index.md

@@ -0,0 +1,27 @@
+## Some markdown
+
+I shouldn't get changed:
+
+```ts
+// @showEmit
+export function fn(arr: number[]) {
+  const arr2 = [1, ...arr];
+}
+```
+
+I should:
+
+```ts twoslash
+// @showEmit
+// @target: ES5
+// @downleveliteration
+// @importhelpers
+
+// --importHelpers on: Spread helper will be imported from 'tslib'
+
+export function fn(arr: number[]) {
+  const arr2 = [1, ...arr];
+}
+```
+
+Cool, a paragraph after

packages/gatsby-remark-shiki/scripts/test.js

@@ -0,0 +1,8 @@
+const remark = require('remark')
+const gatsbyRemarkShiki = require('../')
+const { readFileSync } = require('fs')
+
+const markdownAST = remark().parse(readFileSync(__dirname + '/index.md', 'utf8'))
+gatsbyRemarkShiki({ markdownAST }).then(() => {
+  console.log(markdownAST)
+})

packages/handbook-v1/en/Advanced Types.md

@@ -566,7 +566,7 @@ button.animate(0, 0, "uneasy"); // error: "uneasy" is not allowed here
 
 You can pass any of the three allowed strings, but any other string will give the error
 
-```text
+```
 Argument of type '"uneasy"' is not assignable to parameter of type '"ease-in" | "ease-out" | "ease-in-out"'
 ```
 

packages/handbook-v1/en/Classes.md

@@ -11,7 +11,7 @@ In TypeScript, we allow developers to use these techniques now, and compile them
 
 # Classes
 
-Let's take a look at a simple class-based example:
+Let's take a look at a simple class-based example
 
 ```ts
 class Greeter {
@@ -113,7 +113,7 @@ The example also shows how to override methods in the base class with methods th
 Here both `Snake` and `Horse` create a `move` method that overrides the `move` from `Animal`, giving it functionality specific to each class.
 Note that even though `tom` is declared as an `Animal`, since its value is a `Horse`, calling `tom.move(34)` will call the overriding method in `Horse`:
 
-```Text
+```
 Slithering...
 Sammy the Python moved 5m.
 Galloping...

packages/handbook-v1/en/Variable Declarations.md

@@ -130,7 +130,7 @@ For those unfamiliar, `setTimeout` will try to execute a function after a certai
 
 Ready? Take a look:
 
-```text
+```
 10
 10
 10
@@ -146,7 +146,7 @@ Ready? Take a look:
 Many JavaScript developers are intimately familiar with this behavior, but if you're surprised, you're certainly not alone.
 Most people expect the output to be
 
-```text
+```
 0
 1
 2
@@ -374,7 +374,7 @@ for (let i = 0; i < 10 ; i++) {
 
 and as expected, this will print out
 
-```text
+```
 0
 1
 2

packages/handbook-v1/en/declaration files/Library Structures.md

@@ -375,7 +375,7 @@ The layout of your declaration files should mirror the layout of the library.
 
 A library can consist of multiple modules, such as
 
-```Text
+```
 myLib
   +---- index.js
   +---- foo.js
@@ -395,7 +395,7 @@ var d = require("myLib/bar/baz");
 
 Your declaration files should thus be
 
-```Text
+```
 @types/myLib
   +---- index.d.ts
   +---- foo.d.ts

packages/handbook-v1/en/tutorials/Gulp.md

@@ -20,7 +20,7 @@ cd proj
 
 To start, we're going to structure our project in the following way:
 
-```text
+```
 proj/
    ├─ src/
    └─ dist/

packages/handbook-v1/en/tutorials/Migrating from JavaScript.md

@@ -25,7 +25,7 @@ In this case, you might already have a folder structure like this set up.
 
 From this point on, we're going to assume that your directory is set up something like this:
 
-```text
+```
 projectRoot
 ├── src
 │   ├── file1.js

packages/handbook-v1/en/tutorials/React & Webpack.md

@@ -21,7 +21,7 @@ cd proj
 
 To start, we're going to structure our project in the following way:
 
-```text
+```
 proj/
 ├─ dist/
 └─ src/

packages/handbook-v1/en/tutorials/React.md

@@ -37,7 +37,7 @@ create-react-app my-app --scripts-version=react-scripts-ts
 
 At this point, your project layout should look like the following:
 
-```text
+```
 my-app/
 ├─ .gitignore
 ├─ node_modules/

packages/typescriptlang-org/gatsby-config.js

@@ -57,7 +57,7 @@ module.exports = {
       resolve: `gatsby-transformer-remark`,
       options: {
         plugins: [
-          `${require.resolve("gatsby-remark-twoslasher-code-blocks")}`,
+          require.resolve("gatsby-remark-twoslasher-code-blocks"),
           {
             resolve: `gatsby-remark-images`,
             options: {
@@ -71,7 +71,7 @@ module.exports = {
             },
           },
           "gatsby-remark-autolink-headers",
-          "gatsby-remark-prismjs",
+          require.resolve("gatsby-remark-shiki"),
           "gatsby-remark-copy-linked-files",
           "gatsby-remark-smartypants",
         ],

packages/typescriptlang-org/package.json

@@ -31,6 +31,7 @@
     "gatsby-remark-images": "^3.1.30",
     "gatsby-remark-prismjs": "^3.3.22",
     "gatsby-remark-responsive-iframe": "^2.2.26",
+    "gatsby-remark-shiki": "0.1.0",
     "gatsby-remark-smartypants": "^2.1.15",
     "gatsby-remark-twoslasher-code-blocks": "0.1.0",
     "gatsby-source-filesystem": "^2.1.36",
@@ -41,6 +42,7 @@
     "react": "^16.11.0",
     "react-dom": "^16.11.0",
     "react-helmet": "^5.2.1",
+    "rehype-shiki": "^0.0.5",
     "ts-node": "^8.5.0",
     "ts-twoslasher": "0.1.0",
     "typescript": "^3.7.2"