some tweaks to the visibility of the code on the readme

assets/github.css

@@ -1,99 +0,0 @@
-/*
-
-github.com style (c) Vasily Polovnyov <vast@whiteants.net>
-
-*/
-
-.hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 0.5em;
-  color: #333;
-  background: #f8f8f8;
-}
-
-.hljs-comment,
-.hljs-quote {
-  color: #998;
-  font-style: italic;
-}
-
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-subst {
-  color: #333;
-  font-weight: bold;
-}
-
-.hljs-number,
-.hljs-literal,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-tag .hljs-attr {
-  color: #008080;
-}
-
-.hljs-string,
-.hljs-doctag {
-  color: #d14;
-}
-
-.hljs-title,
-.hljs-section,
-.hljs-selector-id {
-  color: #900;
-  font-weight: bold;
-}
-
-.hljs-subst {
-  font-weight: normal;
-}
-
-.hljs-type,
-.hljs-class .hljs-title {
-  color: #458;
-  font-weight: bold;
-}
-
-.hljs-tag,
-.hljs-name,
-.hljs-attribute {
-  color: #000080;
-  font-weight: normal;
-}
-
-.hljs-regexp,
-.hljs-link {
-  color: #009926;
-}
-
-.hljs-symbol,
-.hljs-bullet {
-  color: #990073;
-}
-
-.hljs-built_in,
-.hljs-builtin-name {
-  color: #0086b3;
-}
-
-.hljs-meta {
-  color: #999;
-  font-weight: bold;
-}
-
-.hljs-deletion {
-  background: #fdd;
-}
-
-.hljs-addition {
-  background: #dfd;
-}
-
-.hljs-emphasis {
-  font-style: italic;
-}
-
-.hljs-strong {
-  font-weight: bold;
-}

assets/step.css

@@ -1,5 +1,4 @@
 @import url(https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css);
-@import url(./github.css);
 
 body {
   display: flex;
@@ -13,6 +12,12 @@ body {
   padding: 50px;
 }
 
+#app pre {
+  border-radius: 2px;
+  border: 1px solid #999;
+  padding: 15px;
+}
+
 #markdownReadme {
   box-sizing: border-box;
   flex: 1 1 60%;
@@ -23,11 +28,129 @@ body {
   overflow: scroll;
 }
 
-pre {
-  padding: 15px;
-  border: 1px #999 solid;
-  border-radius: 2px;
-  background-color: white;
+#markdownReadme pre {
+  padding: 5px;
+  border-radius: 3px;
+  background: #1e1e1e;
   margin: 15px 0;
   overflow: auto;
 }
+
+/**
+ * highlight.js style
+ */
+/*
+ * Visual Studio 2015 dark style
+ * Author: Nicolas LLOBERA <nllobera@gmail.com>
+ */
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #1e1e1e;
+  color: #fff;
+}
+
+.hljs-keyword,
+.hljs-literal,
+.hljs-symbol,
+.hljs-name {
+  color: #5da4df;
+}
+.hljs-link {
+  color: #569cd6;
+  text-decoration: underline;
+}
+
+.hljs-built_in,
+.hljs-type {
+  color: #4ec9b0;
+}
+
+.hljs-number,
+.hljs-class {
+  color: #b8d7a3;
+}
+
+.hljs-string,
+.hljs-meta-string {
+  color: #d69d85;
+}
+
+.hljs-regexp,
+.hljs-template-tag {
+  color: #9a5334;
+}
+
+.hljs-subst,
+.hljs-function,
+.hljs-title,
+.hljs-params,
+.hljs-formula {
+  color: #dcdcdc;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #6dce5e;
+  font-style: italic;
+}
+
+.hljs-doctag {
+  color: #608b4e;
+}
+
+.hljs-meta,
+.hljs-meta-keyword,
+.hljs-tag {
+  color: #9b9b9b;
+}
+
+.hljs-variable,
+.hljs-template-variable {
+  color: #bd63c5;
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-builtin-name {
+  color: #9cdcfe;
+}
+
+.hljs-section {
+  color: gold;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+/*.hljs-code {
+  font-family:'Monospace';
+}*/
+
+.hljs-bullet,
+.hljs-selector-tag,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #d7ba7d;
+}
+
+.hljs-addition {
+  background-color: #144212;
+  display: inline-block;
+  width: 100%;
+}
+
+.hljs-deletion {
+  background-color: #600;
+  display: inline-block;
+  width: 100%;
+}

markdownReadme/src/index.ts

@@ -1,4 +1,4 @@
-import marked from 'marked';
+import marked, { Renderer } from 'marked';
 import hljs from 'highlight.js/lib/highlight';
 import javascript from 'highlight.js/lib/languages/javascript';
 import typescript from 'highlight.js/lib/languages/typescript';
@@ -10,27 +10,28 @@ async function run() {
   const div = document.getElementById('markdownReadme');
 
   // // Create your custom renderer.
-  // const renderer = new Renderer();
-  // renderer.code = (code, language) => {
-  //   // Check whether the given language is valid for highlight.js.
-  //   const validLang = !!(language && highlightjs.getLanguage(language));
-  //   // Highlight only if the language is valid.
-  //   const highlighted = validLang ? highlightjs.highlight(language, code).value : code;
-  //   // Render the highlighted code with `hljs` class.
-  //   return `<pre><code class="hljs ${language}">${highlighted}</code></pre>`;
-  // };
+  const renderer = new Renderer();
+  renderer.code = (code, language) => {
+    // Check whether the given language is valid for highlight.js.
+    const validLang = !!(language && hljs.getLanguage(language));
+    // Highlight only if the language is valid.
+    const highlighted = validLang ? hljs.highlight(language, code).value : code;
+    // Render the highlighted code with `hljs` class.
+    return `<pre><code class="hljs ${language}">${highlighted}</code></pre>`;
+  };
+  marked.setOptions({ renderer });
 
-  if (typeof hljs != 'undefined') {
-    marked.setOptions({
-      highlight: function(code, lang) {
-        if (lang && hljs.getLanguage(lang)) {
-          return hljs.highlight(lang, code).value;
-        } else {
-          return code;
-        }
-      }
-    });
-  }
+  // if (typeof hljs != 'undefined') {
+  //   marked.setOptions({
+  //     highlight: function(code, lang) {
+  //       if (lang && hljs.getLanguage(lang)) {
+  //         return hljs.highlight(lang, code).value;
+  //       } else {
+  //         return code;
+  //       }
+  //     }
+  //   });
+  // }
 
   if (div) {
     const response = await fetch('../README.md');

step1-04/demo/README.md

@@ -44,7 +44,7 @@ This is the file that places your App onto the page.
 
 > Note that to avoid build errors, this file has been renamed to index.temp. Change the name to index.tsx.
 
-```tsx
+```ts
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { App } from './App';

step2-02/README.md

@@ -35,7 +35,7 @@ https://developer.microsoft.com/en-us/fabric/#/components
 
 ## Importing a Component
 
-```tsx
+```jsx
 import { DefaultButton } from 'office-ui-fabric-react';
 
 const MyComponent = () => {
@@ -53,7 +53,7 @@ Take a look at the documentation: https://developer.microsoft.com/en-us/fabric#/
 
 Let's say we want an Icon to be rendered with the Button Text, we'd use the `iconProps`
 
-```tsx
+```js
 import { DefaultButton } from 'office-ui-fabric-react';
 
 const MyComponent = () => {
@@ -69,7 +69,7 @@ const MyComponent = () => {
 
 Some Fabric components take in a render function like the TextField:
 
-```tsx
+```js
 import { TextField } from 'office-ui-fabric-react';
 
 const MyComponent = () => {