sparta-html-styler

sparta-html-styler is a React package that provides a component for rendering HTML strings into a Notion-like UI, following the Sparta design system.

Installation

You can install the package using npm:

``bash


Using npm

`jsx
import { HtmlStyler } from 'sparta-html-styler';

function MyComponent() {
const htmlContent =

Title

Content

return ;
}
`

Supported HTML Elements

sparta-html-styler supports the following HTML elements:

- Code blocks
- Callouts
- Array-type elements (ul, ol)
- h1, h2, h3
- \

2. Style Isolation: Employs Shadow DOM and all: initial styling to completely isolate from external styles, ensuring consistent styling.

3. Notion-style UI: Provides a Notion-like UI based on the Sparta design system.

Dependencies

The package uses the following key dependencies:

- React (^18.0.0) and React DOM (^18.0.0) as peer dependencies
- @emotion/cache (^11.13.1), @emotion/react (^11.13.3), @emotion/styled (^11.13.0): For efficient styling solutions
- @teamsparta/design-system (^2.7.2): Sparta's design system components
- better-react-mathjax (^2.0.3): For rendering mathematical equations
- dompurify (^3.1.6): For sanitizing HTML to prevent XSS attacks
- html-react-parser (^5.1.16): For parsing HTML strings into React components
- react-shadow (^20.5.0): For creating shadow DOM roots
- react-syntax-highlighter (^15.5.0): For syntax highlighting in code blocks

Example

`jsx
import { HtmlStyler } from 'sparta-html-styler';

const htmlContent =

sparta-html-styler Usage Example

Code Block

console.log('Hello, Sparta!');

Callout

Checklist

• Task 1


• Task 2

License

MIT

Contributing

Bug reports, feature requests, and pull requests are always welcome. Please check the project's contribution guidelines before contributing.

Support

If you encounter any issues or have questions, please open an issue.