From 37685e102f8f54f48fd224ce6a73f2333f3fb7f6 Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 27 Feb 2019 13:26:45 -0800 Subject: [PATCH] some tweaks to the visibility of the code on the readme --- assets/github.css | 99 -------------------------- assets/step.css | 135 ++++++++++++++++++++++++++++++++++-- markdownReadme/src/index.ts | 43 ++++++------ step1-04/demo/README.md | 2 +- step2-02/README.md | 6 +- 5 files changed, 155 insertions(+), 130 deletions(-) delete mode 100644 assets/github.css diff --git a/assets/github.css b/assets/github.css deleted file mode 100644 index 791932b..0000000 --- a/assets/github.css +++ /dev/null @@ -1,99 +0,0 @@ -/* - -github.com style (c) Vasily Polovnyov - -*/ - -.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; -} diff --git a/assets/step.css b/assets/step.css index 3036130..9fe63d5 100644 --- a/assets/step.css +++ b/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 + */ + +.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%; +} diff --git a/markdownReadme/src/index.ts b/markdownReadme/src/index.ts index 8679add..0de1592 100644 --- a/markdownReadme/src/index.ts +++ b/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 `
${highlighted}
`; - // }; + 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 `
${highlighted}
`; + }; + 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'); diff --git a/step1-04/demo/README.md b/step1-04/demo/README.md index 50359cc..e39abf4 100644 --- a/step1-04/demo/README.md +++ b/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'; diff --git a/step2-02/README.md b/step2-02/README.md index 554be43..46173fa 100644 --- a/step2-02/README.md +++ b/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 = () => {