From d34802599176e79432f71bfdc89d132a04d3e4e2 Mon Sep 17 00:00:00 2001 From: Jon Ursenbach Date: Mon, 9 Nov 2020 11:54:49 -0800 Subject: [PATCH] chore(deps): upgrading `@readme/syntax-highlighter` (#61) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### 🧰 Changes Been a while since the syntax highlighter has been updated here and since I added support for TOML to it today, we should get it up to date here so Markdown code blocks with that language should get highlighted. Includes a fix for how codemirror renders syntax highlighting as `div`s. ### 📖 Release Notes #### 10.2.0 (2020-10-29) * feat: adding support for TOML highlighting (#26) ([b2e617b](https://github.com/readmeio/syntax-highlighter/commit/b2e617b)), closes [#26](https://github.com/readmeio/syntax-highlighter/issues/26) #### 10.1.2 (2020-10-26) * fix: isolating regex check to highlightmode option (#25) ([aec7c81](https://github.com/readmeio/syntax-highlighter/commit/aec7c81)), closes [#25](https://github.com/readmeio/syntax-highlighter/issues/25) #### 10.1.1 (2020-10-23) * fix: check for \n in CodeMirror runmode (#23) ([66444f4](https://github.com/readmeio/syntax-highlighter/commit/66444f4)), closes [#23](https://github.com/readmeio/syntax-highlighter/issues/23) #### 10.1.0 (2020-10-22) * chore: moving react and react-dom into being peerdeps (#24) ([d1826d7](https://github.com/readmeio/syntax-highlighter/commit/d1826d7)), closes [#24](https://github.com/readmeio/syntax-highlighter/issues/24) #### 10.0.1 (2020-10-12) * feat(context): exporting context provider (#22) ([1dc67c0](https://github.com/readmeio/syntax-highlighter/commit/1dc67c0)), closes [#22](https://github.com/readmeio/syntax-highlighter/issues/22) * fix(readonly): wip styled output (#21) ([82b99ab](https://github.com/readmeio/syntax-highlighter/commit/82b99ab)), closes [#21](https://github.com/readmeio/syntax-highlighter/issues/21) #### 10.0.0 (2020-10-05) * fix(bundle): client and server compatibility (#20) ([bd4362b](https://github.com/readmeio/syntax-highlighter/commit/bd4362b)), closes [#20](https://github.com/readmeio/syntax-highlighter/issues/20) * chore(deps-dev): bump @commitlint/cli from 9.1.2 to 11.0.0 (#10) ([c466e8d](https://github.com/readmeio/syntax-highlighter/commit/c466e8d)), closes [#10](https://github.com/readmeio/syntax-highlighter/issues/10) * chore(deps-dev): bump @commitlint/config-conventional (#19) ([b700798](https://github.com/readmeio/syntax-highlighter/commit/b700798)), closes [#19](https://github.com/readmeio/syntax-highlighter/issues/19) * chore(deps-dev): bump css-loader from 3.6.0 to 4.3.0 (#16) ([e3c0c67](https://github.com/readmeio/syntax-highlighter/commit/e3c0c67)), closes [#16](https://github.com/readmeio/syntax-highlighter/issues/16) * chore(deps-dev): bump eslint from 7.8.0 to 7.10.0 (#11) ([d5e30e0](https://github.com/readmeio/syntax-highlighter/commit/d5e30e0)), closes [#11](https://github.com/readmeio/syntax-highlighter/issues/11) * chore(deps-dev): bump husky from 4.2.5 to 4.3.0 (#18) ([7e437fe](https://github.com/readmeio/syntax-highlighter/commit/7e437fe)), closes [#18](https://github.com/readmeio/syntax-highlighter/issues/18) * chore(deps-dev): bump prettier from 2.1.1 to 2.1.2 (#14) ([f3c572f](https://github.com/readmeio/syntax-highlighter/commit/f3c572f)), closes [#14](https://github.com/readmeio/syntax-highlighter/issues/14) * chore(deps-dev): bump sass-loader from 10.0.1 to 10.0.2 (#12) ([2e9a2e9](https://github.com/readmeio/syntax-highlighter/commit/2e9a2e9)), closes [#12](https://github.com/readmeio/syntax-highlighter/issues/12) * chore(deps-dev): bump terser-webpack-plugin from 4.1.0 to 4.2.2 (#15) ([9c0d3dc](https://github.com/readmeio/syntax-highlighter/commit/9c0d3dc)), closes [#15](https://github.com/readmeio/syntax-highlighter/issues/15) * chore(deps-dev): bump webpack from 4.44.1 to 4.44.2 (#17) ([828adca](https://github.com/readmeio/syntax-highlighter/commit/828adca)), closes [#17](https://github.com/readmeio/syntax-highlighter/issues/17) * chore(deps): bump actions/checkout from v2.3.2 to v2.3.3 (#9) ([6f1fda0](https://github.com/readmeio/syntax-highlighter/commit/6f1fda0)), closes [#9](https://github.com/readmeio/syntax-highlighter/issues/9) * chore(deps): bump codemirror from 5.57.0 to 5.58.1 (#13) ([7d7c7b3](https://github.com/readmeio/syntax-highlighter/commit/7d7c7b3)), closes [#13](https://github.com/readmeio/syntax-highlighter/issues/13) #### 9.0.1 (2020-09-16) * chore: line number dom elements updated to use span (#8) ([85aeb0e](https://github.com/readmeio/syntax-highlighter/commit/85aeb0e)), closes [#8](https://github.com/readmeio/syntax-highlighter/issues/8) * fix(highlighting): fixing an issue where overlay was not applied correctly (#7) ([df2236e](https://github.com/readmeio/syntax-highlighter/commit/df2236e)), closes [#7](https://github.com/readmeio/syntax-highlighter/issues/7) #### 9.0.0 (2020-09-15) * feat: code editor export (#5) ([3c2baa0](https://github.com/readmeio/syntax-highlighter/commit/3c2baa0)), closes [#5](https://github.com/readmeio/syntax-highlighter/issues/5) [#6](https://github.com/readmeio/syntax-highlighter/issues/6) * docs: adding a line break in the readme ([6819099](https://github.com/readmeio/syntax-highlighter/commit/6819099)) #### 8.0.3 (2020-09-02) * chore(deps): upgrading @readme/variable to 7.2.1 ([7ec28f3](https://github.com/readmeio/syntax-highlighter/commit/7ec28f3)) #### 8.0.2 (2020-09-02) * docs: updating a link in the contributing docs ([c539940](https://github.com/readmeio/syntax-highlighter/commit/c539940)) #### 8.0.1 (2020-09-01) * feat: setting up webpack (#4) ([fa651fc](https://github.com/readmeio/syntax-highlighter/commit/fa651fc)), closes [#4](https://github.com/readmeio/syntax-highlighter/issues/4) #### 8.0.0 (2020-08-31) > No breaking changes in this release, the package has just moved a new home at https://github.com/readmeio/syntax-highlighter! * chore: moving the package code into a src/ directory ([e78554e](https://github.com/readmeio/syntax-highlighter/commit/e78554e)) * chore: pulling the syntax-highlighter package over from the explorer repo ([296c7de](https://github.com/readmeio/syntax-highlighter/commit/296c7de)) * chore(deps-dev): bump eslint from 7.7.0 to 7.8.0 (#2) ([9789985](https://github.com/readmeio/syntax-highlighter/commit/9789985)), closes [#2](https://github.com/readmeio/syntax-highlighter/issues/2) * chore(deps-dev): bump jest from 26.1.0 to 26.4.2 (#3) ([c837dd7](https://github.com/readmeio/syntax-highlighter/commit/c837dd7)), closes [#3](https://github.com/readmeio/syntax-highlighter/issues/3) * chore(deps-dev): bump prettier from 2.0.5 to 2.1.1 (#1) ([0cfbe94](https://github.com/readmeio/syntax-highlighter/commit/0cfbe94)), closes [#1](https://github.com/readmeio/syntax-highlighter/issues/1) * docs: setting up changelog generation ([dcfe1db](https://github.com/readmeio/syntax-highlighter/commit/dcfe1db)) * ci: adding a ci workflow for running tests ([fe631bd](https://github.com/readmeio/syntax-highlighter/commit/fe631bd)) * ci: setting up dependabot ([a293e53](https://github.com/readmeio/syntax-highlighter/commit/a293e53)) * test: fixing broken tests ([6257159](https://github.com/readmeio/syntax-highlighter/commit/6257159)) --- components/Code/index.jsx | 4 ++-- components/Code/style.scss | 41 ++++++++++++++++++++++----------- components/CodeTabs/index.jsx | 4 ++-- package-lock.json | 43 ++++++++++++++++++++++++----------- package.json | 4 ++-- 5 files changed, 64 insertions(+), 32 deletions(-) diff --git a/components/Code/index.jsx b/components/Code/index.jsx index d744e4fc7..c66d2cec3 100644 --- a/components/Code/index.jsx +++ b/components/Code/index.jsx @@ -4,8 +4,8 @@ const PropTypes = require('prop-types'); // Only load CodeMirror in the browser, for SSR // apps. Necessary because of people like this: // https://github.com/codemirror/CodeMirror/issues/3701#issuecomment-164904534 -const syntaxHighlighter = typeof window !== 'undefined' ? require('@readme/syntax-highlighter') : false; -const canonicalLanguage = require('@readme/syntax-highlighter/canonical'); +const syntaxHighlighter = typeof window !== 'undefined' ? require('@readme/syntax-highlighter').default : false; +const { canonical: canonicalLanguage } = require('@readme/syntax-highlighter'); const copy = require('copy-to-clipboard'); function CopyCode({ code, rootClass = 'rdmd-code-copy', className = '' }) { diff --git a/components/Code/style.scss b/components/Code/style.scss index 486aaab61..4a77d181f 100644 --- a/components/Code/style.scss +++ b/components/Code/style.scss @@ -1,4 +1,5 @@ @mixin gfmCodeBaseStyles($background: #F6F8FA, $text: inherit) { + code, kbd, pre { @@ -21,20 +22,21 @@ background-color: $background; background-color: var(--md-code-background, $background); border-radius: 3px; + color: var(--md-code-text); font-size: 85%; margin: 0; - padding: .2em .4em - } + padding: .2em .4em; - code { - color: var(--md-code-text); + >div[class*="cm-"] { + display: inherit; + } } pre { word-wrap: normal } - pre > code { + pre>code { background: 0 0; border: 0; font-size: 100%; @@ -89,7 +91,7 @@ @mixin copyCodeButton { button.rdmd-code-copy { DISPLAY: none !important; // hide by default - + & { -webkit-appearance: unset; margin: .5em .6em 0 0; @@ -110,7 +112,9 @@ } &:not(:hover) { - &:before, &:after { + + &:before, + &:after { opacity: .66; } } @@ -127,12 +131,15 @@ box-shadow: inset 0 0 0 1px rgba(#8B8B8B, .5), inset 1px 4px 6px -2px rgba(0, 0, 0, .175); - &:before, &:after { + + &:before, + &:after { opacity: .75; } } - &:before, &:after { + &:before, + &:after { display: inline-block; font: normal normal normal 1em/1 "Font Awesome 5 Free", "FontAwesome"; text-rendering: auto; @@ -143,11 +150,13 @@ font-variant-ligatures: discretionary-ligatures; font-feature-settings: "liga"; } + &:before { content: "\e6c9"; font-weight: 800; transition: .3s .15s ease; } + &:after { // @todo why are these !important @rafe, you dumbell? content: "\e942" !important; @@ -162,16 +171,20 @@ &_copied { pointer-events: none; - &, * { + + &, + * { color: green !important; color: var(--md-code-text, green) !important; opacity: 1; } + &:before { transition: .3s 0s ease; transform: scale(.33); opacity: 0 !important; } + &:after { transition: .3s .15s ease; transform: translate(-50%, -50%) scale(1); @@ -179,11 +192,11 @@ } } } - + pre { position: relative; - > code { + >code { background: inherit; } @@ -198,7 +211,8 @@ & { overflow: hidden; padding: 0; - > code { + + >code { display: block !important; overflow: auto; padding: 1em; @@ -211,6 +225,7 @@ &:hover button.rdmd-code-copy:not(:hover) { transition-delay: .4s; } + &:not(:hover) button.rdmd-code-copy:not(.rdmd-code-copy_copied) { opacity: 0 !important; } diff --git a/components/CodeTabs/index.jsx b/components/CodeTabs/index.jsx index 32878c487..8b222c024 100644 --- a/components/CodeTabs/index.jsx +++ b/components/CodeTabs/index.jsx @@ -1,7 +1,7 @@ const React = require('react'); const PropTypes = require('prop-types'); -const upper = require('@readme/syntax-highlighter/uppercase'); +const { uppercase } = require('@readme/syntax-highlighter'); const CodeTabs = props => { const { attributes, children } = props; @@ -27,7 +27,7 @@ const CodeTabs = props => { /* istanbul ignore next */ return ( ); })} diff --git a/package-lock.json b/package-lock.json index e99e2e66d..1e4bd5956 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2572,23 +2572,35 @@ } }, "@readme/syntax-highlighter": { - "version": "6.15.2", - "resolved": "https://registry.npmjs.org/@readme/syntax-highlighter/-/syntax-highlighter-6.15.2.tgz", - "integrity": "sha512-3SlMBuNwff0zfdC+EoouE8aeEv/YH6bwPkFksvpx8OdZXdgx5XYM8CGF+JQbQjxz759KVQQqjOkwQpn24lbqcg==", + "version": "10.2.0", + "resolved": "https://registry.npmjs.org/@readme/syntax-highlighter/-/syntax-highlighter-10.2.0.tgz", + "integrity": "sha512-tL+0vyJIFrsCsLGfMPoslagxn9Jh6EtElgEM9qUrzTLfWqCToH7C1stTyqM3WDdQTRzun3lWsFRERuaFy3yxSg==", "requires": { - "@readme/variable": "^6.15.2", + "@readme/variable": "^7.2.1", "codemirror": "^5.48.2", - "react": "^16.4.2" + "prop-types": "^15.7.2", + "react-codemirror2": "^7.2.1" + }, + "dependencies": { + "@readme/variable": { + "version": "7.5.0", + "resolved": "https://registry.npmjs.org/@readme/variable/-/variable-7.5.0.tgz", + "integrity": "sha512-GC0zZA7DD6jT691x5yROUFteJd7j1pkIEQz5tlNodjZcEVaGghU/h9sLyw5KJlj+v3OYuHci69x3SJwbyt/Rug==", + "requires": { + "classnames": "^2.2.6", + "prop-types": "^15.7.2", + "react": "^16.4.2" + } + } } }, "@readme/variable": { - "version": "6.15.2", - "resolved": "https://registry.npmjs.org/@readme/variable/-/variable-6.15.2.tgz", - "integrity": "sha512-8WHdd14Uf01CZvRJsWn3YOdb9N+NvLqkqIzNt5uBiwYGuiFr18I5vlSQZfDBHDm1wCsxufMsV6Pr55qjC0cmVw==", + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/@readme/variable/-/variable-9.0.0.tgz", + "integrity": "sha512-aTXOFPfw2GuFzsl2k6XoUpeGs0T9ujmSWBerBhgYPewC/ouKLlnduFAYPjG+2aDHNL7amtJs+Ew6BSebKwyE2A==", "requires": { "classnames": "^2.2.6", - "prop-types": "^15.7.2", - "react": "^16.4.2" + "prop-types": "^15.7.2" } }, "@semantic-release/changelog": { @@ -4975,9 +4987,9 @@ "dev": true }, "codemirror": { - "version": "5.56.0", - "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.56.0.tgz", - "integrity": "sha512-MfKVmYgifXjQpLSgpETuih7A7WTTIsxvKfSLGseTY5+qt0E1UD1wblZGM6WLenORo8sgmf+3X+WTe2WF7mufyw==" + "version": "5.58.2", + "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.58.2.tgz", + "integrity": "sha512-K/hOh24cCwRutd1Mk3uLtjWzNISOkm4fvXiMO7LucCrqbh6aJDdtqUziim3MZUI6wOY0rvY1SlL1Ork01uMy6w==" }, "collapse-white-space": { "version": "1.0.6", @@ -17977,6 +17989,11 @@ "prop-types": "^15.6.2" } }, + "react-codemirror2": { + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/react-codemirror2/-/react-codemirror2-7.2.1.tgz", + "integrity": "sha512-t7YFmz1AXdlImgHXA9Ja0T6AWuopilub24jRaQdPVbzUJVNKIYuy3uCFZYa7CE5S3UW6SrSa5nAqVQvtzRF9gw==" + }, "react-dom": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz", diff --git a/package.json b/package.json index e410f4c15..1b35e0029 100644 --- a/package.json +++ b/package.json @@ -23,8 +23,8 @@ }, "dependencies": { "@readme/emojis": "^1.0.0", - "@readme/syntax-highlighter": "^6.15.2", - "@readme/variable": "^6.15.2", + "@readme/syntax-highlighter": "^10.2.0", + "@readme/variable": "^9.0.0", "copy-to-clipboard": "^3.3.1", "hast-util-sanitize": "^2.0.2", "hast-util-to-string": "^1.0.3",