https://github.com/1000ch/x-marked

Web Components which renders markdown using marked.
https://github.com/1000ch/x-marked

markdown marked web-components

Last synced: 2 months ago
JSON representation

Web Components which renders markdown using marked.

• Host: GitHub
• URL: https://github.com/1000ch/x-marked
• Owner: 1000ch
• License: mit
• Created: 2020-01-02T00:29:51.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2024-09-01T08:35:02.000Z (4 months ago)
• Last Synced: 2024-10-12T23:51:24.324Z (3 months ago)
• Topics: markdown, marked, web-components
• Language: TypeScript
• Homepage: https://1000ch.github.io/x-marked/
• Size: 569 KB
• Stars: 6
• Watchers: 3
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

        
# x-marked [![test](https://github.com/1000ch/x-marked/actions/workflows/test.yml/badge.svg)](https://github.com/1000ch/x-marked/actions/workflows/test.yml)

> Web Components which renders markdown using [marked](https://github.com/markedjs/marked).

## Install

Using [npm](https://www.npmjs.org/package/x-marked):

```sh

$ npm install x-marked

```

## Usage

Import `XMarked` and register it as a custom element.

```html

import XMarked from 'https://unpkg.com/x-marked';

customElements.define('x-marked', XMarked);

```

Put ``.

```html

# x-marked

Web Components which renders markdown using [marked](https://github.com/markedjs/marked).

```

## API

### `highlight` attribute/property

Boolean attribute/property to enable highlight.

### `highlight-theme`/`highlightTheme` attribute/property

String attribute/property to specify the theme of syntax highlight. you can specify it by choosing from [PrismJS/prism-themes](https://github.com/PrismJS/prism-themes/tree/master/themes) without `.css` extension.

## License

[MIT](https://1000ch.mit-license.org) © [Shogo Sensui](https://github.com/1000ch)