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

code-sample

v2.0.9

Published

Wrapper element for highlight.js

Downloads

16

Readme

<code-sample>

Build Status Published on webcomponents.org npm version Polymer 3

A wrapper element for highlight.js

A themeable sample code snippet that uses highlight.js for syntax highlighting.
Forget to worry about spaces, indentation, HTML entities, etc.

<code-sample>
  <template>
    <div class="some-class">
      <p>Lorem ipsum dolor…</p>
    </div>
  </template>
</code-sample>

Installation

  1. Install the component using Npm:
$ npm i -S @kuscamara/code-sample
  1. Import Web Components loader (optional):
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
  1. Import the component:
<script type="module" src="node_modules/@kuscamara/code-sample/code-sample.js"></script>

Usage

The code to highlight must be provided inside a <template> tag.

<code-sample>
  <template>
    <p>your code here...</p>
  </template>
</code-sample>

Used inside a custom element

When used inside a custom element you'll need to add the attribute preserve-content to the inner template to prevent Polymer to process the template's content.

<code-sample>
  <template preserve-content>
    <p>your code here...</p>
  </template>
</code-sample>

Used inside a tagged template literal

When used inside a tagged template literal (Polymer or LitElement html function), you should escape any template string (${expression}) to prevent it from being evaluated getting an error.

class SomeElement extends PolymerElement {
  static get template() {
    return html`
      <code-sample type="js">
        <template preserve-content>
          export class Example extends ExampleBase {
            static get template() {
              return html\`
                <p>\${super.template}</p>
              \`;
            }
          }
        </template>
      </code-sample>
    `;
  }
}

Render the code inside the template

To render the code inside the template, use the boolean attribute render.

<code-sample render>
  <template>
    <my-custom-element></my-custom-element>
  </template>
</code-sample>

Copy to clipboard

To display a copy to clipboard button, use the boolean attribute copy-clipboard-button:

<code-sample copy-clipboard-button>
  <template>
    <p>your code here...</p>
  </template>
</code-sample>

Language types

The type attribute specifies the language of the sample code (eg.: html, css, js) and is not needed most of the time because it's automatically set. You can use it when your code sample language is not properly detected.

<code-sample type="css">
  <template>
    .some-class {
      @apply --my-mixin;
    }
  </template>
</code-sample>

Exception: for the case of tagged template literals, you may need to set the type attribute to js, jsx or javascript to prevent the code being formatted as HTML.

<code-sample type="js">
  <template>
    class MyElement extends PolymerElement {
      static get template() {
        return html`
          <style>
            :host {
              display: block;
            }
          </style>
          <p>Hello world!</p>
        `;
      }
    }
  </template>
</code-sample>

Themes

The component includes 8 themes. One Dark is imported as the default theme. To use another theme, import it and set as the theme property.

Example:

<script type="module">
  import { oneLight } from '../node_modules/@kuscamara/code-sample/theme/atom-one-light.js';
  document.querySelector('code-sample').theme = oneLight;
</script>

Available themes

  • atom-one-ligth.js as oneLight
  • default.js as defaultTheme
  • github.js as github
  • one-dark.js as oneDark
  • solarized-dark.js as solarizedDark
  • solarized-light.js as solarizedLight
  • kustom-light.js as kustomLight
  • kustom-dark.js as kustomDark

More themes

You can use your own theme by adding one of the available themes for hightlight.js in a shared style. The shared style should be exported as a tagged template literal.

Example:

import { html } from '../../../@polymer/lit-element/lit-element.js';

export const myOwnTheme = html`
<style>
/* your own styles */
</style>`;

Languages included in the highlightjs pack included with the component:

  • CSS
  • HTTP
  • JavaScript
  • Bash
  • CoffeScript
  • JSON
  • Markdown
  • HTML, XML

highlightjs version: v9.12.0

Styling

The following custom CSS properties are available for styling:

| Custom property | Description | Default | | :---------------------------------------- | :------------------------------------------------------------------------------------ | :------------------------------------------------------------------- | | --code-sample-font-family | font-family applied to <pre> and <code> elements | Operator Mono, Inconsolata, Roboto Mono, monaco, consolas, monospace | | --code-sample-font-size | font-size applied to <pre> and <code> elements | 14px | | --code-sample-demo-padding | padding applied to the container of the rendered code | 0 0 20px | | --code-sample-demo | empty mixin applied to the container of the rendered code | {} | | --code-sample-code-container | empty mixin applied to code container | {} | | --code-sample-code-container-hover | empty mixin applied to code container on :hover | {} | | --code-sample-code-container-hover-button | empty mixin applied to the copy to clipboard button when the code container on :hover | {} | | --code-sample-copy-clipboard-button | empty mixin applied to the copy to clipboard button | {} |

Included themes contain custom CSS properties to set the background and text color.
You may need to add these CSS properties to your own themes.

| Custom property | Description | Default | |:-------------------------------|:----------------------------------------|:------------| | --code-sample-background | code background color | Depends on the theme | | --code-sample-color | code text color | Depends on the theme |