feat(PrismCode): react renderer * 11

Author: tenphi

src/components/GlobalStyles.tsx

@@ -249,6 +249,16 @@ const GlobalStylesElement = createGlobalStyle<GlobalStylesElementProps>`
     white-space: normal;
   }
 
+  .token.inserted-sign {
+    background-color: #e6ffed;
+    color: #30A666;
+  }
+
+  .token.deleted-sign {
+    background-color: #ffeef0;
+    color: (--danger-color);
+  }
+
   .token.comment,
   .token.prolog,
   .token.doctype,
@@ -277,16 +287,16 @@ const GlobalStylesElement = createGlobalStyle<GlobalStylesElementProps>`
   }
 
   .token.entity,
-  .token.number {
+  .token.number,
+  .token.inserted {
     color: #30A666;
   }
 
   .token.selector,
   .token.attr-name,
   .token.string,
   .token.char,
-  .token.builtin,
-  .token.inserted {
+  .token.builtin {
     color: var(--purple-text-color);
   }
 
@@ -328,16 +338,6 @@ const GlobalStylesElement = createGlobalStyle<GlobalStylesElementProps>`
   .token.entity {
     cursor: help;
   }
-
-  .token.inserted-sign {
-    background-color: #e6ffed;
-    color: #30A666;
-  }
-
-  .token.deleted-sign {
-    background-color: #ffeef0;
-    color: (--danger-color);
-  }
 `;
 
 export const GlobalStyles = (props: GlobalStylesProps) => {

src/components/content/PrismCode/PrismCode.stories.tsx

@@ -16,11 +16,13 @@ const Template = ({ ...args }) => <PrismCode {...args} />;
 
 export const OneLine = Template.bind({});
 OneLine.args = {
+  language: 'bash',
   code: '$ npm install -g cubejs-cli',
 };
 
 export const MultiLine = Template.bind({});
 MultiLine.args = {
+  language: 'bash',
   code: '$ npm install -g cubejs-cli\n$ cubejs deploy',
 };
 

src/components/content/PrismCode/PrismCode.tsx

@@ -11,6 +11,10 @@ import {
 
 import { Prism } from './prismSetup';
 
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-yaml';
+import 'prismjs/components/prism-bash';
+
 const PreElement = tasty({
   as: 'pre',
   qa: 'CodeBlock',