From ec097e84fc961fe974ca3dc602676efaad35ff20 Mon Sep 17 00:00:00 2001 From: shmck Date: Sun, 3 Nov 2019 10:57:01 -0800 Subject: [PATCH 1/2] support markdown with other language/types --- package-lock.json | 45 +------- package.json | 1 + web-app/src/components/Markdown/index.tsx | 3 +- web-app/src/components/Markdown/prism.css | 127 ---------------------- web-app/src/components/Markdown/prism.ts | 13 +++ web-app/stories/Level.stories.tsx | 2 +- 6 files changed, 23 insertions(+), 168 deletions(-) delete mode 100644 web-app/src/components/Markdown/prism.css create mode 100644 web-app/src/components/Markdown/prism.ts diff --git a/package-lock.json b/package-lock.json index d3874c03..231be2f1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -56,15 +56,6 @@ "@types/node": "*" } }, - "@types/graphql": { - "version": "14.5.0", - "resolved": "https://registry.npmjs.org/@types/graphql/-/graphql-14.5.0.tgz", - "integrity": "sha512-MOkzsEp1Jk5bXuAsHsUi6BVv0zCO+7/2PTiZMXWDSsMXvNU6w/PLMQT2vHn8hy2i0JqojPz1Sz6rsFjHtsU0lA==", - "dev": true, - "requires": { - "graphql": "*" - } - }, "@types/jsdom": { "version": "12.2.4", "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-12.2.4.tgz", @@ -84,21 +75,6 @@ } } }, - "@types/linkify-it": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-2.1.0.tgz", - "integrity": "sha512-Q7DYAOi9O/+cLLhdaSvKdaumWyHbm7HAk/bFwwyTuU0arR5yyCeW5GOoqt4tJTpDRxhpx9Q8kQL6vMpuw9hDSw==", - "dev": true - }, - "@types/markdown-it": { - "version": "0.0.9", - "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-0.0.9.tgz", - "integrity": "sha512-IFSepyZXbF4dgSvsk8EsgaQ/8Msv1I5eTL0BZ0X3iGO9jw6tCVtPG8HchIPm3wrkmGdqZOD42kE0zplVi1gYDA==", - "dev": true, - "requires": { - "@types/linkify-it": "*" - } - }, "@types/minimatch": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz", @@ -117,6 +93,12 @@ "integrity": "sha512-KEjODidV4XYUlJBF3XdjSH5FWoMCtO0utnhtdLf1AgeuZLOrRbvmU/gaRCVg7ZaQDjVf3l84egiY0mRNe5xE4A==", "dev": true }, + "@types/prismjs": { + "version": "1.16.0", + "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.16.0.tgz", + "integrity": "sha512-mEyuziLrfDCQ4juQP1k706BUU/c8OGn/ZFl69AXXY6dStHClKX4P+N8+rhqpul1vRDA2VOygzMRSJJZHyDEOfw==", + "dev": true + }, "@types/tough-cookie": { "version": "2.3.5", "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-2.3.5.tgz", @@ -763,15 +745,6 @@ "path-is-absolute": "^1.0.0" } }, - "graphql": { - "version": "14.5.7", - "resolved": "https://registry.npmjs.org/graphql/-/graphql-14.5.7.tgz", - "integrity": "sha512-as410RMJSUFqF8RcH2QWxZ5ioqHzsH9VWnWbaU+UnDXJ/6azMDIYPrtXCBPXd8rlunEVb7W8z6fuUnNHMbFu9A==", - "dev": true, - "requires": { - "iterall": "^1.2.2" - } - }, "growl": { "version": "1.10.5", "resolved": "https://registry.npmjs.org/growl/-/growl-1.10.5.tgz", @@ -989,12 +962,6 @@ "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz", "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=" }, - "iterall": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/iterall/-/iterall-1.2.2.tgz", - "integrity": "sha512-yynBb1g+RFUPY64fTrFv7nsjRrENBQJaX2UL+2Szc9REFrSNm1rpSXHGzhmAy7a9uv3vlvgBlXnf9RqmPH1/DA==", - "dev": true - }, "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", diff --git a/package.json b/package.json index 2f8b6e59..1e0bf4a0 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "@types/jsdom": "^12.2.4", "@types/mocha": "^5.2.7", "@types/node": "^12.12.5", + "@types/prismjs": "^1.16.0", "assert": "^2.0.0", "concurrently": "^5.0.0", "dotenv": "^8.2.0", diff --git a/web-app/src/components/Markdown/index.tsx b/web-app/src/components/Markdown/index.tsx index 80a58975..cab3bc0c 100644 --- a/web-app/src/components/Markdown/index.tsx +++ b/web-app/src/components/Markdown/index.tsx @@ -5,7 +5,8 @@ import markdownEmoji from 'markdown-it-emoji' import prism from 'markdown-it-prism' import * as React from 'react' -import './prism.css' +// load prism styles & language support +import './prism' // markdown highlighter instance const md: MarkdownIt = new MarkdownIt({ diff --git a/web-app/src/components/Markdown/prism.css b/web-app/src/components/Markdown/prism.css deleted file mode 100644 index 4b36be5b..00000000 --- a/web-app/src/components/Markdown/prism.css +++ /dev/null @@ -1,127 +0,0 @@ -/* PrismJS 1.16.0 -https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+typescript+jsx+tsx */ -/** - * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML - * Based on https://github.com/chriskempson/tomorrow-theme - * @author Rose Pritchard - */ - -pre { - border-radius: 0.3em; -} - -code[class*='language-'], -pre[class*='language-'] { - color: #ccc; - background: none; - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - font-size: 1em; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - line-height: 1.5; - - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; -} - -/* Code blocks */ -pre[class*='language-'] { - padding: 1em; - margin: 0.5em 0; - overflow: auto; -} - -:not(pre) > code[class*='language-'], -pre[class*='language-'] { - background: #2d2d2d; -} - -/* Inline code */ -:not(pre) > code[class*='language-'] { - padding: 0.1em; - border-radius: 0.3em; - white-space: normal; -} - -.token.comment, -.token.block-comment, -.token.prolog, -.token.doctype, -.token.cdata { - color: #999; -} - -.token.punctuation { - color: #ccc; -} - -.token.tag, -.token.attr-name, -.token.namespace, -.token.deleted { - color: #e2777a; -} - -.token.function-name { - color: #6196cc; -} - -.token.boolean, -.token.number, -.token.function { - color: #f08d49; -} - -.token.property, -.token.class-name, -.token.constant, -.token.symbol { - color: #f8c555; -} - -.token.selector, -.token.important, -.token.atrule, -.token.keyword, -.token.builtin { - color: #cc99cd; -} - -.token.string, -.token.char, -.token.attr-value, -.token.regex, -.token.variable { - color: #7ec699; -} - -.token.operator, -.token.entity, -.token.url { - color: #67cdcc; -} - -.token.important, -.token.bold { - font-weight: bold; -} -.token.italic { - font-style: italic; -} - -.token.entity { - cursor: help; -} - -.token.inserted { - color: green; -} diff --git a/web-app/src/components/Markdown/prism.ts b/web-app/src/components/Markdown/prism.ts new file mode 100644 index 00000000..86d3d551 --- /dev/null +++ b/web-app/src/components/Markdown/prism.ts @@ -0,0 +1,13 @@ +// Themes - more at https://prismjs.com/examples.html +import 'prismjs/themes/prism-tomorrow.css' + +// Language support +import 'prismjs/components/prism-bash' +import 'prismjs/components/prism-clike' +import 'prismjs/components/prism-css' +import 'prismjs/components/prism-git' +import 'prismjs/components/prism-javascript' +import 'prismjs/components/prism-json' +import 'prismjs/components/prism-sql' +import 'prismjs/components/prism-typescript' +// TODO: import all - current list only supports js related \ No newline at end of file diff --git a/web-app/stories/Level.stories.tsx b/web-app/stories/Level.stories.tsx index 10b38fb5..4b0d81f0 100644 --- a/web-app/stories/Level.stories.tsx +++ b/web-app/stories/Level.stories.tsx @@ -84,7 +84,7 @@ storiesOf('Level', module) steps: [ { id: 'L1:S1', - content: 'Should support markdown test\n ```js\nvar a = 1\n```\nwhew it works!', + content: 'Should support markdown test\n ```shell\nnpn install some-packagen```\nwhew it works!', setup: { commits: ['a4679b1'], commands: [], files: ['package.json'] }, solution: { commits: ['7c64508'], From ecadb7d9aac0ec04bfdcdd0070a15154f09dd0c1 Mon Sep 17 00:00:00 2001 From: shmck Date: Sun, 3 Nov 2019 11:00:28 -0800 Subject: [PATCH 2/2] fix typings dependency --- package-lock.json | 21 +++++++++++++++------ package.json | 2 +- web-app/package-lock.json | 6 ++++++ web-app/package.json | 1 + 4 files changed, 23 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index 231be2f1..44652172 100644 --- a/package-lock.json +++ b/package-lock.json @@ -93,12 +93,6 @@ "integrity": "sha512-KEjODidV4XYUlJBF3XdjSH5FWoMCtO0utnhtdLf1AgeuZLOrRbvmU/gaRCVg7ZaQDjVf3l84egiY0mRNe5xE4A==", "dev": true }, - "@types/prismjs": { - "version": "1.16.0", - "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.16.0.tgz", - "integrity": "sha512-mEyuziLrfDCQ4juQP1k706BUU/c8OGn/ZFl69AXXY6dStHClKX4P+N8+rhqpul1vRDA2VOygzMRSJJZHyDEOfw==", - "dev": true - }, "@types/tough-cookie": { "version": "2.3.5", "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-2.3.5.tgz", @@ -745,6 +739,15 @@ "path-is-absolute": "^1.0.0" } }, + "graphql": { + "version": "14.5.8", + "resolved": "https://registry.npmjs.org/graphql/-/graphql-14.5.8.tgz", + "integrity": "sha512-MMwmi0zlVLQKLdGiMfWkgQD7dY/TUKt4L+zgJ/aR0Howebod3aNgP5JkgvAULiR2HPVZaP2VEElqtdidHweLkg==", + "dev": true, + "requires": { + "iterall": "^1.2.2" + } + }, "growl": { "version": "1.10.5", "resolved": "https://registry.npmjs.org/growl/-/growl-1.10.5.tgz", @@ -962,6 +965,12 @@ "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz", "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=" }, + "iterall": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/iterall/-/iterall-1.2.2.tgz", + "integrity": "sha512-yynBb1g+RFUPY64fTrFv7nsjRrENBQJaX2UL+2Szc9REFrSNm1rpSXHGzhmAy7a9uv3vlvgBlXnf9RqmPH1/DA==", + "dev": true + }, "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", diff --git a/package.json b/package.json index 1e0bf4a0..4db615ce 100644 --- a/package.json +++ b/package.json @@ -39,11 +39,11 @@ "@types/jsdom": "^12.2.4", "@types/mocha": "^5.2.7", "@types/node": "^12.12.5", - "@types/prismjs": "^1.16.0", "assert": "^2.0.0", "concurrently": "^5.0.0", "dotenv": "^8.2.0", "glob": "^7.1.5", + "graphql": "^14.5.8", "mocha": "^6.2.2", "prettier": "^1.18.2", "tslint": "^5.20.0", diff --git a/web-app/package-lock.json b/web-app/package-lock.json index 1935a882..52260b0f 100644 --- a/web-app/package-lock.json +++ b/web-app/package-lock.json @@ -2352,6 +2352,12 @@ "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.5.tgz", "integrity": "sha512-KEjODidV4XYUlJBF3XdjSH5FWoMCtO0utnhtdLf1AgeuZLOrRbvmU/gaRCVg7ZaQDjVf3l84egiY0mRNe5xE4A==" }, + "@types/prismjs": { + "version": "1.16.0", + "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.16.0.tgz", + "integrity": "sha512-mEyuziLrfDCQ4juQP1k706BUU/c8OGn/ZFl69AXXY6dStHClKX4P+N8+rhqpul1vRDA2VOygzMRSJJZHyDEOfw==", + "dev": true + }, "@types/prop-types": { "version": "15.7.3", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", diff --git a/web-app/package.json b/web-app/package.json index ab34b756..3606a829 100644 --- a/web-app/package.json +++ b/web-app/package.json @@ -55,6 +55,7 @@ "@types/jest": "^24.0.21", "@types/markdown-it": "0.0.9", "@types/node": "^12.12.5", + "@types/prismjs": "^1.16.0", "@types/ramda": "^0.26.33", "@types/react": "^16.9.11", "@types/react-dom": "^16.9.3",