@udus/notion-renderer
Version:
40 lines (39 loc) • 26 kB
JSON
{
"object": "block",
"id": "88436bc7-a2ae-4107-8c86-c79f231c8352",
"parent": {
"type": "page_id",
"page_id": "7ed3a6ee-bb5e-4cdf-a944-33684d7c56bf"
},
"created_time": "2023-10-28T06:39:00.000Z",
"last_edited_time": "2023-10-28T06:39:00.000Z",
"created_by": {
"object": "user",
"id": "e0446ede-dde6-457c-b535-d2b19f40b45a"
},
"last_edited_by": {
"object": "user",
"id": "47b6bf35-05fa-4cc6-9494-ec0563e35318"
},
"has_children": false,
"archived": false,
"type": "link_preview",
"link_preview": {
"url": "https://github.com/udus122/notion-renderer",
"site_meta": {
"url": "https://github.com/udus122/notion-renderer",
"title": "GitHub - udus122/notion-renderer",
"description": "Notion Renderer A fully customizable React renderer for the official Notion API. Note Please note that this package is currently in alpha release. Therefore, there may be significant changes to the API...",
"links": [
"https://github.com/udus122/notion-renderer"
],
"image": "https://opengraph.githubassets.com/2270afdfcf1d84cb316bc23a3cfdfdc330de2a7b544309fc7654b593ced9e8af/udus122/notion-renderer",
"content": "<div>\n <article><p><a target=\"_blank\" href=\"https://github.com/udus122/notion-renderer/blob/alpha/assets/logo.png\"><img src=\"https://github.com/udus122/notion-renderer/raw/alpha/assets/logo.png\" alt=\"Notion Renderer\" /></a></p>\n<h2 id=\"user-content-notion-renderer\"><a target=\"_blank\" href=\"https://github.com/udus122/notion-renderer#notion-renderer\">Notion Renderer</a></h2>\n<p>A fully customizable React renderer for the official Notion API.</p>\n<p><span>Note</span><br />\nPlease note that this package is currently in alpha release.<br />\nTherefore, there may be significant changes to the API without prior notice.</p>\n<h2 id=\"user-content-example\"><a target=\"_blank\" href=\"https://github.com/udus122/notion-renderer#example\">Example</a></h2>\n<ul>\n<li>Storybook: <a target=\"_blank\" href=\"https://udus122.github.io/notion-renderer/?path=/docs/renderer--docs\">https://udus122.github.io/notion-renderer/?path=/docs/renderer--docs</a></li>\n</ul>\n<h2 id=\"user-content-installation\"><a target=\"_blank\" href=\"https://github.com/udus122/notion-renderer#installation\">Installation</a></h2>\n<div><pre>npm install @udus/notion-renderer@alpha</pre></div>\n<h2 id=\"user-content-usage\"><a target=\"_blank\" href=\"https://github.com/udus122/notion-renderer#usage\">Usage</a></h2>\n<h3 id=\"user-content-quick-start\"><a target=\"_blank\" href=\"https://github.com/udus122/notion-renderer#quick-start\">Quick Start</a></h3>\n<p>First, fetch the blocks of the page you want to render using <a target=\"_blank\" href=\"https://github.com/udus122/notion-renderer/blob/alpha/src/libs/notion/blocks/blocks.ts#L104\"><code>fetchBlockList</code></a>.<br />\nNext, pass the fetched block list to the <a target=\"_blank\" href=\"https://github.com/udus122/notion-renderer/blob/alpha/src/components/Blocks/Renderer.tsx#L24\"><code>BlockRenderer</code></a>.</p>\n<p>If you are using Next.js, you can do it as shown in the sample code below.</p>\n<div><pre><span>import</span> <span>{</span> <span>BlockRenderer</span> <span>}</span> <span>from</span> <span>\"@udus/notion-components/components\"</span><span>;</span>\n<span>import</span> <span>{</span> <span>fetchBlockList</span> <span>}</span> <span>from</span> <span>\"@udus/notion-components/libs\"</span><span>;</span>\n<span>import</span> <span>type</span> <span>{</span> <span>InferGetStaticPropsType</span><span>,</span> <span>NextPage</span> <span>}</span> <span>from</span> <span>\"next\"</span><span>;</span>\n<span>export</span> <span>const</span> <span>getStaticProps</span> <span>=</span> <span>async</span> <span>(</span><span>)</span> <span>=></span> <span>{</span>\n <span>const</span> <span>blocks</span> <span>=</span> <span>await</span> <span>fetchBlockList</span><span>(</span><span>\"YOUR_PAGE_ID\"</span><span>)</span><span>;</span>\n <span>return</span> <span>{</span>\n <span>props</span>: <span>{</span>\n blocks<span>,</span>\n <span>}</span><span>,</span>\n <span>}</span><span>;</span>\n<span>}</span><span>;</span>\n<span>type</span> <span>Props</span> <span>=</span> <span>InferGetStaticPropsType</span><span><</span><span>typeof</span> <span>getStaticProps</span><span>></span><span>;</span>\n<span>const</span> <span>Index</span>: <span>NextPage</span><span><</span><span>Props</span><span>></span> <span>=</span> <span>(</span><span>{</span> blocks <span>}</span><span>)</span> <span>=></span> <span>{</span>\n <span>return</span> <span><</span><span>BlockRenderer</span><span></span> <span>blocks</span><span>=</span><span>{</span>blocks<span>}</span> <span>/</span><span>></span><span>;</span>\n<span>}</span><span>;</span>\n<span>export</span> <span>default</span> <span>Index</span><span>;</span></pre></div>\n<p>And you will need to import CSS styles like below.</p>\n<div><pre><span>// Load the CSS to be used with the Notion Renderer.</span>\n<span>import</span> <span>\"@udus/notion-components/styles/globals.css\"</span><span>;</span>\n<span>// Load the CSS used for rendering equations</span>\n<span>import</span> <span>\"katex/dist/katex.min.css\"</span><span>;</span></pre></div>\n<p>Please set your Notion integration token as an environment variable named <code>NOTION_TOKEN</code>.</p>\n<div><pre><code>.env\nNOTION_TOKEN=secret_epO17gyx***********************************\n</code></pre></div>\n<h3 id=\"user-content-custom-component\"><a target=\"_blank\" href=\"https://github.com/udus122/notion-renderer#custom-component\">Custom Component</a></h3>\n<p>You can render the page using a custom component instead of the default components, you can also create and use your own components.\nPlease see the example of creating custom components at the following link: <a target=\"_blank\" href=\"https://github.com/udus122/notion-renderer/tree/alpha/src/components/Blocks/Custom\">https://github.com/udus122/notion-renderer/tree/alpha/src/components/Blocks/Custom</a></p>\n<div><pre><span>export</span> <span>default</span> <span>(</span><span>)</span> <span>=></span> <span>(</span>\n <span><</span><span>BlockRenderer</span>\n <span>blocks</span><span>=</span><span>{</span><span>blocks</span><span>}</span>\n <span>blockMapper</span><span>=</span><span>{</span>\n <span>toggle</span>: <span>OpenedToggle</span><span>,</span>\n <span>heading_1</span>: <span>OpenedHeading1</span><span>,</span>\n <span>heading_2</span>: <span>OpenedHeading2</span><span>,</span>\n <span>heading_3</span>: <span>OpenedHeading3</span><span>,</span>\n <span>}</span> <span>/</span><span>></span>\n<span>)</span></pre></div>\n<h4 id=\"user-content-color\"><a target=\"_blank\" href=\"https://github.com/udus122/notion-renderer#color\">Color</a></h4>\n<p>If you want to use dark mode, please set the theme to <code>theme=\"dark\"</code> as follows.(<code>theme=\"light\"</code> is default.)</p>\n<div><pre><span>export</span> <span>default</span> <span>(</span><span>)</span> <span>=></span> <span>(</span>\n <span><</span><span>BlockRenderer</span> <span>blocks</span><span>=</span><span>{</span><span>blocks</span><span>}</span> <span>theme</span><span>=</span><span>\"dark\"</span> <span>/</span><span>></span>\n<span>)</span></pre></div>\n<p>If you want to change the color theme, please overwrite the CSS variables set to .notion-light or .notion-dark as follows. The default values are listed below.</p>\n<div><pre>.<span>notion-light</span> {\n <span>--color-text-default</span><span>:</span> <span><span>#</span>37352f</span>;\n <span>--color-bg-default</span><span>:</span> <span><span>#</span>fff</span>;\n <span>--color-pill-default</span><span>:</span> <span>rgb</span>(<span>206</span> <span>205</span> <span>202</span> <span>/</span> <span>50<span>%</span></span>);\n <span>--color-text-gray</span><span>:</span> <span><span>#</span>9b9a97</span>;\n <span>--color-bg-gray</span><span>:</span> <span><span>#</span>ebeced</span>;\n <span>--color-pill-gray</span><span>:</span> <span>rgb</span>(<span>155</span> <span>154</span> <span>151</span> <span>/</span> <span>40<span>%</span></span>);\n <span>--color-text-brown</span><span>:</span> <span><span>#</span>64473a</span>;\n <span>--color-bg-brown</span><span>:</span> <span><span>#</span>e9e5e3</span>;\n <span>--color-pill-brown</span><span>:</span> <span>rgb</span>(<span>140</span> <span>46</span> <span>0</span> <span>/</span> <span>20<span>%</span></span>);\n <span>--color-text-orange</span><span>:</span> <span><span>#</span>d9730d</span>;\n <span>--color-bg-orange</span><span>:</span> <span><span>#</span>faebdd</span>;\n <span>--color-pill-orange</span><span>:</span> <span>rgb</span>(<span>245</span> <span>93</span> <span>0</span> <span>/</span> <span>20<span>%</span></span>);\n <span>--color-text-yellow</span><span>:</span> <span><span>#</span>dfab01</span>;\n <span>--color-bg-yellow</span><span>:</span> <span><span>#</span>fbf3db</span>;\n <span>--color-pill-yellow</span><span>:</span> <span>rgb</span>(<span>233</span> <span>168</span> <span>0</span> <span>/</span> <span>20<span>%</span></span>);\n <span>--color-text-green</span><span>:</span> <span><span>#</span>0f7b6c</span>;\n <span>--color-bg-green</span><span>:</span> <span><span>#</span>ddedea</span>;\n <span>--color-pill-green</span><span>:</span> <span>rgb</span>(<span>0</span> <span>135</span> <span>107</span> <span>/</span> <span>20<span>%</span></span>);\n <span>--color-text-blue</span><span>:</span> <span><span>#</span>0b6e99</span>;\n <span>--color-bg-blue</span><span>:</span> <span><span>#</span>ddebf1</span>;\n <span>--color-pill-blue</span><span>:</span> <span>rgb</span>(<span>0</span> <span>120</span> <span>223</span> <span>/</span> <span>20<span>%</span></span>);\n <span>--color-text-purple</span><span>:</span> <span><span>#</span>6940a5</span>;\n <span>--color-bg-purple</span><span>:</span> <span><span>#</span>eae4f2</span>;\n <span>--color-pill-purple</span><span>:</span> <span>rgb</span>(<span>103</span> <span>36</span> <span>222</span> <span>/</span> <span>20<span>%</span></span>);\n <span>--color-text-pink</span><span>:</span> <span><span>#</span>ad1a72</span>;\n <span>--color-bg-pink</span><span>:</span> <span><span>#</span>f4dfeb</span>;\n <span>--color-pill-pink</span><span>:</span> <span>rgb</span>(<span>221</span> <span>0</span> <span>129</span> <span>/</span> <span>20<span>%</span></span>);\n <span>--color-text-red</span><span>:</span> <span><span>#</span>e03e3e</span>;\n <span>--color-bg-red</span><span>:</span> <span><span>#</span>fbe4e4</span>;\n <span>--color-pill-red</span><span>:</span> <span>rgb</span>(<span>255</span> <span>0</span> <span>26</span> <span>/</span> <span>20<span>%</span></span>);\n}\n.<span>notion-dark</span> {\n <span>--color-text-default</span><span>:</span> <span>rgb</span>(<span>255</span> <span>255</span> <span>255</span> <span>/</span> <span>90<span>%</span></span>);\n <span>--color-bg-default</span><span>:</span> <span><span>#</span>2f3437</span>;\n <span>--color-pill-default</span><span>:</span> <span>rgb</span>(<span>206</span> <span>205</span> <span>202</span> <span>/</span> <span>50<span>%</span></span>);\n <span>--color-text-gray</span><span>:</span> <span>rgb</span>(<span>151</span> <span>154</span> <span>155</span> <span>/</span> <span>95<span>%</span></span>);\n <span>--color-bg-gray</span><span>:</span> <span><span>#</span>454b4e</span>;\n <span>--color-pill-gray</span><span>:</span> <span>rgb</span>(<span>151</span> <span>154</span> <span>155</span> <span>/</span> <span>50<span>%</span></span>);\n <span>--color-text-brown</span><span>:</span> <span><span>#</span>937264</span>;\n <span>--color-bg-brown</span><span>:</span> <span><span>#</span>434040</span>;\n <span>--color-pill-brown</span><span>:</span> <span>rgb</span>(<span>147</span> <span>114</span> <span>100</span> <span>/</span> <span>50<span>%</span></span>);\n <span>--color-text-orange</span><span>:</span> <span><span>#</span>ffa344</span>;\n <span>--color-bg-orange</span><span>:</span> <span><span>#</span>594a3a</span>;\n <span>--color-pill-orange</span><span>:</span> <span>rgb</span>(<span>255</span> <span>163</span> <span>68</span> <span>/</span> <span>50<span>%</span></span>);\n <span>--color-text-yellow</span><span>:</span> <span><span>#</span>ffdc49</span>;\n <span>--color-bg-yellow</span><span>:</span> <span><span>#</span>59563b</span>;\n <span>--color-pill-yellow</span><span>:</span> <span>rgb</span>(<span>255</span> <span>220</span> <span>73</span> <span>/</span> <span>50<span>%</span></span>);\n <span>--color-text-green</span><span>:</span> <span><span>#</span>4dab9a</span>;\n <span>--color-bg-green</span><span>:</span> <span><span>#</span>354c4b</span>;\n <span>--color-pill-green</span><span>:</span> <span>rgb</span>(<span>77</span> <span>171</span> <span>154</span> <span>/</span> <span>50<span>%</span></span>);\n <span>--color-text-blue</span><span>:</span> <span><span>#</span>529cca</span>;\n <span>--color-bg-blue</span><span>:</span> <span><span>#</span>364954</span>;\n <span>--color-pill-blue</span><span>:</span> <span>rgb</span>(<span>82</span> <span>156</span> <span>202</span> <span>/</span> <span>50<span>%</span></span>);\n <span>--color-text-purple</span><span>:</span> <span><span>#</span>9a6dd7</span>;\n <span>--color-bg-purple</span><span>:</span> <span><span>#</span>443f57</span>;\n <span>--color-pill-purple</span><span>:</span> <span>rgb</span>(<span>154</span> <span>109</span> <span>215</span> <span>/</span> <span>50<span>%</span></span>);\n <span>--color-text-pink</span><span>:</span> <span><span>#</span>e255a1</span>;\n <span>--color-bg-pink</span><span>:</span> <span><span>#</span>533b4c</span>;\n <span>--color-pill-pink</span><span>:</span> <span>rgb</span>(<span>226</span> <span>85</span> <span>161</span> <span>/</span> <span>50<span>%</span></span>);\n <span>--color-text-red</span><span>:</span> <span><span>#</span>ff7369</span>;\n <span>--color-bg-red</span><span>:</span> <span><span>#</span>594141</span>;\n <span>--color-pill-red</span><span>:</span> <span>rgb</span>(<span>255</span> <span>115</span> <span>105</span> <span>/</span> <span>50<span>%</span></span>);\n}</pre></div>\n<h2 id=\"user-content-supported-objects\"><a target=\"_blank\" href=\"https://github.com/udus122/notion-renderer#supported-objects\">Supported Objects</a></h2>\n<h3 id=\"user-content-block\"><a target=\"_blank\" href=\"https://github.com/udus122/notion-renderer#block\"></a><a target=\"_blank\" href=\"https://developers.notion.com/reference/block\">Block</a></h3>\n<p>Most common block types are supported.</p>\n<table>\n<thead>\n<tr>\n<th>Block Type</th>\n<th>Supported</th>\n<th>Mapper Field Name</th>\n<th>HTML Tag</th>\n<th>Notes</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Audio</td>\n<td>✅</td>\n<td><code>audio</code></td>\n<td><code><audio></code></td>\n<td></td>\n</tr>\n<tr>\n<td><a target=\"_blank\" href=\"https://developers.notion.com/reference/block#bookmark\">Bookmark</a></td>\n<td>✅</td>\n<td><code>bookmark</code></td>\n<td><code><div></code></td>\n<td>When retrieving an object from the API, we use <a target=\"_blank\" href=\"https://github.com/extractus/article-extractor\">@extractus/article-extractor</a> to obtain meta information of the site such as OGP images and descriptions.</td>\n</tr>\n<tr>\n<td><a target=\"_blank\" href=\"https://developers.notion.com/reference/block#breadcrumb\">Breadcrumb</a></td>\n<td>✅</td>\n<td><code>breadcrumb</code></td>\n<td><code><div></code></td>\n<td>When retrieving an object from the API, we recursively obtain the parent page.</td>\n</tr>\n<tr>\n<td><a target=\"_blank\" href=\"https://developers.notion.com/reference/block#breadcrumb\">Bulleted list item</a></td>\n<td>✅</td>\n<td><code>bullted_list</code>/<code>bullted_list_item</code></td>\n<td><code><ul></code>/<code><li></code></td>\n<td></td>\n</tr>\n<tr>\n<td><a target=\"_blank\" href=\"https://developers.notion.com/reference/block#callout\">Callout</a></td>\n<td>✅</td>\n<td><code>callout</code></td>\n<td><code><div></code></td>\n<td></td>\n</tr>\n<tr>\n<td><a target=\"_blank\" href=\"https://developers.notion.com/reference/block#child-database\">Child database</a></td>\n<td>✅</td>\n<td><code>child_database</code></td>\n<td><code><Link></code></td>\n<td></td>\n</tr>\n<tr>\n<td><a target=\"_blank\" href=\"https://developers.notion.com/reference/block#child-page\">Child page</a></td>\n<td>✅</td>\n<td><code>child_page</code></td>\n<td><code><Link></code></td>\n<td></td>\n</tr>\n<tr>\n<td><a target=\"_blank\" href=\"https://developers.notion.com/reference/block#code\">Code</a></td>\n<td>✅</td>\n<td><code>code</code></td>\n<td><code><pre><code></code></td>\n<td>By default, SyntaxHighlight is not included. If necessary, please create a custom component.</td>\n</tr>\n<tr>\n<td><a target=\"_blank\" href=\"https://developers.notion.com/reference/block#column-list-and-column\">Column list and column</a></td>\n<td>✅</td>\n<td><code>column_list</code></td>\n<td><code><div></code></td>\n<td></td>\n</tr>\n<tr>\n<td><a target=\"_blank\" href=\"https://developers.notion.com/reference/block#divider\">Divider</a></td>\n<td>✅</td>\n<td><code>divider</code></td>\n<td><code><hr></code></td>\n<td></td>\n</tr>\n<tr>\n<td><a target=\"_blank\" href=\"https://developers.notion.com/reference/block#embed\">Embed</a></td>\n<td>✅</td>\n<td><code>embed</code></td>\n<td>passing the <a target=\"_blank\" href=\"https://oembed.com/\">oEmbed</a> content to <code>dangerouslySetInnerHTML</code></td>\n<td>When retrieving an object from the API, we use <a target=\"_blank\" href=\"https://github.com/extractus/oembed-extractor\">@extractus/oembed-extractor</a> to obtain the oEmbed content.</td>\n</tr>\n<tr>\n<td><a target=\"_blank\" href=\"https://developers.notion.com/reference/block#equation\">Equation</a></td>\n<td>✅</td>\n<td><code>equation</code></td>\n<td><a target=\"_blank\" href=\"https://katex.org/\">katex</a></td>\n<td>In order to render properly, you need to import <code>katex/dist/katex.min.css</code>.</td>\n</tr>\n<tr>\n<td><a target=\"_blank\" href=\"https://developers.notion.com/reference/block#file\">File</a></td>\n<td>✅</td>\n<td><code>file</code></td>\n<td><code><Link></code></td>\n<td></td>\n</tr>\n<tr>\n<td><a target=\"_blank\" href=\"https://developers.notion.com/reference/block#headings\">Heading1</a></td>\n<td>✅</td>\n<td><code>heading_1</code></td>\n<td><code><h1></code></td>\n<td></td>\n</tr>\n<tr>\n<td><a target=\"_blank\" href=\"https://developers.notion.com/reference/block#headings\">Heading2</a></td>\n<td>✅</td>\n<td><code>heading_2</code></td>\n<td><code><h2></code></td>\n<td></td>\n</tr>\n<tr>\n<td><a target=\"_blank\" href=\"https://developers.notion.com/reference/block#headings\">Heading3</a></td>\n<td>✅</td>\n<td><code>heading_3</code></td>\n<td><code><h3></code></td>\n<td></td>\n</tr>\n<tr>\n<td><a target=\"_blank\" href=\"https://developers.notion.com/reference/block#image\">Image</a></td>\n<td>✅</td>\n<td><code>image</code></td>\n<td><code><img></code></td>\n<td></td>\n</tr>\n<tr>\n<td><a target=\"_blank\" href=\"https://developers.notion.com/reference/block#link-preview\">Link Preview</a></td>\n<td>✅</td>\n<td><code>link_preview</code></td>\n<td><code><Link></code></td>\n<td>When retrieving an object from the API, we use <a target=\"_blank\" href=\"https://github.com/extractus/article-extractor\">@extractus/article-extractor</a> to obtain meta information of the site such as OGP images and descriptions.</td>\n</tr>\n<tr>\n<td><a target=\"_blank\" href=\"https://developers.notion.com/reference/block#numbered-list-item\">Numbered lit item</a></td>\n<td>✅</td>\n<td><code>numbered_list</code>/<code>numbered_list_item</code></td>\n<td><code><ol></code>/<code><li></code></td>\n<td></td>\n</tr>\n<tr>\n<td><a target=\"_blank\" href=\"https://developers.notion.com/reference/block#paragraph\">Paragraph</a></td>\n<td>✅</td>\n<td><code>paragraph</code></td>\n<td><code><p></code></td>\n<td></td>\n</tr>\n<tr>\n<td><a target=\"_blank\" href=\"https://developers.notion.com/reference/block#pdf\">PDF</a></td>\n<td>✅</td>\n<td><code>pdf</code></td>\n<td><code><object type=\"application/pdf></code></td>\n<td></td>\n</tr>\n<tr>\n<td><a target=\"_blank\" href=\"https://developers.notion.com/reference/block#quote\">Quote</a></td>\n<td>✅</td>\n<td><code>quote</code></td>\n<td><code><blockquote></code></td>\n<td></td>\n</tr>\n<tr>\n<td><a target=\"_blank\" href=\"https://developers.notion.com/reference/block#synced-block\">Synced block</a></td>\n<td>✅</td>\n<td><code>synced_block</code></td>\n<td><code><div></code></td>\n<td></td>\n</tr>\n<tr>\n<td><a target=\"_blank\" href=\"https://developers.notion.com/reference/block#table\">Table</a></td>\n<td>✅</td>\n<td><code>table</code></td>\n<td><code><table></code></td>\n<td></td>\n</tr>\n<tr>\n<td><a target=\"_blank\" href=\"https://developers.notion.com/reference/block#table\">Table</a></td>\n<td>✅</td>\n<td><code>table</code></td>\n<td><code><table></code></td>\n<td></td>\n</tr>\n<tr>\n<td><a target=\"_blank\" href=\"https://developers.notion.com/reference/block#table-of-contents\">Table of contents</a></td>\n<td>✅</td>\n<td><code>table_of_contents</code></td>\n<td><code><div></code></td>\n<td></td>\n</tr>\n<tr>\n<td><a target=\"_blank\" href=\"https://developers.notion.com/reference/block#table-of-contents\">Template</a></td>\n<td>❌</td>\n<td><code>template</code></td>\n<td></td>\n<td>Deprecated</td>\n</tr>\n<tr>\n<td><a target=\"_blank\" href=\"https://developers.notion.com/reference/block#to-do\">To do</a></td>\n<td>✅</td>\n<td><code>to_do</code></td>\n<td><code><div></code></td>\n<td></td>\n</tr>\n<tr>\n<td><a target=\"_blank\" href=\"https://developers.notion.com/reference/block#toggle-blocks\">Toggle Blocks</a></td>\n<td>✅</td>\n<td><code>toggle</code></td>\n<td><code><details><summary></code></td>\n<td></td>\n</tr>\n<tr>\n<td><a target=\"_blank\" href=\"https://developers.notion.com/reference/block#video\">Video</a></td>\n<td>✅</td>\n<td><code>video</code></td>\n<td><code><video></code></td>\n<td>YouTube is supported through the oEmbed API.</td>\n</tr>\n</tbody>\n</table>\n<h4 id=\"user-content-rich-text\"><a target=\"_blank\" href=\"https://github.com/udus122/notion-renderer#rich-text\"></a><a target=\"_blank\" href=\"https://developers.notion.com/reference/rich-text#rich-text-type-objects\">Rich text</a></h4>\n<table>\n<thead>\n<tr>\n<th>Rich text Type</th>\n<th>Supported</th>\n<th>Mapper Field Name</th>\n<th>HTML Tag</th>\n<th>Notes</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><a target=\"_blank\" href=\"https://developers.notion.com/reference/rich-text#equation\">Equation</a></td>\n<td>✅</td>\n<td><code>equation</code></td>\n<td><a target=\"_blank\" href=\"https://katex.org/\">katex</a></td>\n<td>In order to render properly, you need to import <code>katex/dist/katex.min.css</code>.</td>\n</tr>\n<tr>\n<td><a target=\"_blank\" href=\"https://developers.notion.com/reference/rich-text#mention\">Mention</a></td>\n<td>✅</td>\n<td><code>mention</code></td>\n<td><code><span></code></td>\n<td></td>\n</tr>\n<tr>\n<td><a target=\"_blank\" href=\"https://developers.notion.com/reference/rich-text#text\">Text</a></td>\n<td>✅</td>\n<td><code>text</code></td>\n<td><code><span></code></td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h5 id=\"user-content-annotation\"><a target=\"_blank\" href=\"https://github.com/udus122/notion-renderer#annotation\"></a><a target=\"_blank\" href=\"https://developers.notion.com/reference/rich-text#the-annotation-object\">Annotation</a></h5>\n<table>\n<thead>\n<tr>\n<th>Annotation Type</th>\n<th>Supported</th>\n<th>Mapper Field Name</th>\n<th>HTML Tag</th>\n<th>Notes</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Bold</td>\n<td>✅</td>\n<td><code>bold</code></td>\n<td><code><strong></code></td>\n<td></td>\n</tr>\n<tr>\n<td>Italic</td>\n<td>✅</td>\n<td><code>italic</code></td>\n<td><code><em></code></td>\n<td></td>\n</tr>\n<tr>\n<td>Strikethrough</td>\n<td>✅</td>\n<td><code>strikethrough</code></td>\n<td><code><del></code></td>\n<td></td>\n</tr>\n<tr>\n<td>Underline</td>\n<td>✅</td>\n<td><code>underline</code></td>\n<td><code><u></code></td>\n<td></td>\n</tr>\n<tr>\n<td>Code</td>\n<td>✅</td>\n<td><code>code</code></td>\n<td><code><code></code></td>\n<td></td>\n</tr>\n<tr>\n<td>Color</td>\n<td>✅</td>\n<td><code>color</code></td>\n<td><code><span></code></td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"user-content-page\"><a target=\"_blank\" href=\"https://github.com/udus122/notion-renderer#page\">Page</a></h3>\n<p>comming soon.</p>\n<h3 id=\"user-content-database\"><a target=\"_blank\" href=\"https://github.com/udus122/notion-renderer#database\">Database</a></h3>\n<p>comming soon.</p>\n<h2 id=\"user-content-contributing\"><a target=\"_blank\" href=\"https://github.com/udus122/notion-renderer#contributing\">Contributing</a></h2>\n<p>Pull requests are welcome.</p>\n<h2 id=\"user-content-license\"><a target=\"_blank\" href=\"https://github.com/udus122/notion-renderer#license\">License</a></h2>\n<p><a target=\"_blank\" href=\"https://choosealicense.com/licenses/mit/\">MIT</a></p>\n</article>\n </div>",
"author": "",
"favicon": "https://github.githubassets.com/favicons/favicon.svg",
"source": "github.com",
"published": "",
"ttr": 173
}
}
}