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-code

v1.0.0

Published

syntax highlighting library using javascript styles. README is WIP.

Downloads

27

Readme

Code Highlight

syntax highlighting library using javascript styles. README is WIP.

Install

npm install highlight-code --save

Javascript Styles!

One of the biggest pain points for me trying to find a syntax highlighter for my own projects was the need to put a stylesheet tag on my page. I wanted to provide out of the box code styling with my modules without requiring awkward inclusion of another libs stylesheets. The styles in this module are all javascript based, and all styles supported by highlight.js have been ported!

Use

Code Highlight takes a single object argument that looks at the following properties:

  • language - the language to highlight code in.
  • style - style object required from highlight.js-js-styles. You can see available styles here. import { style } from 'highlight.js-js-styles' . Will use default if style is not included.
  • codeString - the code string to highlight.
  • customStyle - properties that will be combined with the top level style on the pre tag, styles here will overwrite earlier styles.
  • codeTagProps - properties that will be added to the <code> tag that is the direct parent of the highlighted code elements. Useful for styling/assigning classNames.

additional properties will be assigned to the pre tag with setAttribute

import SyntaxHighlighter from 'code-higlight';
import { docco } from 'highlight.js-js-styles

const codeString = `const woah = fun => fun + 1;
const dude = woah(2) + 3;
function thisIsAFunction() {
  return [1,2,3].map(n => n + 1).filter(n !== 3);
}
console.log('making up fake code is really hard');

function itIs() {
  return 'no seriously really it is';
}`;

SyntaxHighlighter({
  codeString,
  language: 'javascript',
  style: docco,
  querySelector: '#app'
});