ui: add new prism languages

Author: pyjun01

package.json

@@ -44,6 +44,7 @@
     "github-slugger": "^1.4.0",
     "mdx-embed": "^1.1.2",
     "prism-react-renderer": "^1.3.3",
+    "prismjs": "^1.29.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",

src/GlobalStyle.tsx

@@ -246,6 +246,15 @@ const GlobalStyle = createGlobalStyle`
     [data-change="add"] {
       background-color: #395d3f;
     }
+
+    .code_title {
+      margin: 0;
+      font-size: 1rem;
+    }
+
+    .code_title + * {
+      margin-top: 0;
+    }
   }
 `;
 

src/components/MDX/CodeBlock.tsx

@@ -1,9 +1,15 @@
-import Highlight, { defaultProps, PrismTheme } from 'prism-react-renderer';
+import Highlight, { defaultProps, PrismTheme, Prism } from 'prism-react-renderer';
 import theme from 'prism-react-renderer/themes/oceanicNext';
 import styled from 'styled-components';
 
+// Hack to *include* languages.
+// @ts-ignore
+(typeof global !== 'undefined' ? global : window).Prism = Prism;
+require('prismjs/components/prism-kotlin');
+require('prismjs/components/prism-swift');
+
 const Pre = styled.pre`
-  overflow-x: scroll;
+  overflow-x: auto;
 
   border-radius: 0.166667rem;
   box-shadow: rgb(20 20 20 / 27%) 1px 1px 20px;

yarn.lock

@@ -10770,6 +10770,11 @@ prism-react-renderer@^1.3.3:
   resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.3.3.tgz#9b5a4211a6756eee3c96fee9a05733abc0b0805c"
   integrity sha512-Viur/7tBTCH2HmYzwCHmt2rEFn+rdIWNIINXyg0StiISbDiIhHKhrFuEK8eMkKgvsIYSjgGqy/hNyucHp6FpoQ==
 
+prismjs@^1.29.0:
+  version "1.29.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
+  integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==
+
 probe-image-size@^7.2.3:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/probe-image-size/-/probe-image-size-7.2.3.tgz#d49c64be540ec8edea538f6f585f65a9b3ab4309"