syntax-highlight-component

Syntax Highlighting Component

✨ Syntax Highlighting Component is a customizable web component that makes your code snippets look beautiful and readable! 🚀

• Built with Lit for fast and lightweight performance ⚡
• Uses Prism.js for accurate and colorful syntax highlighting 🎨
• Easy to use: just drop the component into your HTML and specify the language 📝
• Perfect for documentation, blogs, and developer portfolios 📚

Give your code blocks a professional touch with minimal effort! 💡

Note: This component uses the native HighlightRegistry and ::highlight selector. Check documentation for browser support.

Example

Usage

To use the component, import it in your HTML file and use the <syntax-highlight-component> tag:

<syntax-highlight-component language="css" theme="pink">
  background: linear-gradient(135deg, #9d39e5, #dc454b, #ff1493);
  background-clip: text;
</syntax-highlight-component>

The default theme is light to set other themes use theme attribute and simply pass one one following values: light | dark | pink.

Supported Languages

The language attribute supports the following values:

• markup
• css
• html
• javascript
• typescript
• python
• ruby
• plaintext
• tsx
• jsx
• csharp
• cpp
• git
• go
• java
• json
• md
• php