mardkdown-editor-element

A lightweight markdown editor for the modern web

Usage

Via npm:

npm install @screeb/markdown-editor-element

import '@screeb/markdown-editor-element';

Or as a <script> tag:

<script
	type="module"
	src="https://cdn.jsdelivr.net/npm/@screeb/markdown-editor-element@^1/index.js"
></script>

Then use the HTML:

<markdown-editor></markdown-editor>

And listen for change events:

document
	.querySelector('markdown-editor')
	.addEventListener('change', (event) => console.log(event.detail));

This will log a string:

"Hello **world**"

Styling

markdown-editor-element uses Shadow DOM, so its inner styling cannot be (easily) changed with arbitrary CSS. Refer to the API below for style customization.

Size

markdown-editor-element has a default size, but you can change it to whatever you want:

markdown-editor {
	width: 400px;
	height: 300px;
}

For instance, to make it expand to fit whatever container you give it:

markdown-editor {
	width: 100%;
	height: 100%;
}

CSS variables

Most colors and sizes can be styled with CSS variables. For example:

markdown-editor {
	--markdown-editor-color: black;
	--markdown-editor-border-color: green;
	--markdown-editor-selection-color: red;
}

Here is a full list of css variables:

| Variable | Default | Description | | ------------------------------------ | ---------------------------------------- | -------------------------------------------------- | | --markdown-editor-background-color | #ffffff | Background color of the entire <markdown-editor> | | --markdown-editor-color | #303140 | Text color of the entire <markdown-editor> | | --markdown-editor-selection-color | #5e21f1 | Background of the <markdown-editor> selection | | --markdown-editor-border-color | #e5e5ed | Border color of the entire <markdown-editor> | | --markdown-editor-shadow | 0px 2px 2px 0px rgba(48, 49, 64, 0.05) | Shadow of the entire <markdown-editor> |

Contributing

Developing

Install dependencies with pnpm install

Start a development server with:

pnpm dev

# or start the server and open the app in a new browser tab
pnpm dev -- --open

Everything inside src/lib is part of the library, everything inside src/routes is used as a showcase.

Building

Build library:

pnpm build

Publishing

pnpm publish