Update prism style to vsDark

Signed-off-by: Paul Schultz <pschultz@pobox.com>

docs/features/software-templates/testing-scaffolder-alpha.md

@@ -197,9 +197,9 @@ You will need to change the import for `FieldValidation` to point at the new `re
 
 ```ts
 /* highlight-remove-next-line */
-- import { FieldValidation } from '@rjsf/core';
+import { FieldValidation } from '@rjsf/core';
 /* highlight-add-next-line */
-+ import { FieldValidation } from '@rjsf/utils;
+import { FieldValidation } from '@rjsf/utils;
 import { KubernetesValidatorFunctions } from '@backstage/catalog-model';
 
 export const entityNamePickerValidation = (

microsite/docusaurus.config.js

@@ -16,6 +16,11 @@
 
 // @ts-check
 
+/** @type{import('prism-react-renderer').PrismTheme} **/
+// @ts-ignore
+const prismTheme = require('prism-react-renderer/themes/vsDark');
+prismTheme.plain.backgroundColor = '#232323';
+
 /** @type {import('@docusaurus/types').Config} */
 module.exports = {
   title: 'Backstage Software Catalog and Developer Platform',
@@ -266,10 +271,11 @@ module.exports = {
         searchParameters: {},
       },
       prism: {
+        theme: prismTheme,
         magicComments: [
           // Extend the default highlight class name
           {
-            className: 'theme-code-block-highlighted-line',
+            className: 'code-block-highlight-line',
             line: 'highlight-next-line',
             block: { start: 'highlight-start', end: 'highlight-end' },
           },

microsite/package.json

@@ -35,6 +35,7 @@
     "@swc/core": "^1.3.36",
     "clsx": "^1.1.1",
     "docusaurus-plugin-sass": "^0.2.3",
+    "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "sass": "^1.57.1",

microsite/src/css/customTheme.css

@@ -75,4 +75,12 @@
   border-left: 3px solid rgba(255, 0, 0, 0.5);
 }
 
+.code-block-highlight-line {
+  background-color: rgba(255, 255, 255, 0.08);
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
+  border-left: 3px solid rgb(255, 255, 255, 0.5);
+}
+
 /* #endregion */

microsite/yarn.lock

@@ -3738,6 +3738,7 @@ __metadata:
     docusaurus-plugin-sass: ^0.2.3
     js-yaml: ^4.1.0
     prettier: ^2.6.2
+    prism-react-renderer: ^1.3.5
     react: ^17.0.2
     react-dom: ^17.0.2
     replace: ^1.2.2