Lapel

Dress up your editor. Lapel shows a marker next to each heading to quickly distinguish between heading levels.

️Features

• Shows the heading level in the editor gutter (e.g. h1, h2, h3, etc.)
• Menu for quickly switching the heading level.

Customization

Each heading level can be targeted separately with CSS for easy customization. For example, if you want all H6s to look like burger menus, simply change the heading marker:

.cm-heading-marker[data-level="6"] {
  --heading-marker: "☰";
}

Settings

• Show before line numbers: By default, heading levels are displayed after the line number in the editor gutter. Enable this to swap the ordering.
• Show in source mode: Optionally show the heading levels in source mode.

Say Thanks 🙏

If you like this plugin and would like to buy me a coffee, you can!