Merge pull request #482 from logto-io/charles-log-1682-support-code-editor-in-get-started-steps

feat(console): support code editor in get-started steps

packages/console/src/components/CodeEditor/index.module.scss

@@ -1,7 +1,6 @@
 @use '@/scss/underscore' as _;
 
 .editor {
-  margin: _.unit(1) 0;
   border-radius: _.unit(4);
   padding: _.unit(4) 0;
   // Use fixed color for both light and dark mode, the same as vs-dark.

packages/console/src/components/CodeEditor/index.tsx

@@ -8,7 +8,7 @@ import IconButton from '../IconButton';
 import * as styles from './index.module.scss';
 
 type Props = {
-  language: string;
+  language?: string;
   height?: string;
   isReadonly?: boolean;
   value?: string;

packages/console/src/pages/GetStarted/components/Step/index.tsx

@@ -5,6 +5,7 @@ import ReactMarkdown from 'react-markdown';
 import Button from '@/components/Button';
 import Card from '@/components/Card';
 import CardTitle from '@/components/CardTitle';
+import CodeEditor from '@/components/CodeEditor';
 import DangerousRaw from '@/components/DangerousRaw';
 import IconButton from '@/components/IconButton';
 import Spacer from '@/components/Spacer';
@@ -65,7 +66,19 @@ const Step = (
       </div>
       {isExpanded && (
         <>
-          <ReactMarkdown className={styles.markdownContent}>{metadata}</ReactMarkdown>
+          <ReactMarkdown
+            className={styles.markdownContent}
+            components={{
+              code: ({ className, children }) => {
+                const [, language] = /language-(\w+)/.exec(className ?? '') ?? [];
+                const content = String(children);
+
+                return <CodeEditor isReadonly language={language} value={content} />;
+              },
+            }}
+          >
+            {metadata}
+          </ReactMarkdown>
           <div className={styles.buttonWrapper}>
             <Button
               type="primary"