JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 153
  • Score
    100M100P100Q80052F
  • 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 to React component built on the top of html-react-parser with code syntax highlighting.

Table of Contents

Demo

Try it yourself in this CodeSandbox live demo

Screenshot

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.