tiptap-parser

tiptap-parser

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

Table of Contents

• Installation

• Get started

• Customization

• Props

• Contributing

Demo

Try it yourself in this CodeSandbox live demo

Installation

npm  install  html-code-editor

or

yarn  add  html-code-editor


## Get started

#### Simple usage

```tsx
import parseHtml from 'html-code-editor';

const html = `<p><h1>Hello there</h1><code>console.log("Using it as a component")</code></p>`;

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

Using as a component

import { HtmlCodeParser } from '../Parse'

const html = `<p><h1>Hello there</h1><code>console.log("Using it as a component")</code></p>`;

const App = () => {
  return (
    <HtmlCodeParser language="typescript" codeContainerClassName="custom-class">
      {html}
    </HtmlCodeParser>
  )
}

Language

By default it's use Javascript

  parseHtml(html, { language: 'php' })

  <HtmlCodeParser language="php">
    {html}
  </HtmlCodeParser>

Customization

  parseHtml(html, { codeContainerClassName: 'bg-gray-300' })

  <HtmlCodeParser codeContainerClassName="bg-gray-300">
    {html}
  </HtmlCodeParser>

Props

props	type	Default value	Description
children	string[]	empty	html string
codeContainerClassName	string	empty	styles of the code container
language	string	empty	language of the code ((see the list)[https://github.com/wooorm/lowlight?tab=readme-ov-file#data])

Contributing

Get started here.