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: 9 days ago
JSON representation

A vanilla Markdown Web Component with optional syntax highlighting support

• Host: GitHub
• URL: https://github.com/vanillawc/wc-markdown
• Owner: vanillawc
• License: mit
• Created: 2019-02-20T08:59:34.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2021-11-11T20:03:24.000Z (about 3 years ago)
• Last Synced: 2024-09-19T13:21:34.244Z (about 2 months ago)
• Topics: markdown, syntax-highlighting, vanilla, web-components
• Language: JavaScript
• Homepage:
• Size: 781 KB
• Stars: 63
• Watchers: 2
• Forks: 5
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
<wc-markdown> Markdown with Syntax Highlighing




  

  

  

  

  


  

  



## 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)