npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

highlight-loader

v0.7.4

Published

Applies highlight.js to given HTML

Downloads

378

Readme

build status

highlight-loader - Applies highlight.js to given module

This loader can apply syntax-highlighting via highlight.js in two ways:

  1. Given HTML (either straight HTML or the output of something like markdown-loader), it will replace the contents of <code> blocks with syntax-highlighted HTML generated by highlight.js. This is the default behavior.

  2. Given a raw file, it will return syntax-highlighted HTML generated by highlight.js. This can be enabled by using the raw parameter.

You probably want to pass the HTML output of this loader through html-loader.

Parameters

raw

If any value is provided, the loader will interpret its input as a raw string to run through highlight.js.

By default, the language is auto-detected. To specify a language, use the lang parameter.

lang

Specify a language for highlight.js. Only works in combination with the raw parameter.

(To specify a language for non-raw input, apply lang-[something] classes to your <code> blocks.)

exec

Execute the input that highlight-loader receives. Useful in cases when chaining another loader which returns a function. One use case is to combine this with the apply-loader.

By default, exec is false and simply treats its input as a string.

Installation

Install with npm:

npm install highlight-loader --save-dev

Make sure highlightjs is included and initialized on your page.

Usage

Add highlight-loader as a webpack loader:

module: {
  loaders: [
    {
      test: /\.md$/,
      loader: 'html!highlight!markdown',
      include: PATHS.markdown
    }
  ]
}

Examples

// Reading HTML from parsed markdown
var highlightedMarkdown = require('html!highlight!markdown!./README.md');

// Reading a file's raw contents and auto-detecting the language
var highlightedRaw = require('html!highlight?raw=true!./example-script.js');

// Reading a file's raw contents and specifying the language
var highlightedRawCss = require('html!highlight?raw=true&lang=css!./example-stylesheet.css');

// Reading HTML from a template loader
var highlightedRenderedJadeTemplate = require('html!highlight?exec!apply!jade!./index.jade')

Contributors

License

highlight-loader is available under MIT. See LICENSE for more details.