Update example site

Author: andrewbranch

examples/example-site/content/blog/hello-world/index.md

@@ -18,9 +18,11 @@ const Wrapper = styled.section`
   }
 `
 
+// highlight-start
 export default function MyComponent({ children }) {
   return <Wrapper>{children}</Wrapper>;
 }
+// highlight-end
 ```
 
 ```js

examples/example-site/src/components/layout.js

@@ -1,4 +1,5 @@
 import React from "react"
+import Helmet from "react-helmet"
 import { Link } from "gatsby"
 
 import { rhythm, scale } from "../utils/typography"
@@ -52,22 +53,33 @@ class Layout extends React.Component {
       )
     }
     return (
-      <div
-        style={{
-          marginLeft: `auto`,
-          marginRight: `auto`,
-          maxWidth: rhythm(24),
-          padding: `${rhythm(1.5)} ${rhythm(3 / 4)}`,
-        }}
-      >
-        <header>{header}</header>
-        <main>{children}</main>
-        <footer>
-          © {new Date().getFullYear()}, Built with
-          {` `}
-          <a href="https://www.gatsbyjs.org">Gatsby</a>
-        </footer>
-      </div>
+      <>
+        <Helmet>
+          <style children={`
+            .vscode-highlight {
+              --vscode-highlight-line-highlighted-background-color: rgba(255, 255, 255, 0.1); /* default: transparent */
+              --vscode-highlight-line-highlighted-border-color: rgba(255, 255, 255, 0.6); /* default: transparent */
+              --vscode-highlight-line-highlighted-border-width: 2px; /* default: 2px */
+            }
+          `} />
+        </Helmet>
+        <div
+          style={{
+            marginLeft: `auto`,
+            marginRight: `auto`,
+            maxWidth: rhythm(24),
+            padding: `${rhythm(1.5)} ${rhythm(3 / 4)}`,
+          }}
+        >
+          <header>{header}</header>
+          <main>{children}</main>
+          <footer>
+            © {new Date().getFullYear()}, Built with
+            {` `}
+            <a href="https://www.gatsbyjs.org">Gatsby</a>
+          </footer>
+        </div>
+      </>
     )
   }
 }