markular

A lightweight Markdown Editor for Angular.

📍 Introduction

markular is a fast to setup and easy to use open source Markdown editor for Angular >= 20.

Key features are:

• Markdown editing
• Formatting toolbar
• Keyboard shortcuts
• Editing history
• Markdown file download
• Markdown to HTML rendering / preview

Internally, it uses marked for parsing Markdown and dompurify for sanitizing the output HTML.

Demo

📦 Installation

Install via npm:

npm i --save markular

🔨 Usage

Setup

Import the according component:

import { Markular } from 'markular';
import { FormsModule } from '@angular/forms';

@Component({
  imports: [Markular, FormsModule]
  // ...
})
export class MyApp {
  markdown = '# Hello World!'
}

and use it in your template:

<markular [(ngModel)]="markdown"></markular>

See the demo app for a more detailed example.

API

| Name | Description | Type | Default | |-------------|-----------------------|-----------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------| | options | Markular options | Options | Default | | placeholder | Editor placeholder | string | 'Enter markdown...' | | rows | Editor number of rows | number | 10 |

Keyboard Shortcuts

On MacOS you can use CMD button instead of Ctrl.

| Shortcut | Action | |------------------|-------------------------| | Ctrl + b | Bold | | Ctrl + i | Italic | | Ctrl + z | Undo | | Ctrl + Shift + z | Redo | | Ctrl + Enter | Toggle editor / preview |

👋 Shoutouts

A big shoutout and thank you to:

• Flowbite for their icons

🧩 Contributing

Any contribution is appreciated! See CONTRIBUTING.md

🔑 License

markular is released under MIT license.