CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-highlightjs--cdn-assets

Pre-compiled CDN assets for highlight.js syntax highlighting with language autodetection and theme support.

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

language-assets.mddocs/

Language Assets

Individual language definition files and theme CSS files for modular loading, enabling dynamic imports and optimized bundle sizes.

Capabilities

Language Files

192 individual language definition files for on-demand loading.

// Language file imports (ES modules)
import langDefinition from '@highlightjs/cdn-assets/es/languages/{language}.js';
import langDefinition from '@highlightjs/cdn-assets/languages/{language}.min.js';

// Available languages (examples):
// javascript, python, java, cpp, csharp, php, ruby, go, rust, 
// typescript, html, css, xml, json, yaml, sql, bash, dockerfile,
// markdown, latex, r, matlab, scala, kotlin, swift, dart, and 170+ more

Usage Examples:

// Dynamic ES module import
async function loadLanguage(langName) {
  try {
    const langModule = await import(`@highlightjs/cdn-assets/es/languages/${langName}.js`);
    hljs.registerLanguage(langName, langModule.default);
    return true;
  } catch (error) {
    console.error(`Failed to load ${langName}:`, error);
    return false;
  }
}

// Load and use a language
await loadLanguage('python');
const result = hljs.highlight('def hello(): print("world")', { language: 'python' });

// Minified version for production
import pythonLang from '@highlightjs/cdn-assets/languages/python.min.js';
hljs.registerLanguage('python', pythonLang);

UMD Language Files

Language files compatible with browsers and CommonJS environments.

// Browser script tag loading
<script src="@highlightjs/cdn-assets/languages/javascript.min.js"></script>

// CommonJS require
const pythonLang = require('@highlightjs/cdn-assets/languages/python.min.js');
hljs.registerLanguage('python', pythonLang);

Usage Examples:

<!-- Browser loading with script tags -->
<script src="@highlightjs/cdn-assets/highlight.min.js"></script>
<script src="@highlightjs/cdn-assets/languages/python.min.js"></script>
<script src="@highlightjs/cdn-assets/languages/javascript.min.js"></script>
<script>
  // Languages are automatically registered in browser
  hljs.highlightAll();
</script>

Theme/Style Files

160 CSS theme files for visual styling and syntax coloring.

/* Theme CSS files */
@import '@highlightjs/cdn-assets/styles/{theme-name}.css';
@import '@highlightjs/cdn-assets/styles/{theme-name}.min.css';

/* Popular themes include: */
/* default, github, vs, vs2015, atom-one-dark, atom-one-light, */
/* monokai, solarized-dark, solarized-light, dracula, nord, */
/* tomorrow, tomorrow-night, base16, railscasts, and 145+ more */

Usage Examples:

<!-- Link theme CSS in HTML -->
<link rel="stylesheet" href="@highlightjs/cdn-assets/styles/github.css">
<link rel="stylesheet" href="@highlightjs/cdn-assets/styles/atom-one-dark.min.css">

<!-- Dynamic theme loading -->
<script>
function loadTheme(themeName) {
  const existingLink = document.querySelector('link[data-hljs-theme]');
  if (existingLink) existingLink.remove();
  
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = `@highlightjs/cdn-assets/styles/${themeName}.css`;
  link.dataset.hljsTheme = 'true';
  document.head.appendChild(link);
}

loadTheme('vs2015');
</script>

Language Categories

Programming Languages

// Systems programming
await loadLanguage('rust');
await loadLanguage('cpp');
await loadLanguage('c');
await loadLanguage('go');

// Web development
await loadLanguage('javascript');
await loadLanguage('typescript');
await loadLanguage('html');
await loadLanguage('css');
await loadLanguage('php');

// Application development
await loadLanguage('java');
await loadLanguage('csharp');
await loadLanguage('python');
await loadLanguage('ruby');
await loadLanguage('kotlin');
await loadLanguage('swift');

// Functional programming
await loadLanguage('haskell');
await loadLanguage('scala');
await loadLanguage('erlang');
await loadLanguage('elixir');
await loadLanguage('clojure');

Markup and Data Languages

// Markup languages
await loadLanguage('xml');
await loadLanguage('markdown');
await loadLanguage('latex');
await loadLanguage('asciidoc');

// Data formats
await loadLanguage('json');
await loadLanguage('yaml');
await loadLanguage('toml');
await loadLanguage('ini');
await loadLanguage('csv');

// Configuration files
await loadLanguage('nginx');
await loadLanguage('apache');
await loadLanguage('dockerfile');
await loadLanguage('makefile');

Database and Query Languages

// SQL variants
await loadLanguage('sql');
await loadLanguage('mysql');
await loadLanguage('postgresql');
await loadLanguage('sqlite');

// NoSQL
await loadLanguage('mongodb');
await loadLanguage('redis');

// Query languages
await loadLanguage('graphql');
await loadLanguage('sparql');

Shell and Scripting

// Shell scripting
await loadLanguage('bash');
await loadLanguage('zsh');
await loadLanguage('powershell');
await loadLanguage('batch');

// Scripting languages
await loadLanguage('perl');
await loadLanguage('lua');
await loadLanguage('tcl');
await loadLanguage('awk');

Theme Categories

Light Themes

/* Clean and minimal */
@import '@highlightjs/cdn-assets/styles/default.css';
@import '@highlightjs/cdn-assets/styles/github.css';
@import '@highlightjs/cdn-assets/styles/vs.css';

/* Colorful */
@import '@highlightjs/cdn-assets/styles/atom-one-light.css';
@import '@highlightjs/cdn-assets/styles/solarized-light.css';
@import '@highlightjs/cdn-assets/styles/tomorrow.css';

Dark Themes

/* Popular dark themes */
@import '@highlightjs/cdn-assets/styles/vs2015.css';
@import '@highlightjs/cdn-assets/styles/atom-one-dark.css';
@import '@highlightjs/cdn-assets/styles/monokai.css';
@import '@highlightjs/cdn-assets/styles/dracula.css';
@import '@highlightjs/cdn-assets/styles/nord.css';

/* Terminal-inspired */
@import '@highlightjs/cdn-assets/styles/tomorrow-night.css';
@import '@highlightjs/cdn-assets/styles/railscasts.css';

High Contrast and Accessibility

/* High contrast themes */
@import '@highlightjs/cdn-assets/styles/a11y-dark.css';
@import '@highlightjs/cdn-assets/styles/a11y-light.css';

/* Low contrast */
@import '@highlightjs/cdn-assets/styles/base16/google-light.css';
@import '@highlightjs/cdn-assets/styles/base16/google-dark.css';

Dynamic Loading Patterns

Language Loading with Fallback

const languageLoader = {
  cache: new Set(),
  
  async load(language) {
    if (this.cache.has(language)) return true;
    if (hljs.getLanguage(language)) {
      this.cache.add(language);
      return true;
    }
    
    try {
      const module = await import(`@highlightjs/cdn-assets/es/languages/${language}.js`);
      hljs.registerLanguage(language, module.default);
      this.cache.add(language);
      return true;
    } catch (error) {
      console.warn(`Language ${language} not available`);
      return false;
    }
  },
  
  async loadMultiple(languages) {
    const results = await Promise.allSettled(
      languages.map(lang => this.load(lang))
    );
    return results.map((result, i) => ({
      language: languages[i],
      loaded: result.status === 'fulfilled' && result.value
    }));
  }
};

// Usage
await languageLoader.load('rust');
const loadResults = await languageLoader.loadMultiple(['python', 'go', 'unknown']);

Theme Switching System

class ThemeManager {
  constructor() {
    this.currentTheme = 'default';
    this.themeCache = new Map();
  }
  
  async loadTheme(themeName) {
    if (this.themeCache.has(themeName)) {
      return this.themeCache.get(themeName);
    }
    
    try {
      // Preload theme CSS
      const response = await fetch(`@highlightjs/cdn-assets/styles/${themeName}.css`);
      const css = await response.text();
      this.themeCache.set(themeName, css);
      return css;
    } catch (error) {
      console.error(`Failed to load theme ${themeName}`);
      return null;
    }
  }
  
  async switchTheme(themeName) {
    const css = await this.loadTheme(themeName);
    if (!css) return false;
    
    // Remove current theme
    const existingLink = document.querySelector('link[data-hljs-theme]');
    if (existingLink) existingLink.remove();
    
    // Apply new theme
    const style = document.createElement('style');
    style.textContent = css;
    style.dataset.hljsTheme = themeName;
    document.head.appendChild(style);
    
    this.currentTheme = themeName;
    return true;
  }
  
  getCurrentTheme() {
    return this.currentTheme;
  }
}

// Usage
const themeManager = new ThemeManager();
await themeManager.switchTheme('atom-one-dark');

Lazy Loading with Intersection Observer

class LazyHighlighter {
  constructor() {
    this.observer = new IntersectionObserver(
      this.handleIntersection.bind(this),
      { rootMargin: '50px' }
    );
  }
  
  async handleIntersection(entries) {
    for (const entry of entries) {
      if (entry.isIntersecting) {
        const element = entry.target;
        const language = this.detectLanguage(element);
        
        if (language && !hljs.getLanguage(language)) {
          await this.loadLanguage(language);
        }
        
        hljs.highlightElement(element);
        this.observer.unobserve(element);
      }
    }
  }
  
  async loadLanguage(language) {
    try {
      const module = await import(`@highlightjs/cdn-assets/es/languages/${language}.js`);
      hljs.registerLanguage(language, module.default);
    } catch (error) {
      console.warn(`Could not load language: ${language}`);
    }
  }
  
  detectLanguage(element) {
    const classes = element.className.match(/language-(\w+)/);
    return classes ? classes[1] : null;
  }
  
  observe(element) {
    this.observer.observe(element);
  }
}

// Usage
const lazyHighlighter = new LazyHighlighter();
document.querySelectorAll('pre code').forEach(el => {
  lazyHighlighter.observe(el);
});

File Structure Reference

@highlightjs/cdn-assets/
├── highlight.js              # Full UMD build
├── highlight.min.js          # Minified UMD build
├── es/                       # ES6 modules
│   ├── highlight.js          # ES6 build
│   ├── highlight.min.js      # Minified ES6 build
│   ├── core.js              # Core without languages
│   ├── core.min.js          # Minified core
│   └── languages/           # ES6 language modules
│       ├── javascript.js
│       ├── python.js
│       └── ... (190+ more)
├── languages/               # UMD language files
│   ├── javascript.min.js
│   ├── python.min.js
│   └── ... (190+ more)
└── styles/                  # CSS themes
    ├── default.css
    ├── github.css
    ├── vs2015.css
    └── ... (158+ more)

docs

configuration.md

core-highlighting.md

index.md

language-assets.md

language-management.md

plugins.md

utilities.md

tile.json