From d69da699244d5ada135251475ec1592560ed72a9 Mon Sep 17 00:00:00 2001 From: teikjun Date: Sat, 12 Sep 2020 17:34:14 +0800 Subject: [PATCH 1/5] add additional languages for prism --- website/docusaurus.config.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 4cbd8685fd2..b21eda36ee6 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -360,6 +360,11 @@ module.exports = { 'Black Lives Matter. Support the Equal Justice Initiative.', backgroundColor: '#fafbfc', // Defaults to `#fff`. }, + prism: { + defaultLanguage: 'jsx', + theme: require('./core/theme'), + additionalLanguages: ['objectivec', 'swift', 'java'], + }, navbar: { title: 'React Native', logo: { From 141b63bbb413ea499319606f0d736b192df606d8 Mon Sep 17 00:00:00 2001 From: teikjun Date: Sat, 12 Sep 2020 17:35:23 +0800 Subject: [PATCH 2/5] set up custom theme for prism --- website/core/theme.js | 107 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 107 insertions(+) create mode 100644 website/core/theme.js diff --git a/website/core/theme.js b/website/core/theme.js new file mode 100644 index 00000000000..96db89d3bd4 --- /dev/null +++ b/website/core/theme.js @@ -0,0 +1,107 @@ +var theme = { + plain: { + color: '#d6deeb', + backgroundColor: '#011627', + }, + styles: [ + { + types: ['changed'], + style: { + color: 'rgb(162, 191, 252)', + fontStyle: 'italic', + }, + }, + { + types: ['deleted'], + style: { + color: 'rgba(239, 83, 80, 0.56)', + fontStyle: 'italic', + }, + }, + { + types: ['inserted', 'attr-name'], + style: { + color: 'rgb(173, 219, 103)', + fontStyle: 'italic', + }, + }, + { + types: ['comment'], + style: { + color: 'rgb(99, 119, 119)', + fontStyle: 'italic', + }, + }, + { + types: ['string', 'url'], + style: { + color: 'rgb(173, 219, 103)', + }, + }, + { + types: ['variable'], + style: { + color: 'rgb(214, 222, 235)', + }, + }, + { + types: ['number'], + style: { + color: 'rgb(247, 140, 108)', + }, + }, + { + types: ['builtin', 'char', 'constant', 'function'], + style: { + color: 'rgb(130, 170, 255)', + }, + }, + { + // This was manually added after the auto-generation + // so that punctuations are not italicised + types: ['punctuation'], + style: { + color: 'rgb(199, 146, 234)', + }, + }, + { + types: ['selector', 'doctype'], + style: { + color: 'rgb(199, 146, 234)', + fontStyle: 'italic', + }, + }, + { + types: ['class-name'], + style: { + color: 'rgb(255, 203, 139)', + }, + }, + { + types: ['tag', 'operator', 'keyword'], + style: { + color: 'rgb(127, 219, 202)', + }, + }, + { + types: ['boolean'], + style: { + color: 'rgb(255, 88, 116)', + }, + }, + { + types: ['property'], + style: { + color: 'rgb(128, 203, 196)', + }, + }, + { + types: ['namespace'], + style: { + color: 'rgb(178, 204, 214)', + }, + }, + ], +}; + +module.exports = theme; From 890d3d2832ae7f482bfdaac46ea2a2c1c4d66624 Mon Sep 17 00:00:00 2001 From: teikjun Date: Sun, 13 Sep 2020 00:17:41 +0800 Subject: [PATCH 3/5] customize according to solarized dark theme --- website/core/theme.js | 85 +++++++++++++++++-------------------------- 1 file changed, 34 insertions(+), 51 deletions(-) diff --git a/website/core/theme.js b/website/core/theme.js index 96db89d3bd4..e08b89fd172 100644 --- a/website/core/theme.js +++ b/website/core/theme.js @@ -1,104 +1,87 @@ var theme = { plain: { - color: '#d6deeb', - backgroundColor: '#011627', + color: '#839496', + background: '#282C34', }, styles: [ { - types: ['changed'], + types: ['attr-name', 'comment', 'prolog', 'doctype', 'cdata'], style: { - color: 'rgb(162, 191, 252)', - fontStyle: 'italic', - }, - }, - { - types: ['deleted'], - style: { - color: 'rgba(239, 83, 80, 0.56)', - fontStyle: 'italic', - }, - }, - { - types: ['inserted', 'attr-name'], - style: { - color: 'rgb(173, 219, 103)', - fontStyle: 'italic', + color: '#93a1a1' /* base1 */, }, }, { - types: ['comment'], - style: { - color: 'rgb(99, 119, 119)', - fontStyle: 'italic', - }, - }, - { - types: ['string', 'url'], + types: ['punctuation'], style: { - color: 'rgb(173, 219, 103)', + color: '#657b83' /* base00 */, }, }, { - types: ['variable'], + types: ['namespace'], style: { - color: 'rgb(214, 222, 235)', + opacity: 0.7, }, }, { - types: ['number'], + types: ['property', 'boolean', 'number', 'constant', 'symbol', 'deleted'], style: { - color: 'rgb(247, 140, 108)', + color: '#d33682' /* magenta */, }, }, { - types: ['builtin', 'char', 'constant', 'function'], + types: [ + 'attr-value', + 'selector', + 'string', + 'char', + 'builtin', + 'url', + 'inserted', + ], style: { - color: 'rgb(130, 170, 255)', + color: '#2aa198' /* cyan */, }, }, { - // This was manually added after the auto-generation - // so that punctuations are not italicised - types: ['punctuation'], + types: ['entity'], style: { - color: 'rgb(199, 146, 234)', + color: '#2aa198' /* cyan */, }, }, { - types: ['selector', 'doctype'], + types: ['atrule', 'keyword'], style: { - color: 'rgb(199, 146, 234)', - fontStyle: 'italic', + color: '#859900' /* yellow */, }, }, { - types: ['class-name'], + types: ['tag', 'function'], style: { - color: 'rgb(255, 203, 139)', + color: '#268bd2' /* blue */, }, }, { - types: ['tag', 'operator', 'keyword'], + types: ['regex', 'important', 'variable'], style: { - color: 'rgb(127, 219, 202)', + color: '#cb4b16' /* orange */, }, }, { - types: ['boolean'], + types: ['important', 'bold'], style: { - color: 'rgb(255, 88, 116)', + fontWeight: 'bold', }, }, { - types: ['property'], + types: ['italic'], style: { - color: 'rgb(128, 203, 196)', + fontStyle: 'italic', }, }, { - types: ['namespace'], + types: ['entity'], style: { - color: 'rgb(178, 204, 214)', + cursor: 'help', }, }, ], From 0fb958b7cbe4223138158aa4c15416351bbee089 Mon Sep 17 00:00:00 2001 From: teikjun Date: Sun, 13 Sep 2020 01:05:08 +0800 Subject: [PATCH 4/5] add custom syntax highlighting from react-native --- website/core/theme.js | 78 ++++++++++++++++++++++++++++++++----------- 1 file changed, 58 insertions(+), 20 deletions(-) diff --git a/website/core/theme.js b/website/core/theme.js index e08b89fd172..7a6d3845a6e 100644 --- a/website/core/theme.js +++ b/website/core/theme.js @@ -1,15 +1,24 @@ var theme = { plain: { - color: '#839496', + color: '#FFFFFF', background: '#282C34', }, styles: [ + // other modifications + { + types: ['property'], + style: { + color: '#2aa198', + }, + }, + // solarized-dark theme { types: ['attr-name', 'comment', 'prolog', 'doctype', 'cdata'], style: { - color: '#93a1a1' /* base1 */, + color: '#93a1a1', }, }, + { types: ['punctuation'], style: { @@ -23,21 +32,13 @@ var theme = { }, }, { - types: ['property', 'boolean', 'number', 'constant', 'symbol', 'deleted'], + types: ['deleted'], style: { color: '#d33682' /* magenta */, }, }, { - types: [ - 'attr-value', - 'selector', - 'string', - 'char', - 'builtin', - 'url', - 'inserted', - ], + types: ['selector', 'char', 'builtin', 'url', 'inserted'], style: { color: '#2aa198' /* cyan */, }, @@ -49,19 +50,13 @@ var theme = { }, }, { - types: ['atrule', 'keyword'], + types: ['atrule'], style: { color: '#859900' /* yellow */, }, }, { - types: ['tag', 'function'], - style: { - color: '#268bd2' /* blue */, - }, - }, - { - types: ['regex', 'important', 'variable'], + types: ['important', 'variable'], style: { color: '#cb4b16' /* orange */, }, @@ -84,6 +79,49 @@ var theme = { cursor: 'help', }, }, + // react-native theme + { + types: ['attr-name', 'keyword'], + style: { + color: '#c5a5c5', + }, + }, + { + types: ['string', 'regex', 'attr-value'], + style: { + color: '#8dc891', + }, + }, + { + types: ['number', 'constant', 'symbol'], + style: { + color: '#5a9bcf', + }, + }, + { + types: ['boolean'], + style: { + color: '#ff8b50', + }, + }, + { + types: ['class-name'], + style: { + color: '#fac863', + }, + }, + { + types: ['function'], + style: { + color: '#79b6f2', + }, + }, + { + types: ['operator', 'tag'], + style: { + color: '#fc929e', + }, + }, ], }; From ecd277b236637db29ff008369170e5cf54ecda13 Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Mon, 14 Sep 2020 14:15:16 +0200 Subject: [PATCH 5/5] rename theme file, add Kotlin, fix one ObjC block --- docs/native-components-ios.md | 2 +- website/core/{theme.js => PrismTheme.js} | 0 website/docusaurus.config.js | 4 ++-- website/versioned_docs/version-0.60/native-components-ios.md | 2 +- website/versioned_docs/version-0.61/native-components-ios.md | 2 +- website/versioned_docs/version-0.62/native-components-ios.md | 2 +- website/versioned_docs/version-0.63/native-components-ios.md | 2 +- 7 files changed, 7 insertions(+), 7 deletions(-) rename website/core/{theme.js => PrismTheme.js} (100%) diff --git a/docs/native-components-ios.md b/docs/native-components-ios.md index 470c05edfa6..d83b8c23c61 100644 --- a/docs/native-components-ios.md +++ b/docs/native-components-ios.md @@ -274,7 +274,7 @@ Until now we've only returned a `MKMapView` instance from our manager's `-(UIVie Note that all `RCTBubblingEventBlock` must be prefixed with `on`. Next, declare an event handler property on `RNTMapManager`, make it a delegate for all the views it exposes, and forward events to JS by calling the event handler block from the native view. -```objectivec{9,17,31-48} +```objectivec // RNTMapManager.m #import diff --git a/website/core/theme.js b/website/core/PrismTheme.js similarity index 100% rename from website/core/theme.js rename to website/core/PrismTheme.js diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index b21eda36ee6..c6cfb3136e5 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -362,8 +362,8 @@ module.exports = { }, prism: { defaultLanguage: 'jsx', - theme: require('./core/theme'), - additionalLanguages: ['objectivec', 'swift', 'java'], + theme: require('./core/PrismTheme'), + additionalLanguages: ['java', 'kotlin', 'objectivec', 'swift'], }, navbar: { title: 'React Native', diff --git a/website/versioned_docs/version-0.60/native-components-ios.md b/website/versioned_docs/version-0.60/native-components-ios.md index 4eb358ac9e8..771f1b6ebb0 100644 --- a/website/versioned_docs/version-0.60/native-components-ios.md +++ b/website/versioned_docs/version-0.60/native-components-ios.md @@ -274,7 +274,7 @@ Until now we've only returned a `MKMapView` instance from our manager's `-(UIVie Note that all `RCTBubblingEventBlock` must be prefixed with `on`. Next, declare an event handler property on `RNTMapManager`, make it a delegate for all the views it exposes, and forward events to JS by calling the event handler block from the native view. -```objectivec{9,17,31-48} +```objectivec // RNTMapManager.m #import diff --git a/website/versioned_docs/version-0.61/native-components-ios.md b/website/versioned_docs/version-0.61/native-components-ios.md index e6e63726b2a..a6f52033baf 100644 --- a/website/versioned_docs/version-0.61/native-components-ios.md +++ b/website/versioned_docs/version-0.61/native-components-ios.md @@ -274,7 +274,7 @@ Until now we've only returned a `MKMapView` instance from our manager's `-(UIVie Note that all `RCTBubblingEventBlock` must be prefixed with `on`. Next, declare an event handler property on `RNTMapManager`, make it a delegate for all the views it exposes, and forward events to JS by calling the event handler block from the native view. -```objectivec{9,17,31-48} +```objectivec // RNTMapManager.m #import diff --git a/website/versioned_docs/version-0.62/native-components-ios.md b/website/versioned_docs/version-0.62/native-components-ios.md index 470c05edfa6..d83b8c23c61 100644 --- a/website/versioned_docs/version-0.62/native-components-ios.md +++ b/website/versioned_docs/version-0.62/native-components-ios.md @@ -274,7 +274,7 @@ Until now we've only returned a `MKMapView` instance from our manager's `-(UIVie Note that all `RCTBubblingEventBlock` must be prefixed with `on`. Next, declare an event handler property on `RNTMapManager`, make it a delegate for all the views it exposes, and forward events to JS by calling the event handler block from the native view. -```objectivec{9,17,31-48} +```objectivec // RNTMapManager.m #import diff --git a/website/versioned_docs/version-0.63/native-components-ios.md b/website/versioned_docs/version-0.63/native-components-ios.md index 470c05edfa6..d83b8c23c61 100644 --- a/website/versioned_docs/version-0.63/native-components-ios.md +++ b/website/versioned_docs/version-0.63/native-components-ios.md @@ -274,7 +274,7 @@ Until now we've only returned a `MKMapView` instance from our manager's `-(UIVie Note that all `RCTBubblingEventBlock` must be prefixed with `on`. Next, declare an event handler property on `RNTMapManager`, make it a delegate for all the views it exposes, and forward events to JS by calling the event handler block from the native view. -```objectivec{9,17,31-48} +```objectivec // RNTMapManager.m #import