From 5f2de69c157c05161e79dae07c58a68c16898d31 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 23 Oct 2020 10:18:25 -0700 Subject: [PATCH 1/9] Add syntax highlighting support for ruby and erb --- theme/package.json | 1 + theme/src/components/code.js | 11 +++++++++-- yarn.lock | 38 ++++++++++++++++++++++++++++++++++++ 3 files changed, 48 insertions(+), 2 deletions(-) diff --git a/theme/package.json b/theme/package.json index ec3e4d22..a25846b2 100644 --- a/theme/package.json +++ b/theme/package.json @@ -54,6 +54,7 @@ "pluralize": "^8.0.0", "preval.macro": "^3.0.0", "prism-react-renderer": "^0.1.7", + "prismjs": "^1.22.0", "react-addons-text-content": "^0.0.4", "react-element-to-jsx-string": "^14.0.3", "react-focus-on": "^3.3.0", diff --git a/theme/src/components/code.js b/theme/src/components/code.js index 9155136e..385ad694 100644 --- a/theme/src/components/code.js +++ b/theme/src/components/code.js @@ -1,10 +1,17 @@ -import {Absolute, Box, Relative, Text} from '@primer/components' -import Highlight, {defaultProps} from 'prism-react-renderer' +import { Absolute, Box, Relative, Text } from '@primer/components' +import Highlight, { defaultProps } from 'prism-react-renderer' +import Prism from "prism-react-renderer/prism" import githubTheme from 'prism-react-renderer/themes/github' import React from 'react' import ClipboardCopy from './clipboard-copy' import LiveCode from './live-code' +// Add syntax highlighting support for ruby and erb +// Reference: https://github.com/FormidableLabs/prism-react-renderer#faq +(typeof global !== "undefined" ? global : window).Prism = Prism; +require("prismjs/components/prism-ruby"); +require("prismjs/components/prism-erb"); + function Code({className, children, live, noinline}) { const language = className ? className.replace(/language-/, '') : '' const code = children.trim() diff --git a/yarn.lock b/yarn.lock index 0a69c445..741e0526 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4423,6 +4423,15 @@ cli-width@^3.0.0: resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6" integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw== +clipboard@^2.0.0: + version "2.0.6" + resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.6.tgz#52921296eec0fdf77ead1749421b21c968647376" + integrity sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg== + dependencies: + good-listener "^1.2.2" + select "^1.1.2" + tiny-emitter "^2.0.0" + clipboardy@^2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/clipboardy/-/clipboardy-2.3.0.tgz#3c2903650c68e46a91b388985bc2774287dba290" @@ -5468,6 +5477,11 @@ delayed-stream@~1.0.0: resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619" integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk= +delegate@^3.1.2: + version "3.2.0" + resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166" + integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw== + delegates@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a" @@ -7763,6 +7777,13 @@ globule@^1.0.0: lodash "~4.17.10" minimatch "~3.0.2" +good-listener@^1.2.2: + version "1.2.2" + resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50" + integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA= + dependencies: + delegate "^3.1.2" + got@8.3.2: version "8.3.2" resolved "https://registry.yarnpkg.com/got/-/got-8.3.2.tgz#1d23f64390e97f776cac52e5b936e5f514d2e937" @@ -12476,6 +12497,13 @@ prism-react-renderer@^1.0.1: resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.1.1.tgz#1c1be61b1eb9446a146ca7a50b7bcf36f2a70a44" integrity sha512-MgMhSdHuHymNRqD6KM3eGS0PNqgK9q4QF5P0yoQQvpB6jNjeSAi3jcSAz0Sua/t9fa4xDOMar9HJbLa08gl9ug== +prismjs@^1.22.0: + version "1.22.0" + resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.22.0.tgz#73c3400afc58a823dd7eed023f8e1ce9fd8977fa" + integrity sha512-lLJ/Wt9yy0AiSYBf212kK3mM5L8ycwlyTlSxHBAneXLR0nzFMlZ5y7riFPF3E33zXOF2IH95xdY5jIyZbM9z/w== + optionalDependencies: + clipboard "^2.0.0" + process-nextick-args@~2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2" @@ -13913,6 +13941,11 @@ select-hose@^2.0.0: resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca" integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo= +select@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d" + integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0= + selfsigned@^1.10.7: version "1.10.7" resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.7.tgz#da5819fd049d5574f28e88a9bcc6dbc6e6f3906b" @@ -15243,6 +15276,11 @@ timsort@^0.3.0: resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4" integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q= +tiny-emitter@^2.0.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423" + integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q== + tiny-warning@^1.0.2: version "1.0.3" resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" From 60a7f4a3a91eda6fec83600b8886f9d0e19029ea Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 23 Oct 2020 10:29:22 -0700 Subject: [PATCH 2/9] Add a changeset --- .changeset/forty-cameras-peel.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/forty-cameras-peel.md diff --git a/.changeset/forty-cameras-peel.md b/.changeset/forty-cameras-peel.md new file mode 100644 index 00000000..3aa81db2 --- /dev/null +++ b/.changeset/forty-cameras-peel.md @@ -0,0 +1,5 @@ +--- +"@primer/gatsby-theme-doctocat": minor +--- + +Add syntax highlighting support for `ruby` and `erb` code examples From 561397fa6c9fb334a5e7297d5d1cc87945319abf Mon Sep 17 00:00:00 2001 From: Manuel Puyol Date: Wed, 17 Feb 2021 11:08:01 -0600 Subject: [PATCH 3/9] use custom Prism --- theme/src/components/code.js | 9 ++------- theme/src/prism.js | 8 ++++++++ 2 files changed, 10 insertions(+), 7 deletions(-) create mode 100644 theme/src/prism.js diff --git a/theme/src/components/code.js b/theme/src/components/code.js index 385ad694..c7a16ca4 100644 --- a/theme/src/components/code.js +++ b/theme/src/components/code.js @@ -1,17 +1,11 @@ import { Absolute, Box, Relative, Text } from '@primer/components' import Highlight, { defaultProps } from 'prism-react-renderer' -import Prism from "prism-react-renderer/prism" +import Prism from '../prism' import githubTheme from 'prism-react-renderer/themes/github' import React from 'react' import ClipboardCopy from './clipboard-copy' import LiveCode from './live-code' -// Add syntax highlighting support for ruby and erb -// Reference: https://github.com/FormidableLabs/prism-react-renderer#faq -(typeof global !== "undefined" ? global : window).Prism = Prism; -require("prismjs/components/prism-ruby"); -require("prismjs/components/prism-erb"); - function Code({className, children, live, noinline}) { const language = className ? className.replace(/language-/, '') : '' const code = children.trim() @@ -27,6 +21,7 @@ function Code({className, children, live, noinline}) { Date: Wed, 17 Feb 2021 11:48:40 -0600 Subject: [PATCH 4/9] manually require languages --- theme/src/prism.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/theme/src/prism.js b/theme/src/prism.js index 160d2b94..0b6db01d 100644 --- a/theme/src/prism.js +++ b/theme/src/prism.js @@ -3,6 +3,22 @@ import Prism from 'prismjs/components/prism-core' // Add syntax highlighting support for ruby and erb // Reference: https://github.com/FormidableLabs/prism-react-renderer#faq (typeof global !== "undefined" ? global : window).Prism = Prism -require("prismjs/components/"); + +// Core languages +require("prismjs/components/prism-clike"); +require("prismjs/components/prism-markup"); +require("prismjs/components/prism-markup-templating"); + +// Supported languages +require("prismjs/components/prism-bash"); +require("prismjs/components/prism-diff"); +require("prismjs/components/prism-erb"); +require("prismjs/components/prism-javascript"); +require("prismjs/components/prism-json"); +require("prismjs/components/prism-jsx"); +require("prismjs/components/prism-markdown"); +require("prismjs/components/prism-ruby"); +require("prismjs/components/prism-yaml"); + export default Prism From 268b0123d8c34659c8b9f11f9b7faac0bac68ab0 Mon Sep 17 00:00:00 2001 From: Manuel Puyol Date: Wed, 17 Feb 2021 11:55:18 -0600 Subject: [PATCH 5/9] correct require order --- theme/src/prism.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/theme/src/prism.js b/theme/src/prism.js index 0b6db01d..072c733c 100644 --- a/theme/src/prism.js +++ b/theme/src/prism.js @@ -11,14 +11,21 @@ require("prismjs/components/prism-markup-templating"); // Supported languages require("prismjs/components/prism-bash"); +require("prismjs/components/prism-css"); require("prismjs/components/prism-diff"); -require("prismjs/components/prism-erb"); -require("prismjs/components/prism-javascript"); +require("prismjs/components/prism-go"); require("prismjs/components/prism-json"); -require("prismjs/components/prism-jsx"); require("prismjs/components/prism-markdown"); -require("prismjs/components/prism-ruby"); require("prismjs/components/prism-yaml"); +// JS like +require("prismjs/components/prism-javascript"); +require("prismjs/components/prism-jsx"); +require("prismjs/components/prism-typescript"); +require("prismjs/components/prism-tsx"); + +// Ruby like +require("prismjs/components/prism-ruby"); +require("prismjs/components/prism-erb"); export default Prism From 23201f5f897b686bb4ddb80b5b7d0f323357a32c Mon Sep 17 00:00:00 2001 From: Manuel Puyol Date: Wed, 17 Feb 2021 11:57:23 -0600 Subject: [PATCH 6/9] use import instead of require --- theme/src/prism.js | 36 ++++++++++++++++-------------------- 1 file changed, 16 insertions(+), 20 deletions(-) diff --git a/theme/src/prism.js b/theme/src/prism.js index 072c733c..cdb35199 100644 --- a/theme/src/prism.js +++ b/theme/src/prism.js @@ -1,31 +1,27 @@ import Prism from 'prismjs/components/prism-core' -// Add syntax highlighting support for ruby and erb -// Reference: https://github.com/FormidableLabs/prism-react-renderer#faq -(typeof global !== "undefined" ? global : window).Prism = Prism - // Core languages -require("prismjs/components/prism-clike"); -require("prismjs/components/prism-markup"); -require("prismjs/components/prism-markup-templating"); +import 'prismjs/components/prism-clike'; +import 'prismjs/components/prism-markup'; +import 'prismjs/components/prism-markup-templating'; // Supported languages -require("prismjs/components/prism-bash"); -require("prismjs/components/prism-css"); -require("prismjs/components/prism-diff"); -require("prismjs/components/prism-go"); -require("prismjs/components/prism-json"); -require("prismjs/components/prism-markdown"); -require("prismjs/components/prism-yaml"); +import 'prismjs/components/prism-bash'; +import 'prismjs/components/prism-css'; +import 'prismjs/components/prism-diff'; +import 'prismjs/components/prism-go'; +import 'prismjs/components/prism-json'; +import 'prismjs/components/prism-markdown'; +import 'prismjs/components/prism-yaml'; // JS like -require("prismjs/components/prism-javascript"); -require("prismjs/components/prism-jsx"); -require("prismjs/components/prism-typescript"); -require("prismjs/components/prism-tsx"); +import 'prismjs/components/prism-javascript'; +import 'prismjs/components/prism-jsx'; +import 'prismjs/components/prism-typescript'; +import 'prismjs/components/prism-tsx'; // Ruby like -require("prismjs/components/prism-ruby"); -require("prismjs/components/prism-erb"); +import 'prismjs/components/prism-ruby'; +import 'prismjs/components/prism-erb'; export default Prism From eac440b2032ddb544fbf4e8b5dfd1426893aea2e Mon Sep 17 00:00:00 2001 From: Manuel Puyol Date: Fri, 19 Feb 2021 16:08:08 -0600 Subject: [PATCH 7/9] update prism-react-renderer to v1.1.1 --- theme/package.json | 2 +- yarn.lock | 7 +------ 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/theme/package.json b/theme/package.json index a25846b2..0620d8ec 100644 --- a/theme/package.json +++ b/theme/package.json @@ -53,7 +53,7 @@ "pkg-up": "^3.1.0", "pluralize": "^8.0.0", "preval.macro": "^3.0.0", - "prism-react-renderer": "^0.1.7", + "prism-react-renderer": "^1.1.1", "prismjs": "^1.22.0", "react-addons-text-content": "^0.0.4", "react-element-to-jsx-string": "^14.0.3", diff --git a/yarn.lock b/yarn.lock index 741e0526..54a6c1cf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12487,12 +12487,7 @@ preval.macro@^3.0.0: dependencies: babel-plugin-preval "^3.0.0" -prism-react-renderer@^0.1.7: - version "0.1.7" - resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-0.1.7.tgz#dc273d0cb6e4a498ba0775094e9a8b01a3ad2eaa" - integrity sha512-EhnM0sYfLK103ASK0ViSv0rta//ZGB0dBA9TiFyOvA+zOj5peLmGEG01sLEDwl9sMe+gSqncInafBe1VFTCMvA== - -prism-react-renderer@^1.0.1: +prism-react-renderer@^1.0.1, prism-react-renderer@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.1.1.tgz#1c1be61b1eb9446a146ca7a50b7bcf36f2a70a44" integrity sha512-MgMhSdHuHymNRqD6KM3eGS0PNqgK9q4QF5P0yoQQvpB6jNjeSAi3jcSAz0Sua/t9fa4xDOMar9HJbLa08gl9ug== From 078e0ae51327f801bbae41fff1611e2523421d9e Mon Sep 17 00:00:00 2001 From: Manuel Puyol Date: Mon, 22 Feb 2021 09:29:31 -0600 Subject: [PATCH 8/9] update prism-react-renderer to v1.2.0 --- theme/package.json | 2 +- yarn.lock | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/theme/package.json b/theme/package.json index 0620d8ec..095aafbe 100644 --- a/theme/package.json +++ b/theme/package.json @@ -53,7 +53,7 @@ "pkg-up": "^3.1.0", "pluralize": "^8.0.0", "preval.macro": "^3.0.0", - "prism-react-renderer": "^1.1.1", + "prism-react-renderer": "^1.2.0", "prismjs": "^1.22.0", "react-addons-text-content": "^0.0.4", "react-element-to-jsx-string": "^14.0.3", diff --git a/yarn.lock b/yarn.lock index 54a6c1cf..37e26635 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12487,11 +12487,16 @@ preval.macro@^3.0.0: dependencies: babel-plugin-preval "^3.0.0" -prism-react-renderer@^1.0.1, prism-react-renderer@^1.1.1: +prism-react-renderer@^1.0.1: version "1.1.1" resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.1.1.tgz#1c1be61b1eb9446a146ca7a50b7bcf36f2a70a44" integrity sha512-MgMhSdHuHymNRqD6KM3eGS0PNqgK9q4QF5P0yoQQvpB6jNjeSAi3jcSAz0Sua/t9fa4xDOMar9HJbLa08gl9ug== +prism-react-renderer@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.2.0.tgz#5ad4f90c3e447069426c8a53a0eafde60909cdf4" + integrity sha512-GHqzxLYImx1iKN1jJURcuRoA/0ygCcNhfGw1IT8nPIMzarmKQ3Nc+JcG0gi8JXQzuh0C5ShE4npMIoqNin40hg== + prismjs@^1.22.0: version "1.22.0" resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.22.0.tgz#73c3400afc58a823dd7eed023f8e1ce9fd8977fa" From 5709e7afab58e3dbbd501d5e929c0ac192bb0007 Mon Sep 17 00:00:00 2001 From: Manuel Puyol Date: Mon, 22 Feb 2021 09:48:56 -0600 Subject: [PATCH 9/9] add custom GH theme --- theme/src/components/code.js | 2 +- theme/src/components/live-code.js | 2 +- theme/src/github.js | 74 +++++++++++++++++++++++++++++++ 3 files changed, 76 insertions(+), 2 deletions(-) create mode 100644 theme/src/github.js diff --git a/theme/src/components/code.js b/theme/src/components/code.js index c7a16ca4..75cbc056 100644 --- a/theme/src/components/code.js +++ b/theme/src/components/code.js @@ -1,7 +1,7 @@ import { Absolute, Box, Relative, Text } from '@primer/components' import Highlight, { defaultProps } from 'prism-react-renderer' import Prism from '../prism' -import githubTheme from 'prism-react-renderer/themes/github' +import githubTheme from '../github' import React from 'react' import ClipboardCopy from './clipboard-copy' import LiveCode from './live-code' diff --git a/theme/src/components/live-code.js b/theme/src/components/live-code.js index 47b13f6f..40365055 100644 --- a/theme/src/components/live-code.js +++ b/theme/src/components/live-code.js @@ -1,6 +1,6 @@ import {Absolute, BorderBox, Flex, Relative, Text} from '@primer/components' import htmlReactParser from 'html-react-parser' -import githubTheme from 'prism-react-renderer/themes/github' +import githubTheme from '../github' import React, {useState} from 'react' import reactElementToJsxString from 'react-element-to-jsx-string' import {LiveEditor, LiveError, LivePreview, LiveProvider} from 'react-live' diff --git a/theme/src/github.js b/theme/src/github.js new file mode 100644 index 00000000..0b99794a --- /dev/null +++ b/theme/src/github.js @@ -0,0 +1,74 @@ +export default { + plain: { + color: "#393A34", + backgroundColor: "#f6f8fa", + }, + styles: [ + { + types: ["comment", "prolog", "doctype", "cdata"], + style: { + color: "#999988", + fontStyle: "italic", + }, + }, + { + types: ["namespace"], + style: { + opacity: 0.7, + }, + }, + { + types: ["string", "attr-value"], + style: { + color: "#e3116c", + }, + }, + { + types: ["punctuation", "operator"], + style: { + color: "#393A34", + }, + }, + { + types: [ + "entity", + "url", + "symbol", + "number", + "boolean", + "variable", + "constant", + "property", + "regex", + "inserted", + ], + style: { + color: "#36acaa", + }, + }, + { + types: ["atrule", "keyword", "attr-name", "selector"], + style: { + color: "#00a4db", + }, + }, + { + types: ["function", "deleted", "tag"], + style: { + color: "#d73a49", + }, + }, + { + types: ["function-variable"], + style: { + color: "#6f42c1", + }, + }, + { + types: ["tag", "selector", "keyword"], + style: { + color: "#00009f", + }, + }, + ], +};