feat; add code highlight for markdown

Author: zoobestik

gatsby-config.mjs

@@ -1,4 +1,5 @@
 import rehypeSlug from 'rehype-slug';
+import rehypePrism from '@mapbox/rehype-prism';
 
 export default {
   siteMetadata: {
@@ -25,6 +26,7 @@ export default {
         mdxOptions: {
           rehypePlugins: [
             rehypeSlug,
+            rehypePrism,
           ],
         },
         gatsbyRemarkPlugins: [

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@csstools/postcss-global-data": "^1.0.3",
     "@jetbrains/kotlin-web-site-ui": "^4.6.0",
+    "@mapbox/rehype-prism": "^0.9.0",
     "@rescui/button": "^0.8.0",
     "@rescui/checkbox": "^0.4.10",
     "@rescui/focus-manager": "^0.1.3",
@@ -29,6 +30,7 @@
     "postcss-each": "^1.1.0",
     "postcss-mixins": "^9.0.4",
     "postcss-preset-env": "^8.1.0",
+    "prism-themes": "^1.9.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-gif-player": "^0.4.2",

src/components/Markdown/index.tsx

@@ -3,6 +3,7 @@ import cn from "classnames";
 import {MDXProvider} from "@mdx-js/react";
 import {LinkIcon} from "@rescui/icons";
 import {useTextStyles} from "@jetbrains/kotlin-web-site-ui/out/components/typography";
+import "prism-themes/themes/prism-one-light.min.css";
 
 import {useSiteMeta, useSiteURL} from "../../utlis/hooks";
 import {Link} from "../Link";

src/components/Markdown/modern.module.css

@@ -41,19 +41,25 @@
     }
 }
 
+pre.code-block,
 .code-block {
     display: inline-block;
     box-sizing: border-box;
     padding: var(--ktl-box-block-l);
     overflow: auto;
     white-space: pre;
-    background: rgba(25,25,28,.05);
+    background: #f3f3f3;
     border-radius: 8px;
+    border: 0 none transparent;
     max-width: 100%;
 }
 
 .code-block > code {
     display: block;
+
+    background: #f3f3f3;
+    font-family: "JetBrains Mono", SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    line-height: 1.5;
 }
 
 .tag-anchor {

yarn.lock

@@ -1979,6 +1979,15 @@
   resolved "https://registry.yarnpkg.com/@lmdb/lmdb-win32-x64/-/lmdb-win32-x64-2.5.3.tgz#c72e8b6faae31d925d23a6db0379cc3fe0216fdd"
   integrity sha512-cK+Elf3RjEzrm3SerAhrFWL5oQAsZSJ/LmjL1joIpTfEP1etJJ9CTRvdaV6XLYAxaEkfdhk/9hOvHLbR9yIhCA==
 
+"@mapbox/rehype-prism@^0.9.0":
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/@mapbox/rehype-prism/-/rehype-prism-0.9.0.tgz#63d10bb2db2630a485477eba175e481f61c32ac9"
+  integrity sha512-ypmEaqzdrqSon5NJdPqTh79qmPK8ajAqIU9mdFhuWn3T4B/RT2nt3yH2JPcou1/Gx8DvSgJ+XP+fy60e8h3mpQ==
+  dependencies:
+    hast-util-to-string "^1.0.4"
+    refractor "^3.4.0"
+    unist-util-visit "^2.0.3"
+
 "@mdx-js/mdx@^2.1.5":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-2.3.0.tgz#d65d8c3c28f3f46bb0e7cb3bf7613b39980671a9"
@@ -7394,6 +7403,11 @@ hast-util-to-parse5@^6.0.0:
     xtend "^4.0.0"
     zwitch "^1.0.0"
 
+hast-util-to-string@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/hast-util-to-string/-/hast-util-to-string-1.0.4.tgz#9b24c114866bdb9478927d7e9c36a485ac728378"
+  integrity sha512-eK0MxRX47AV2eZ+Lyr18DCpQgodvaS3fAQO2+b9Two9F5HEoRPhiUMNzoXArMJfZi2yieFzUBMRl3HNJ3Jus3w==
+
 hast-util-to-string@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/hast-util-to-string/-/hast-util-to-string-2.0.0.tgz#b008b0a4ea472bf34dd390b7eea1018726ae152a"
@@ -10868,6 +10882,16 @@ pretty-error@^2.1.2:
     lodash "^4.17.20"
     renderkid "^2.0.4"
 
+prism-themes@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/prism-themes/-/prism-themes-1.9.0.tgz#19c034f3205f1e28d75d89728e54ccd745f7e3dd"
+  integrity sha512-tX2AYsehKDw1EORwBps+WhBFKc2kxfoFpQAjxBndbZKr4fRmMkv47XN0BghC/K1qwodB1otbe4oF23vUTFDokw==
+
+prismjs@~1.27.0:
+  version "1.27.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.27.0.tgz#bb6ee3138a0b438a3653dd4d6ce0cc6510a45057"
+  integrity sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==
+
 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"
@@ -11289,6 +11313,15 @@ reflect.ownkeys@^0.2.0:
   resolved "https://registry.yarnpkg.com/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz#749aceec7f3fdf8b63f927a04809e90c5c0b3460"
   integrity sha512-qOLsBKHCpSOFKK1NUOCGC5VyeufB6lEsFe92AL2bhIJsacZS1qdoOZSbPk3MYKuT2cFlRDnulKXuuElIrMjGUg==
 
+refractor@^3.4.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.6.0.tgz#ac318f5a0715ead790fcfb0c71f4dd83d977935a"
+  integrity sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==
+  dependencies:
+    hastscript "^6.0.0"
+    parse-entities "^2.0.0"
+    prismjs "~1.27.0"
+
 regenerate-unicode-properties@^10.0.1:
   version "10.0.1"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.0.1.tgz#7f442732aa7934a3740c779bb9b3340dccc1fb56"