HTML parser for Tiptap editor build on the of html-react-parser with code syntax highlighting.
Tiptap editor is a text editor used mainly for blogging, and therefore in the back office.
The problem is that if it's just to display the content (for example in a Next.js website), it is overkill to install Tiptap or mui-tiptap editor (and the whole MUI library).
The purpose of this library is precisely to display the contents of mui-tiptap-editor which is an html saved as text.
If you are using a dev oriented blog like Medium, this library is for you.
Try it yourself in this CodeSandbox live demo
npm install tiptap-parser
or
yarn add tiptap-parser
import TiptapParser from "tiptap-parser";
const html = `<h1>Hello world</h1>`;
function App() {
return (
<TiptapParser content={html} />
);
}
const html = `<><h1>Hello there</h1><pre><code>console.log("Log something here")</code></pre></>`;
<TiptapParser content={html} language="typescript" />
const html = `<p><h1>Hello there</h1></p>`;
<TiptapParser
containerClassName="bg-gray-100"
classNames={{
codeClassName: 'p-6',
h1ClassName: 'text-xl',
aClassName: 'underline',
pClassName: 'text-gray-400'
}}
content={html}
/>
props | type | Default value | Description |
---|---|---|---|
content | string |
empty | html string to be displayed |
containerClassName | string |
empty | styles of the container |
classNames | ClassNameProps |
empty | class names of each element withing the container |
language | string |
javascript | language of the code. see the list |
props | type | Default value | Description |
---|---|---|---|
codeClassName | string |
empty | class name of code element |
h1ClassName | string |
empty | class name of h1 element |
h2ClassName | string |
empty | class name of h2 element |
h3ClassName | string |
empty | class name of h3 element |
h4ClassName | string |
empty | class name of h4 element |
h5ClassName | string |
empty | class name of h5 element |
h6ClassName | string |
empty | class name of h6 element |
pClassName | string |
empty | class name of p element |
ulClassName | string |
empty | class name of ul element |
spanClassName | string |
empty | class name of span element |
divClassName | string |
empty | class name of div element |
aClassName | string |
empty | class name of a element |
tableClassName | string |
empty | class name of table element |
imageClassName | string |
empty | class name of image element |
other props | HTMLReactParserOptions |
empty | all html-react-parser props |
Get started here.