https://github.com/justinribeiro/code-block

A web component that displays colorfully formatted code with Prism.js and LitElement.
https://github.com/justinribeiro/code-block

code-block lit prismjs webcomponent

Last synced: 2 months ago
JSON representation

A web component that displays colorfully formatted code with Prism.js and LitElement.

• Host: GitHub
• URL: https://github.com/justinribeiro/code-block
• Owner: justinribeiro
• License: mit
• Created: 2019-04-17T01:18:28.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2023-07-18T23:03:18.000Z (over 1 year ago)
• Last Synced: 2024-10-01T02:42:15.997Z (2 months ago)
• Topics: code-block, lit, prismjs, webcomponent
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/@justinribeiro/code-block
• Size: 285 KB
• Stars: 29
• Watchers: 1
• Forks: 8
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-lit - `<code-block>` - Web component that displays colorfully formatted code with Prism.js and LitElement. (Standalone Components)

README

        
[![npm version](https://badge.fury.io/js/%40justinribeiro%2Fcode-block.svg)](https://badge.fury.io/js/%40justinribeiro%2Fcode-block)

# \

> A web component that displays colorfully formatted code with Prism.js and Lit.

![screenshot of code-block](https://user-images.githubusercontent.com/643503/56254054-0ce02600-6074-11e9-9caf-e9dcc25b3ab1.png)

## Features

* Loads [Prism.js](https://prismjs.com/) language definitions on demand via dynamic imports from `node_modules/prismjs/components/`

* Loads Prism.js custom themes

* Built as a web component on [Lit](https://lit.dev/)

## Install

This web component is built with ES modules in mind and is

available on NPM:

Install code-block:

```sh

npm i @justinribeiro/code-block

# or

yarn add @justinribeiro/code-block

```

After install, import into your project:

```js

import '@justinribeiro/code-block';

```

Finally, use as required:

```html

function helloWorld(say) {

  console.log(say);

}

helloWorld('Hi there!');

```

## Attributes

The web component allows certain attributes to be give a little additional

flexibility.

 | Name | Description | Default |

 | --- | --- | --- |

 | `language` | Code language you wish to utilize from Prism | `clike` |

 | `theme` | Path to Prism CSS theme file | `/node_modules/prismjs/themes/prism.css` |

## Building

If you want the ability to load the full spectrum of languages that Prism supports, you'll want to make sure your build script includes the `/node_modules/prismjs/**`, as there are many many language resources (and you don't want them all in your bundle, utilize the dynamic loading).