Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/vanillawc/wc-markdown

A vanilla Markdown Web Component with optional syntax highlighting support
https://github.com/vanillawc/wc-markdown

markdown syntax-highlighting vanilla web-components

Last synced: about 2 months ago
JSON representation

A vanilla Markdown Web Component with optional syntax highlighting support

Awesome Lists containing this project

README

        

<wc-markdown> Markdown with Syntax Highlighing


GitHub Releases
NPM Releases
Bundlephobia
Latest Status
Release Status

Discord
Published on WebComponents.org

## Setup

*Install and import from [NPM](https://www.npmjs.com/package/@vanillawc/wc-markdown)*

```sh
npm i @vanillawc/wc-markdown
```

```html

```

*Import from [SkyPack CDN](https://www.skypack.dev/view/@vanillawc/wc-markdown)*

```html

```

## Demo

Try it on [WebComponents.dev](https://webcomponents.dev/edit/FxoojbLdYqBJVJj4Tsex?sv=1&pm=1)

## Usage

**Attributes**

- `src` - load an external source file
- `highlight` - when present, syntax highlighting is applied to code

**Properties**

- `value` - get/set the source code

### External Source

```html

```

### Inline Source

```html


## Inline Markdown

This some sample markdown.

```
*Note: The `` word cannot be used inside here, you'll have to use the escaped `</script>` version instead, you may also use `<script>` for the opening `` tag if you wish to*

### Syntax Highlighting

To apply syntax highlighting, add the `highlight` attribute.

```html
<wc-markdown src="sample2.md" highlight></wc-markdown>
```

### Syntax Highlighting - Theming

Highlighting requires the import of a CSS theme. Themes can be found under `themes/`.

```html
<link rel="stylesheet" href="/node_modules/@vanillawc/wc-markdown/themes/prism-okaidia.css">
```

### Syntax Highlighting - Languages

The PrismJS core includes the following languages `[html, xml, svg, mathml, css, javascript]`.

Additional language modules can be imported from `components/`.

```html
<script type="module" src="/node_modules/@vanillawc/wc-markdown/index.js">

```

Some languages extend others. Ex, `C++` extends `C` so both need to be imported in the correct order.

```html

```

## Contributing

See [CONTRIBUTING.md](https://github.com/vanillawc/vanillawc/blob/main/CONTRIBUTING.md)

## Similar Projects

- [`` - Ridiculously simple zero-config markdown displayer](https://github.com/zerodevx/zero-md)