synxdown
v1.0.0
Published
A lightweight syntax highlighting package for markdown and HTML tags
Downloads
6
Maintainers
boihendoReadme
Synxdown
A lightweight syntax highlighting package for markdown and HTML tags. Perfect for adding color-coded syntax highlighting to your applications without heavy dependencies.
Features
- 🎨 Syntax highlighting for HTML and Markdown
- 🔍 Auto-detection of content type
- 🎯 Lightweight and fast
- 🛠️ Customizable colors and themes
- 📱 Works in both browser and Node.js
- 💫 Zero dependencies
Installation
npm install synxdownQuick Start
const Synxdown = require("synxdown");
// Create a highlighter instance
const highlighter = new Synxdown();
// Highlight HTML
const htmlCode = '<div class="container"><h1>Hello</h1></div>';
console.log(highlighter.highlightHTML(htmlCode));
// Highlight Markdown
const markdownCode = "# Header\n**Bold text** and *italic text*";
console.log(highlighter.highlightMarkdown(markdownCode));
// Auto-detect and highlight
console.log(highlighter.highlight("<p>This is HTML</p>"));
console.log(highlighter.highlight("# This is Markdown"));API Reference
Constructor
const highlighter = new Synxdown(options);Options
{
colors: {
// HTML colors
htmlTag: '#e06c75',
htmlAttr: '#d19a66',
htmlString: '#98c379',
htmlComment: '#5c6370',
// Markdown colors
mdHeader: '#61afef',
mdBold: '#c678dd',
mdItalic: '#e5c07b',
mdCode: '#56b6c2',
mdLink: '#61afef',
mdQuote: '#5c6370',
// General
text: '#abb2bf'
},
theme: 'dark' // 'dark' or 'light'
}Methods
highlightHTML(html)
Highlights HTML syntax with color spans.
const highlighted = highlighter.highlightHTML("<div>Hello</div>");highlightMarkdown(markdown)
Highlights Markdown syntax with color spans.
const highlighted = highlighter.highlightMarkdown("# Hello **World**");highlight(content, type)
Auto-detects content type and highlights accordingly.
const highlighted = highlighter.highlight(content); // auto-detect
const highlighted = highlighter.highlight(content, "html"); // force HTML
const highlighted = highlighter.highlight(content, "markdown"); // force MarkdowngenerateCSS(selector)
Generates CSS for styling highlighted content.
const css = highlighter.generateCSS(".my-code-block");Static Methods
For quick one-off highlighting without creating an instance:
// Static methods
Synxdown.highlightHTML(html, options);
Synxdown.highlightMarkdown(markdown, options);
Synxdown.highlight(content, type, options);Usage Examples
Basic HTML Highlighting
const Synxdown = require("synxdown");
const htmlCode = `
<div class="container" id="main">
<h1>Welcome</h1>
<!-- Comment here -->
<p style="color: red;">Hello <strong>World</strong></p>
</div>`;
const highlighted = Synxdown.highlightHTML(htmlCode);
console.log(highlighted);Basic Markdown Highlighting
const markdownCode = `
# Main Title
## Subtitle
This is **bold** and this is *italic*.
Here's some \`inline code\` and a [link](https://example.com).
> Blockquote here
\`\`\`javascript
const hello = "world";
\`\`\`
`;
const highlighted = Synxdown.highlightMarkdown(markdownCode);
console.log(highlighted);Custom Colors
const highlighter = new Synxdown({
colors: {
htmlTag: "#ff6b6b",
mdHeader: "#4ecdc4",
mdBold: "#45b7d1",
},
});
const highlighted = highlighter.highlight("# Custom **Colors**");Browser Usage
<!DOCTYPE html>
<html>
<head>
<style id="synxdown-css"></style>
</head>
<body>
<div id="code-block" class="synxdown"></div>
<script src="path/to/synxdown.js"></script>
<script>
const highlighter = new Synxdown();
// Inject CSS
document.getElementById("synxdown-css").textContent =
highlighter.generateCSS();
// Highlight code
const code = "<div>Hello World</div>";
document.getElementById("code-block").innerHTML =
highlighter.highlightHTML(code);
</script>
</body>
</html>Supported Syntax
HTML
- Tags with attributes
- Self-closing tags
- Comments
- Attribute values (quoted strings)
Markdown
- Headers (# ## ###)
- Bold (text or text)
- Italic (text or text)
- Inline code (
code) - Links (text)
- Blockquotes (> text)
- Code blocks (
code)
Contributing
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
License
MIT License - see LICENSE file for details.
Changelog
v1.0.0
- Initial release
- HTML syntax highlighting
- Markdown syntax highlighting
- Auto-detection
- Customizable colors
- CSS generation