diff --git a/.changeset/eleven-drinks-deny.md b/.changeset/eleven-drinks-deny.md
new file mode 100644
index 0000000000..fe9861c05b
--- /dev/null
+++ b/.changeset/eleven-drinks-deny.md
@@ -0,0 +1,7 @@
+---
+'nextra': patch
+'nextra-theme-blog': patch
+'nextra-theme-docs': patch
+---
+
+reuse table styles from docs in blog
diff --git a/examples/blog/pages/posts/table.mdx b/examples/blog/pages/posts/table.mdx
new file mode 100644
index 0000000000..68f0977091
--- /dev/null
+++ b/examples/blog/pages/posts/table.mdx
@@ -0,0 +1,15 @@
+---
+title: Table
+date: 2022/8/28
+description: En example of using table.
+tag: web development
+author: Dimitri POSTOLOV
+---
+
+## Test table
+
+| Left | Center | Right |
+| ---- | :----: | ----: |
+| ss2 | 333 | 3232 |
+| | 222 | 3232 |
+| | 23 | |
diff --git a/packages/nextra-theme-blog/src/mdx-theme.tsx b/packages/nextra-theme-blog/src/mdx-theme.tsx
index 62c83f3d06..a340141bac 100644
--- a/packages/nextra-theme-blog/src/mdx-theme.tsx
+++ b/packages/nextra-theme-blog/src/mdx-theme.tsx
@@ -10,7 +10,7 @@ import React, {
import { MDXProvider } from '@mdx-js/react'
import Link from 'next/link'
import ReactDOM from 'react-dom'
-import { Code, Pre } from 'nextra/components'
+import { Code, Pre, Td, Th, Tr } from 'nextra/components'
import { useBlogContext } from './blog-context'
export const HeadingContext = createContext<
@@ -87,6 +87,12 @@ const components = {
)
},
+ tr: Tr,
+ th: Th,
+ td: Td,
+ table(props: ComponentProps<'table'>) {
+ return
+ },
code: Code
}
diff --git a/packages/nextra-theme-docs/src/mdx-components.tsx b/packages/nextra-theme-docs/src/mdx-components.tsx
index 6cd3b55155..ba7396c57d 100644
--- a/packages/nextra-theme-docs/src/mdx-components.tsx
+++ b/packages/nextra-theme-docs/src/mdx-components.tsx
@@ -14,7 +14,7 @@ import { Collapse, Anchor } from './components'
import { IS_BROWSER } from './constants'
import cn from 'clsx'
import { DocsThemeConfig } from './types'
-import { Pre, Code } from 'nextra/components'
+import { Code, Pre, Td, Th, Tr } from 'nextra/components'
let observer: IntersectionObserver
let setActiveAnchor: ReturnType
@@ -263,27 +263,9 @@ export const getComponents = ({
p: (props: ComponentProps<'p'>) => (
),
- tr: (props: ComponentProps<'tr'>) => (
-
- ),
- th: (props: ComponentProps<'th'>) => (
- |
- ),
- td: (props: ComponentProps<'td'>) => (
- |
- ),
+ tr: Tr,
+ th: Th,
+ td: Td,
details: Details,
summary: Summary,
pre: Pre,
diff --git a/packages/nextra/src/components/index.ts b/packages/nextra/src/components/index.ts
index 01a3b1fb10..665fac60ba 100644
--- a/packages/nextra/src/components/index.ts
+++ b/packages/nextra/src/components/index.ts
@@ -1,3 +1,6 @@
export { CopyToClipboard } from './copy-to-clipboard'
export { Code } from './code'
export { Pre } from './pre'
+export { Td } from './td'
+export { Th } from './th'
+export { Tr } from './tr'
diff --git a/packages/nextra/src/components/td.tsx b/packages/nextra/src/components/td.tsx
new file mode 100644
index 0000000000..f85c7ac538
--- /dev/null
+++ b/packages/nextra/src/components/td.tsx
@@ -0,0 +1,8 @@
+import React, { ComponentProps } from 'react'
+
+export const Td = (props: ComponentProps<'td'>) => (
+ |
+)
diff --git a/packages/nextra/src/components/th.tsx b/packages/nextra/src/components/th.tsx
new file mode 100644
index 0000000000..477e5eea3f
--- /dev/null
+++ b/packages/nextra/src/components/th.tsx
@@ -0,0 +1,8 @@
+import React, { ComponentProps } from 'react'
+
+export const Th = (props: ComponentProps<'th'>) => (
+ |
+)
diff --git a/packages/nextra/src/components/tr.tsx b/packages/nextra/src/components/tr.tsx
new file mode 100644
index 0000000000..2e3db11a49
--- /dev/null
+++ b/packages/nextra/src/components/tr.tsx
@@ -0,0 +1,11 @@
+import React, { ComponentProps } from 'react'
+
+export const Tr = (props: ComponentProps<'tr'>) => (
+
+)