feat(website): improve prism themes (#6214)

* feat(website): modify Prism dark theme

* update

* Use vsDark

* update crowdin config

* fix light theme as well

* revert comment changes

crowdin-v2.yaml

@@ -2,9 +2,9 @@
 # Your Crowdin credentials
 #
 project_id: '428890'
-api_token_env: 'CROWDIN_PERSONAL_TOKEN'
+api_token_env: CROWDIN_PERSONAL_TOKEN
 # base_path: '.'
-# base_url: 'https://api.crowdin.com'
+# base_url: https://api.crowdin.com
 
 #
 # Choose file structure in Crowdin
@@ -18,45 +18,31 @@ preserve_hierarchy: true
 # Note: &/* is Yaml anchor syntax: https://support.atlassian.com/bitbucket-cloud/docs/yaml-anchors/
 languages_mapping: &languages_mapping
   two_letters_code:
-    'pt-BR': 'pt-BR'
+    pt-BR: pt-BR
 
 #
 # Files configuration
 #
 files:
-  [
+  - source: /website/i18n/en/**/*
-    {
+    translation: /website/i18n/%two_letters_code%/**/%original_file_name%
-      source: '/website/i18n/en/**/*',
+    languages_mapping: *languages_mapping
-      translation: '/website/i18n/%two_letters_code%/**/%original_file_name%',
+  - source: /website/docs/**/*
-      languages_mapping: *languages_mapping,
+    translation: /website/i18n/%two_letters_code%/docusaurus-plugin-content-docs/current/**/%original_file_name%
-    },
+    languages_mapping: *languages_mapping
-    {
+  - source: /website/community/**/*
-      source: '/website/docs/**/*',
+    translation: /website/i18n/%two_letters_code%/docusaurus-plugin-content-docs-community/current/**/%original_file_name%
-      translation: '/website/i18n/%two_letters_code%/docusaurus-plugin-content-docs/current/**/%original_file_name%',
+    languages_mapping: *languages_mapping
-      languages_mapping: *languages_mapping,
+  - source: /website/versioned_docs/**/*
-    },
+    translation: /website/i18n/%two_letters_code%/docusaurus-plugin-content-docs/**/%original_file_name%
-    {
+    languages_mapping: *languages_mapping
-      source: '/website/community/**/*',
+  - source: /website/blog/**/*
-      translation: '/website/i18n/%two_letters_code%/docusaurus-plugin-content-docs-community/current/**/%original_file_name%',
+    translation: /website/i18n/%two_letters_code%/docusaurus-plugin-content-blog/**/%original_file_name%
-      languages_mapping: *languages_mapping,
+    languages_mapping: *languages_mapping
-    },
+  - source: /website/src/pages/**/*
-    {
+    translation: /website/i18n/%two_letters_code%/docusaurus-plugin-content-pages/**/%original_file_name%
-      source: '/website/versioned_docs/**/*',
+    ignore: [/**/*.js, /**/*.jsx, /**/*.ts, /**/*.tsx, /**/*.css]
-      translation: '/website/i18n/%two_letters_code%/docusaurus-plugin-content-docs/**/%original_file_name%',
+    languages_mapping: *languages_mapping
-      languages_mapping: *languages_mapping,
-    },
-    {
-      source: '/website/blog/**/*',
-      translation: '/website/i18n/%two_letters_code%/docusaurus-plugin-content-blog/**/%original_file_name%',
-      languages_mapping: *languages_mapping,
-    },
-    {
-      source: '/website/src/pages/**/*',
-      translation: '/website/i18n/%two_letters_code%/docusaurus-plugin-content-pages/**/%original_file_name%',
-      ignore: ['/**/*.js', '/**/*.jsx', '/**/*.ts', '/**/*.tsx', '/**/*.css'],
-      languages_mapping: *languages_mapping,
-    },
-  ]
 #
 # Source files filter
 # e.g. "/resources/en/*.json"

website/docs/guides/creating-pages.md

@@ -125,7 +125,7 @@ my-website
 │   └── pages
 │       ├── styles.module.css
 │       ├── index.js
-|       ├──_ignored.js
+│       ├──_ignored.js
 │       └── support
 │           ├── index.js
 │           └── styles.module.css

website/docs/guides/markdown-features/markdown-features-assets.mdx

@@ -26,13 +26,13 @@ You can display images in three different ways: Markdown syntax, CJS require, or
 
 Display images using simple Markdown syntax:
 
-```mdx
+```md
 ![Example banner](./assets/docusaurus-asset-example-banner.png)
 ```
 
 Display images using inline CommonJS `require` in JSX image tag:
 
-```mdx
+```jsx
 <img
   src={require('./assets/docusaurus-asset-example-banner.png').default}
   alt="Example banner"
@@ -41,10 +41,10 @@ Display images using inline CommonJS `require` in JSX image tag:
 
 Display images using ES `import` syntax and JSX image tag:
 
-```mdx
+```jsx
 import myImageUrl from './assets/docusaurus-asset-example-banner.png';
 
-<img src={myImageUrl} alt="Example banner" />
+<img src={myImageUrl} alt="Example banner" />;
 ```
 
 This results in displaying the image:
@@ -65,14 +65,10 @@ If you are using [@docusaurus/plugin-ideal-image](../../api/plugins/plugin-ideal
 
 In the same way, you can link to existing assets by requiring them and using the returned url in videos, links, etc.
 
-```mdx
+```md
 # My Markdown page
 
-<a
+<a target="\_blank" href={require('./assets/docusaurus-asset-example.docx').default}> Download this docx </a>
-  target="_blank"
-  href={require('./assets/docusaurus-asset-example.docx').default}>
-  Download this docx
-</a>
 
 or
 

website/docs/i18n/i18n-crowdin.mdx

@@ -120,25 +120,18 @@ Create `crowdin.yml` in `website`:
 
 ```yml title="crowdin.yml"
 project_id: '123456'
-api_token_env: 'CROWDIN_PERSONAL_TOKEN'
+api_token_env: CROWDIN_PERSONAL_TOKEN
 preserve_hierarchy: true
-files: [
+files:
-    # JSON translation files
+  # JSON translation files
-    {
+  - source: /i18n/en/**/*
-      source: '/i18n/en/**/*',
+    translation: /i18n/%two_letters_code%/**/%original_file_name%
-      translation: '/i18n/%two_letters_code%/**/%original_file_name%',
+  # Docs Markdown files
-    },
+  - source: /docs/**/*
-    # Docs Markdown files
+    translation: /i18n/%two_letters_code%/docusaurus-plugin-content-docs/current/**/%original_file_name%
-    {
+  # Blog Markdown files
-      source: '/docs/**/*',
+  - source: /blog/**/*
-      translation: '/i18n/%two_letters_code%/docusaurus-plugin-content-docs/current/**/%original_file_name%',
+    translation: /i18n/%two_letters_code%/docusaurus-plugin-content-blog/**/%original_file_name%
-    },
-    # Blog Markdown files
-    {
-      source: '/blog/**/*',
-      translation: '/i18n/%two_letters_code%/docusaurus-plugin-content-blog/**/%original_file_name%',
-    },
-  ]
 ```
 
 Crowdin has its own syntax for declaring source/translation paths:

website/docs/i18n/i18n-git.md

@@ -109,7 +109,7 @@ Use the `--messagePrefix '(fr) '` option to make the untranslated strings stand
 
 Copy your untranslated Markdown files to the French folder:
 
-```
+```bash
 mkdir -p i18n/fr/docusaurus-plugin-content-docs/current
 cp -r docs/** i18n/fr/docusaurus-plugin-content-docs/current
 

website/docs/styling-layout.md

@@ -172,7 +172,7 @@ npm install --save docusaurus-plugin-sass sass
 
 2. Include the plugin in your `docusaurus.config.js` file:
 
-```jsx {3} title="docusaurus.config.js"
+```js {3} title="docusaurus.config.js"
 module.exports = {
   // ...
   plugins: ['docusaurus-plugin-sass'],
@@ -186,7 +186,7 @@ module.exports = {
 
 You can now set the `customCss` property of `@docusaurus/preset-classic` to point to your Sass/SCSS file:
 
-```jsx {8} title="docusaurus.config.js"
+```js {8} title="docusaurus.config.js"
 module.exports = {
   presets: [
     [

website/docusaurus.config.js

@@ -15,10 +15,8 @@ const {dogfoodingPluginInstances} = require('./_dogfooding/dogfooding.config');
 const FeatureRequestsPlugin = require('./src/featureRequests/FeatureRequestsPlugin');
 const npm2yarn = require('@docusaurus/remark-plugin-npm2yarn');
 const configTabs = require('./src/remark/configTabs');
-// eslint-disable-next-line import/no-extraneous-dependencies
+const lightTheme = require('./src/utils/prismLight');
-const lightTheme = require('prism-react-renderer/themes/github');
+const darkTheme = require('./src/utils/prismDark');
-// eslint-disable-next-line import/no-extraneous-dependencies
-const darkTheme = require('prism-react-renderer/themes/dracula');
 
 const ArchivedVersionsDropdownItems = Object.entries(VersionsArchived).splice(
   0,

website/src/css/custom.css

@@ -50,7 +50,7 @@ html[data-theme='dark'] {
 }
 
 html[data-theme='dark'] .docusaurus-highlight-code-line {
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: rgba(66, 66, 66, 0.3);
 }
 
 .header-github-link:hover {

website/src/utils/prismDark.js

@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+const darkTheme = require('prism-react-renderer/themes/vsDark');
+
+module.exports = {
+  plain: {
+    color: '#D4D4D4',
+    backgroundColor: '#1E1E1E',
+  },
+  styles: [
+    ...darkTheme.styles,
+    {
+      types: ['title'],
+      style: {
+        color: '#569CD6',
+        fontWeight: 'bold',
+      },
+    },
+    {
+      types: ['property', 'parameter'],
+      style: {
+        color: '#9CDCFE',
+      },
+    },
+    {
+      types: ['script'],
+      style: {
+        color: '#D4D4D4',
+      },
+    },
+    {
+      types: ['boolean', 'arrow', 'atrule', 'tag'],
+      style: {
+        color: '#569CD6',
+      },
+    },
+    {
+      types: ['number', 'color', 'unit'],
+      style: {
+        color: '#B5CEA8',
+      },
+    },
+    {
+      types: ['font-matter'],
+      style: {
+        color: '#CE9178',
+      },
+    },
+    {
+      types: ['keyword', 'rule'],
+      style: {
+        color: '#C586C0',
+      },
+    },
+    {
+      types: ['regex'],
+      style: {
+        color: '#D16969',
+      },
+    },
+    {
+      types: ['maybe-class-name'],
+      style: {
+        color: '#4EC9B0',
+      },
+    },
+    {
+      types: ['constant'],
+      style: {
+        color: '#4FC1FF',
+      },
+    },
+  ],
+};

website/src/utils/prismLight.js

@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+const lightTheme = require('prism-react-renderer/themes/github');
+
+module.exports = {
+  ...lightTheme,
+  styles: [
+    ...lightTheme.styles,
+    {
+      types: ['title'],
+      style: {
+        color: '#0550AE',
+        fontWeight: 'bold',
+      },
+    },
+    {
+      types: ['parameter'],
+      style: {
+        color: '#953800',
+      },
+    },
+    {
+      types: ['boolean', 'rule', 'color', 'number', 'constant', 'property'],
+      style: {
+        color: '#005CC5',
+      },
+    },
+    {
+      types: ['atrule', 'tag'],
+      style: {
+        color: '#22863A',
+      },
+    },
+    {
+      types: ['script'],
+      style: {
+        color: '#24292E',
+      },
+    },
+    {
+      types: ['operator', 'unit', 'rule'],
+      style: {
+        color: '#D73A49',
+      },
+    },
+    {
+      types: ['font-matter', 'string', 'attr-value'],
+      style: {
+        color: '#E3116C',
+      },
+    },
+    {
+      types: ['class-name'],
+      style: {
+        color: '#116329',
+      },
+    },
+    {
+      types: ['attr-name'],
+      style: {
+        color: '#0550AE',
+      },
+    },
+    {
+      types: ['keyword'],
+      style: {
+        color: '#CF222E',
+      },
+    },
+    {
+      types: ['function'],
+      style: {
+        color: '#8250DF',
+      },
+    },
+    {
+      types: ['selector'],
+      style: {
+        color: '#6F42C1',
+      },
+    },
+    {
+      types: ['variable'],
+      style: {
+        color: '#E36209',
+      },
+    },
+  ],
+};