JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 162
  • Score
    100M100P100Q78488F
  • License MIT

HTML parser to React component built on the top of html-react-parser with code syntax highlighting

Package Exports

  • tiptap-parser

Readme

tiptap-parser

tiptap-parser: HTML parser for Tiptap html-react-parser with code syntax highlighting.

Table of Contents

Demo

Try it yourself in this CodeSandbox live demo

Screenshot

Installation

npm  install  tiptap-parser

or

yarn  add  tiptap-parser

Get started

Simple usage

import TiptapParser from "tiptap-parser";

const html = `<h1>Hello world</h1>`;

function App() {
  return (
    <TiptapParser>
      {html}
    </TiptapParser>
  );
}

Content with code

const html = `<><h1>Hello there</h1><code>console.log("Log something here")</code></>`;

function App() {
  return (
    <TiptapParser language="typescript">
      {html}
    </TiptapParser>
  );
}

Customization

const html = `<p><h1>Hello there</h1></p>`;

<TiptapParser
  classNames={{
    codeClassName: 'p-6',
    h1ClassName: 'text-xl',
    aClassName: 'underline',
    pClassName: 'text-gray-400'
  }}
/>
  {html}
</TiptapParser>

Props

props type Default value Description
containerClassName string empty styles of the container
classNames ClassNameProps empty class names of each element withing the container
language string empty language of the code. see the list

classNames Props

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

Contributing

Get started here.