improve

Author: righ

README.md

@@ -52,6 +52,25 @@ export const Component = () => {
 };
 ```
 
+#### How to use this on Next.js
+
+```jsx
+import dynamic from 'next/dynamic';
+const IpynbRenderer = dynamic(() => import('react-ipynb-renderer').then((mod) => mod.IpynbRenderer), {
+  ssr: false
+});
+// import ipynb file as json
+import ipynb from "./test.ipynb";
+
+export const Component = () => {
+  return (
+    <IpynbRenderer
+      ipynb={ipynb}
+    />
+  );
+};
+```
+
 ### Using react-ipynb-renderer-katex
 
 ```jsx

src/index.tsx

@@ -4,13 +4,15 @@ import {
   MarkdownOptionsForMathjax,
   MarkdownForMathjax,
 } from "./components/MarkdownForMathjax";
-import { BaseProps } from "./types";
+import {BaseProps, IpynbType} from "./types";
 import pkg from "../package.json";
 import { defaultHtmlFilter } from "./filters";
 import { Context } from "./context";
 
 console.debug(`react-ipynb-renderer@${pkg.version} is working.`);
 
+export type Ipynb = IpynbType;
+
 export type Props = BaseProps & {
   markdownOptions?: MarkdownOptionsForMathjax;
 };

src/styles/default.less

@@ -24,6 +24,8 @@
 
   }
   div.output_area {
+    display: flex;
+    padding: 5px 0;
     .prompt {
       padding-right: 0 !important;
     }

src/types.ts

@@ -69,11 +69,13 @@ export type LanguageType = "python" | "r" | "julia" | "haskell" | "ruby";
 
 export type HtmlFilter = (html: string) => string;
 
+export type IpynbType = {
+  cells: CellType[];
+  worksheets?: { cells: CellType[] }[];
+}
+
 export type BaseProps = {
-  ipynb: {
-    cells: CellType[];
-    worksheets?: { cells: CellType[] }[];
-  };
+  ipynb: IpynbType;
   syntaxTheme?: SyntaxThemeType;
   language?: LanguageType;
   bgTransparent?: boolean;