lobehub
diff --git a/‎package.json
Copy file name to clipboard
+2Lines changed: 2 additions & 0 deletions b/‎package.json
Copy file name to clipboard
+2Lines changed: 2 additions & 0 deletions
diff --git a/‎src/Markdown/Markdown.tsx
Copy file name to clipboard
+5Lines changed: 5 additions & 0 deletions b/‎src/Markdown/Markdown.tsx
Copy file name to clipboard
+5Lines changed: 5 additions & 0 deletions
diff --git a/‎src/SearchBar/components/SearchResultCard/index.tsx renamed to ‎src/Markdown/components/SearchResultCard/index.tsx
Copy file name to clipboard
+22-5Lines changed: 22 additions & 5 deletions b/‎src/SearchBar/components/SearchResultCard/index.tsx renamed to ‎src/Markdown/components/SearchResultCard/index.tsx
Copy file name to clipboard
+22-5Lines changed: 22 additions & 5 deletions
diff --git a/‎src/Markdown/components/SearchResultCard/style.ts
Copy file name to clipboard
+20Lines changed: 20 additions & 0 deletions b/‎src/Markdown/components/SearchResultCard/style.ts
Copy file name to clipboard
+20Lines changed: 20 additions & 0 deletions
diff --git a/‎src/SearchBar/components/SearchResultCards/index.tsx renamed to ‎src/Markdown/components/SearchResultCards/index.tsx
Copy file name to clipboard
+14-3Lines changed: 14 additions & 3 deletions b/‎src/SearchBar/components/SearchResultCards/index.tsx renamed to ‎src/Markdown/components/SearchResultCards/index.tsx
Copy file name to clipboard
+14-3Lines changed: 14 additions & 3 deletions
diff --git a/‎src/Markdown/demos/data.ts
Copy file name to clipboard
+36Lines changed: 36 additions & 0 deletions b/‎src/Markdown/demos/data.ts
Copy file name to clipboard
+36Lines changed: 36 additions & 0 deletions
diff --git a/‎src/Markdown/demos/github.tsx
Copy file name to clipboard
+29Lines changed: 29 additions & 0 deletions b/‎src/Markdown/demos/github.tsx
Copy file name to clipboard
+29Lines changed: 29 additions & 0 deletions
diff --git a/‎src/Markdown/index.md
Copy file name to clipboard
+4Lines changed: 4 additions & 0 deletions b/‎src/Markdown/index.md
Copy file name to clipboard
+4Lines changed: 4 additions & 0 deletions
diff --git a/‎src/Markdown/style.ts
Copy file name to clipboard
+146-8Lines changed: 146 additions & 8 deletions b/‎src/Markdown/style.ts
Copy file name to clipboard
+146-8Lines changed: 146 additions & 8 deletions
@@ -138,10 +138,12 @@
     "react-merge-refs": "^3.0.2",
     "react-rnd": "^10.5.2",
     "react-zoom-pan-pinch": "^3.7.0",
+    "rehype-github-alerts": "^4.1.1",
     "rehype-katex": "^7.0.1",
     "rehype-raw": "^7.0.0",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
+    "remark-github": "^12.0.0",
     "remark-math": "^6.0.0",
     "shiki": "^3.2.1",
     "swr": "^2.3.3",
 
@@ -67,10 +67,15 @@ const Markdown = memo<MarkdownProps>(
           defaultVariants: {
             animated: false,
             enableLatex: true,
+            gfm: true,
             variant: 'default',
           },
           /* eslint-disable sort-keys-fix/sort-keys-fix */
           variants: {
+            gfm: {
+              true: styles.gfm,
+              false: null,
+            },
             variant: {
               default: null,
               chat: styles.chat,
 
@@ -1,13 +1,21 @@
 'use client';
 
-import { memo, useMemo } from 'react';
+import { Ref, memo, useMemo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import Block from '@/Block';
 import Text from '@/Text';
+import { AProps } from '@/types';
 
-import type { SearchResultCardProps } from '../../type';
 import { useStyles } from './style';
 
+export interface SearchResultCardProps extends AProps {
+  alt?: string;
+  ref?: Ref<HTMLAnchorElement>;
+  title?: string;
+  url: string;
+}
+
 const SearchResultCard = memo<SearchResultCardProps>(({ ref, url, title, alt, ...rest }) => {
   const { styles } = useStyles();
 
@@ -30,8 +38,17 @@ const SearchResultCard = memo<SearchResultCardProps>(({ ref, url, title, alt, ..
 
   return (
     <a href={url} ref={ref} rel="noreferrer" target={'_blank'} {...rest}>
-      <Flexbox className={styles.container} gap={2} justify={'space-between'} key={url}>
-        <div className={styles.title}>{displayTitle}</div>
+      <Block
+        className={styles.container}
+        clickable
+        gap={2}
+        justify={'space-between'}
+        key={url}
+        paddingBlock={6}
+        paddingInline={8}
+        variant={'outlined'}
+      >
+        <Text ellipsis={{ rows: 2 }}>{displayTitle}</Text>
         <Flexbox align={'center'} gap={4} horizontal>
           <img
             alt={alt || title || url}
@@ -43,7 +60,7 @@ const SearchResultCard = memo<SearchResultCardProps>(({ ref, url, title, alt, ..
             {domain}
           </Text>
         </Flexbox>
-      </Flexbox>
+      </Block>
     </a>
   );
 });
 
@@ -0,0 +1,20 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css }) => ({
+  container: css`
+    min-width: 160px;
+    max-width: 160px;
+    height: 100%;
+
+    font-size: 12px;
+    color: initial;
+  `,
+  url: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+
+    text-overflow: ellipsis;
+  `,
+}));
@@ -1,11 +1,22 @@
 'use client';
 
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
+import { Ref, memo } from 'react';
+import { Flexbox, FlexboxProps } from 'react-layout-kit';
 
-import type { SearchResultCardsProps } from '../../type';
 import SearchResultCard from '../SearchResultCard';
 
+export interface SearchResultItem {
+  alt?: string;
+  summary?: string;
+  title?: string;
+  url: string;
+}
+
+export interface SearchResultCardsProps extends FlexboxProps {
+  dataSource: string[] | SearchResultItem[];
+  ref?: Ref<HTMLDivElement>;
+}
+
 const SearchResultCards = memo<SearchResultCardsProps>(({ ref, dataSource, style, ...rest }) => {
   return (
     <Flexbox
 
@@ -346,3 +346,39 @@ graph TD
 
 Thank you for your attention!
 `;
+
+export const github = `
+
+## Github Alerts
+
+> [!NOTE]
+> Highlights information that users should take into account, even when skimming.
+
+> [!TIP]
+> Optional information to help a user be more successful.
+
+> [!IMPORTANT]
+> Crucial information necessary for users to succeed.
+
+> [!WARNING]
+> Critical content demanding immediate user attention due to potential risks.
+
+> [!CAUTION]
+> Negative potential consequences of an action.
+
+## Github Tasks
+
+- [ ] Task 1: Implement feature X
+- [x] Task 2: Fix bug Y
+
+
+## Github Footnotes
+
+Here is a simple footnote[^1].
+
+A footnote can also have multiple lines[^2].
+
+[^1]: My reference.
+[^2]: To add line breaks within a footnote, prefix new lines with 2 spaces.
+  This is a second line.
+`;
@@ -0,0 +1,29 @@
+import { Markdown, MarkdownProps } from '@lobehub/ui';
+import { StoryBook, useControls, useCreateStore } from '@lobehub/ui/storybook';
+
+import { github } from './data';
+
+export default () => {
+  const store = useCreateStore();
+  const options = useControls(
+    {
+      allowHtml: true,
+      children: {
+        rows: true,
+        value: github,
+      },
+      fontSize: 16,
+      fullFeaturedCodeBlock: true,
+      headerMultiple: 1,
+      lineHeight: 1.8,
+      marginMultiple: 2,
+    },
+    { store },
+  ) as MarkdownProps;
+
+  return (
+    <StoryBook levaStore={store}>
+      <Markdown {...options} />
+    </StoryBook>
+  );
+};
@@ -17,6 +17,10 @@ description: Markdown is a React component used to render markdown text. It supp
 
 <code src="./demos/streaming.tsx" iframe nopadding></code>
 
+## Github Syntax Guide
+
+<code src="./demos/github.tsx" iframe nopadding></code>
+
 ## Shiki Transformers
 
 <code src="./demos/transformer.tsx" iframe nopadding></code>
 
@@ -49,6 +49,152 @@ export const useStyles = createStyles(({ css, token, isDarkMode }) => {
         }
       }
     `,
+    gfm: css`
+      .markdown-alert {
+        margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);
+        padding-inline-start: 1em;
+        border-inline-start: solid 4px ${token.colorBorder};
+
+        > p {
+          margin-block-start: 0 !important;
+        }
+      }
+
+      .markdown-alert > :first-child {
+        margin-block-start: 0;
+      }
+
+      .markdown-alert > :last-child {
+        margin-block-end: 0;
+      }
+
+      .markdown-alert-note {
+        border-inline-start-color: ${token.colorInfo};
+      }
+
+      .markdown-alert-tip {
+        border-inline-start-color: ${token.colorSuccess};
+      }
+
+      .markdown-alert-important {
+        border-inline-start-color: ${token.purple};
+      }
+
+      .markdown-alert-warning {
+        border-inline-start-color: ${token.colorWarning};
+      }
+
+      .markdown-alert-caution {
+        border-inline-start-color: ${token.colorError};
+      }
+
+      .markdown-alert-title {
+        display: flex;
+        align-items: center;
+        margin-block-end: 0.5em !important;
+        font-weight: 500;
+      }
+
+      .markdown-alert-note .markdown-alert-title {
+        color: ${token.colorInfo};
+        fill: ${token.colorInfo};
+      }
+
+      .markdown-alert-tip .markdown-alert-title {
+        color: ${token.colorSuccess};
+        fill: ${token.colorSuccess};
+      }
+
+      .markdown-alert-important .markdown-alert-title {
+        color: ${token.purple};
+        fill: ${token.purple};
+      }
+
+      .markdown-alert-warning .markdown-alert-title {
+        color: ${token.colorWarning};
+        fill: ${token.colorWarning};
+      }
+
+      .markdown-alert-caution .markdown-alert-title {
+        color: ${token.colorError};
+        fill: ${token.colorError};
+      }
+
+      .octicon {
+        overflow: visible !important;
+        display: inline-block;
+        margin-inline-end: 0.5em;
+        vertical-align: text-bottom;
+      }
+
+      .task-list-item {
+        &::before {
+          display: none !important;
+        }
+
+        input[type='checkbox'] {
+          margin-block: 0 0.25em;
+          margin-inline: -1.6em 0.2em;
+          vertical-align: middle;
+        }
+
+        input[type='checkbox']:dir(rtl) {
+          margin: 0 -1.6em 0.25em 0.2em;
+        }
+      }
+
+      /* Style the footnotes section. */
+
+      .footnotes {
+        margin-block-start: calc(var(--lobe-markdown-margin-multiple) * 1em);
+        font-size: smaller;
+        color: #8b949e;
+
+        #footnote-label {
+          display: none;
+        }
+
+        > ol {
+          margin: 0 !important;
+        }
+      }
+
+      .sr-only {
+        position: absolute;
+
+        overflow: hidden;
+
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        border: 0;
+
+        word-wrap: normal;
+
+        clip: rect(0, 0, 0, 0);
+      }
+
+      sup:has(a[aria-describedby='footnote-label']) {
+        margin-inline: 2px;
+        vertical-align: super !important;
+
+        [data-footnote-ref] {
+          display: inline-block;
+
+          width: 16px;
+          height: 16px;
+          border-radius: 4px;
+
+          font-family: ${token.fontFamilyCode};
+          font-size: 10px;
+          color: ${token.colorTextSecondary} !important;
+          text-align: center;
+
+          background: ${token.colorFillSecondary};
+        }
+      }
+    `,
+
     latex: css`
       .katex-error {
         color: ${token.colorTextDescription} !important;
@@ -74,14 +220,6 @@ export const useStyles = createStyles(({ css, token, isDarkMode }) => {
       position: relative;
       overflow: hidden;
       max-width: 100%;
-
-      #footnote-label {
-        display: none;
-      }
-
-      sup:has(a[aria-describedby='footnote-label']) {
-        vertical-align: super !important;
-      }
     `,
   };
 });