feat: add highlight for code block

sanyuan0704 · Sep 7, 2022 · 81a4869 · 81a4869
1 parent b30d0e9
commit 81a4869
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
     "react-router-dom": "^6.3.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-external-links": "^2.0.1",
+    "rehype-highlight": "^5.0.2",
     "rehype-slug": "^5.0.1",
     "remark-gfm": "^3.0.1",
     "vite": "^3.0.9"
@@ -52,6 +53,7 @@
     "@typescript-eslint/parser": "^5.36.1",
     "eslint": "^8.23.0",
     "eslint-plugin-react": "^7.31.1",
+    "highlight.js": "^11.6.0",
     "ora": "^6.1.2",
     "rollup": "^2.78.1",
     "sass": "^1.54.5",

diff --git a/playground/src/index.md b/playground/src/index.md
@@ -76,19 +76,16 @@ Islands 架构模型早在 2019 年就被提出来了，并在 2021 年被 Preac
 
 ```jsx
 // index.astro
-import MyReactComponent from '../components/MyReactComponent.jsx';
----
-<MyReactComponent />
+export const a = 2;
 ```
 
 值得注意的是，这种写法不会在浏览器添加任何的 JS 代码。但有时我们需要在组件中绑定一些交互事件，那么这时就需要`激活孤岛组件`了，在 Astro 如何来激活呢？其实很简单，在使用组件时加上`client:load`指令即可:
 
 ```jsx
 // index.astro
----
-import MyReactComponent from '../components/MyReactComponent.jsx';
----
-<MyReactComponent client:load />
+function get() {
+  return <MyReactComponent client:load />;
+}
 ```
 
 如此一来，Astro 会给浏览器传输一部分 JS 代码供这个组件完成 hydration，以便后续的交互。

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/client/theme/index.ts b/src/client/theme/index.ts
@@ -2,6 +2,6 @@ import { Layout } from './layout/Layout';
 import './styles/base.css';
 import './styles/vars.css';
 import './styles/doc.css';
-
+import 'highlight.js/styles/github-dark.css';
 // Tree Shaking
 export { Layout };
diff --git a/src/client/theme/layout/Layout/index.tsx b/src/client/theme/layout/Layout/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { HomeLayout } from '../HomeLayout';
+// import { HomeLayout } from '../HomeLayout';
 import { Nav } from '../../components/Nav';
 import { DocLayout } from '../DocLayout';
 

diff --git a/src/client/theme/styles/vars.css b/src/client/theme/styles/vars.css
@@ -215,7 +215,7 @@
   --island-code-font-size: 0.875em;
 
   --island-code-block-color: var(--island-c-text-dark-1);
-  --island-code-block-bg: #292d3e;
+  --island-code-block-bg: #0d1117;
 
   --island-code-line-highlight-color: rgba(0, 0, 0, 0.5);
   --island-code-line-number-color: var(--island-c-text-dark-3);

diff --git a/src/node/plugin-mdx/index.ts b/src/node/plugin-mdx/index.ts
@@ -3,6 +3,7 @@ import remarkPluginGFM from 'remark-gfm';
 import rehypePluginAutolinkHeadings from 'rehype-autolink-headings';
 import rehypePluginSlug from 'rehype-slug';
 import rehypePluginExternalLinks from 'rehype-external-links';
+import rehypeHighlight from 'rehype-highlight';
 
 export function createMDXOptions() {
   return {
@@ -29,7 +30,8 @@ export function createMDXOptions() {
           target: '_blank'
         }
       ],
-      rehypePluginPreWrapper
+      rehypePluginPreWrapper,
+      rehypeHighlight
     ]
   };
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -19,7 +19,6 @@
   "exclude": [
     "**/node_modules/**",
     "**/dist/**",
-    "**/client/**",
     "**/playground/**",
     "tsup.config.ts"
   ]