@screeb/markdown-editor-element

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