@xbibzlibrary/codehighlight

v1.0.0

Published

2 months ago

A comprehensive and modern code highlighting library with font support for all programming languages

0High
0Medium
0Low

xbibzbackup

code highlight syntax highlighting programming languages font modern browser

CodeHighlight Library

🎨 A Modern, Beautiful & Powerful Code Highlighting Library

✨ Features

🎁 What's Included?

✅ 30+ Programming Languages - JavaScript, Python, Java, C++, PHP, Ruby, Go, Rust, and more!
✅ 10 Beautiful Themes - Default, Dark, Monokai, GitHub, VS Code, Atom, Dracula, Nord, Solarized
✅ 3 Monospace Fonts - Fira Code, JetBrains Mono, Source Code Pro
✅ Line Numbers - Optional line numbering with highlighting
✅ Copy Button - One-click code copying
✅ Auto Language Detection - Smart algorithm detects language automatically
✅ Custom Themes - Easy to create and add your own themes
✅ Zero Dependencies - Pure JavaScript, no external libraries required
✅ Lightweight - Minimal file size for fast loading

📦 Installation

npm install @xbibzlibrary/codehighlight

Or use CDN:

<script src="https://cdn.jsdelivr.net/npm/@xbibzlibrary/[email protected]/dist/codehighlight.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xbibzlibrary/[email protected]/dist/codehighlight.css">

🚀 Quick Start

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="path/to/codehighlight.css">
</head>
<body>
    <!-- Your code here -->
    <pre><code class="language-javascript">
function hello() {
    console.log("Hello World!");
}
    </code></pre>

    <script src="path/to/codehighlight.min.js"></script>
    <script>
        // Auto-initialization on page load
        const highlighter = new CodeHighlight();
        highlighter.highlight();
    </script>
</body>
</html>

📖 Documentation

🎯 Basic Usage

1. Default Usage (Auto-detect)

const highlighter = new CodeHighlight();
highlighter.highlight(); // Highlights all <pre><code> elements

2. Specific Elements

const highlighter = new CodeHighlight();
highlighter.highlight('.my-code'); // Highlights elements with class 'my-code'

3. With Options

const highlighter = new CodeHighlight({
    theme: 'dark',
    font: 'FiraCode',
    fontSize: '16px',
    showLineNumbers: true,
    highlightLines: [1, 3, 5],
    tabSize: 4,
    autoDetect: true
});

highlighter.highlight();

🎨 Changing Themes

// Method 1: During initialization
const highlighter = new CodeHighlight({ theme: 'monokai' });

// Method 2: After initialization
highlighter.setTheme('dark');
highlighter.setTheme('github');
highlighter.setTheme('dracula');

📝 Available Themes

🔤 Changing Fonts

// Method 1: During initialization
const highlighter = new CodeHighlight({ 
    font: 'JetBrainsMono',
    fontSize: '14px'
});

// Method 2: After initialization
highlighter.setFont('FiraCode', '16px');
highlighter.setFont('SourceCodePro', '15px');

📝 Available Fonts

FiraCode - Modern coding font with ligatures
JetBrainsMono - Created by JetBrains for developers
SourceCodePro - Adobe's coding font

🌍 Supported Languages

| Language | Keyword | Language | Keyword | |----------|---------|----------|---------| | JavaScript | javascript, js | Python | python, py | | Java | java | C/C++ | c, cpp | | C# | csharp, cs | PHP | php | | Ruby | ruby, rb | Go | go | | Rust | rust, rs | Swift | swift | | Kotlin | kotlin, kt | TypeScript | typescript, ts | | Dart | dart | Scala | scala | | Perl | perl, pl | Lua | lua | | R | r | MATLAB | matlab | | Bash/Shell | bash, sh | PowerShell | powershell, ps1 | | SQL | sql | HTML | html | | CSS | css | JSON | json | | XML | xml | YAML | yaml, yml | | TOML | toml | INI | ini | | Dockerfile | dockerfile | Markdown | markdown, md |

🎓 Advanced Usage

📊 Line Numbers & Highlighting

const highlighter = new CodeHighlight({
    showLineNumbers: true,
    highlightLines: [1, 3, 5, 7] // Highlight specific lines
});

highlighter.highlight();

🎨 Custom Themes

const highlighter = new CodeHighlight();

// Add your custom theme
highlighter.addTheme('myTheme', {
    name: 'My Custom Theme',
    css: `
        .code-highlight {
            background-color: #1a1a2e;
            color: #eee;
        }
        .code-highlight .keyword {
            color: #16c8bb;
        }
        .code-highlight .string {
            color: #e94560;
        }
    `
});

// Apply your theme
highlighter.setTheme('myTheme');

🔤 Custom Languages

const highlighter = new CodeHighlight();

// Add custom language
highlighter.addLanguage('mylang', {
    keywords: ['func', 'var', 'let', 'const', 'if', 'else'],
    rules: [
        {
            pattern: /#.*/g,
            className: 'comment'
        },
        {
            pattern: /"([^"\\]|\\.)*"/g,
            className: 'string'
        }
    ]
});

🎯 Manual Language Detection

const highlighter = new CodeHighlight({ autoDetect: false });

// Specify language manually
const element = document.querySelector('.my-code');
element.setAttribute('data-language', 'javascript');

highlighter.highlight();

📋 Using Specific Selectors

const highlighter = new CodeHighlight();

// Highlight specific elements
highlighter.highlight('.code-block');
highlighter.highlight('#my-code');
highlighter.highlight('pre code');

🔧 API Reference

Constructor Options

interface CodeHighlightOptions {
    theme?: string;           // Default: 'default'
    font?: string;           // Default: 'FiraCode'
    fontSize?: string;       // Default: '14px'
    lineHeight?: string;     // Default: '1.5'
    tabSize?: number;        // Default: 4
    showLineNumbers?: boolean; // Default: false
    highlightLines?: number[]; // Default: []
    autoDetect?: boolean;    // Default: true
}

Methods

`highlight(elements, options)`

Highlight code elements.

highlighter.highlight('pre code', {
    theme: 'dark',
    showLineNumbers: true
});

`setTheme(themeName)`

Change the theme.

highlighter.setTheme('monokai');

`setFont(fontName, fontSize)`

Change the font.

highlighter.setFont('JetBrainsMono', '16px');

`addLanguage(name, definition)`

Add a custom language.

highlighter.addLanguage('customlang', {
    keywords: ['keyword1', 'keyword2'],
    rules: [...]
});

`addTheme(name, theme)`

Add a custom theme.

highlighter.addTheme('customtheme', {
    name: 'Custom Theme',
    css: '...'
});

`getAvailableLanguages()`

Get list of supported languages.

const languages = highlighter.getAvailableLanguages();
console.log(languages); // ['javascript', 'python', 'java', ...]

`getAvailableThemes()`

Get list of available themes.

const themes = highlighter.getAvailableThemes();
console.log(themes); // ['default', 'dark', 'monokai', ...]

`getAvailableFonts()`

Get list of available fonts.

const fonts = highlighter.getAvailableFonts();
console.log(fonts); // ['FiraCode', 'JetBrainsMono', 'SourceCodePro']

🎨 Examples

Example 1: Basic JavaScript Highlighting

<pre><code class="language-javascript">
function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(10));
</code></pre>

Example 2: Python with Line Numbers

<script>
const highlighter = new CodeHighlight({
    theme: 'dark',
    showLineNumbers: true,
    highlightLines: [2, 4, 6]
});
</script>

<pre><code class="language-python">
def quicksort(arr):
    if len(arr) <= 1:
        return arr
    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]
    return quicksort(left) + middle + quicksort(right)
</code></pre>

Example 3: Multiple Languages on Same Page

<pre><code class="language-javascript">
const greeting = "Hello World";
console.log(greeting);
</code></pre>

<pre><code class="language-python">
greeting = "Hello World"
print(greeting)
</code></pre>

<pre><code class="language-java">
public class Main {
    public static void main(String[] args) {
        System.out.println("Hello World");
    }
}
</code></pre>

🎪 Live Demo

🤝 Contributing

We love contributions! 💜

<div style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); padding: 20px; border-radius: 10px; margin: 20px 0;">
  <h3 style="color: white; margin-top: 0;">Want to contribute?</h3>
  <ol style="color: white;">
    <li>Fork the repository</li>
    <li>Create your feature branch (<code>git checkout -b feature/AmazingFeature</code>)</li>
    <li>Commit your changes (<code>git commit -m 'Add some AmazingFeature'</code>)</li>
    <li>Push to the branch (<code>git push origin feature/AmazingFeature</code>)</li>
    <li>Open a Pull Request</li>
  </ol>
</div>

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

<div align="center" style="padding: 20px; background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); border-radius: 10px; margin: 20px 0;">
  <p style="color: white; margin: 0; font-size: 18px;">
    📜 <strong>MIT License</strong> - Free to use for personal and commercial projects
  </p>
</div>

👨‍💻 Author

Xbibz Official

⭐ Support

If you like this project, please give it a star! ⭐

<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 30px; border-radius: 15px; margin: 20px 0;">
  <h2 style="color: white; margin-top: 0;">🌟 Star History</h2>
  <p style="color: white; opacity: 0.9; font-size: 16px;">
    Help us reach 1000 stars! Every star motivates us to keep improving!
  </p>
  <div style="margin-top: 20px;">
    <img src="https://img.shields.io/github/stars/xbibzofficial/codehighlight?style=social" alt="GitHub stars">
  </div>
</div>