README file from
GithubNotion Selection Toolbar
A Notion-style floating toolbar for Obsidian. Select some text and a toolbar pops up above it. From there you can change the block type, color the text or highlight it, and apply inline formatting without typing any Markdown.

How to use
- Open a note in editing mode (Live Preview or Source mode). The toolbar doesn't appear in Reading view.
- Select text with the mouse or keyboard. The toolbar appears just above the selection, or below it if there's no room above.
- Click a button to apply it. The selection stays in place, so you can stack several actions, for example a color, then bold, then italic.
- Press Esc or click elsewhere to close the toolbar or any open menu.
Toolbar layout
┌──────────────────────────────┐
│ ¶ Text › │ Turn into (block type)
│ A B I U ⌫ │ Color · Bold · Italic · Underline · Clear formatting
│ 🔗 S̶ <> Σ ⋯ │ Link · Strikethrough · Inline code · Inline equation · More
│ 💬 Comment ✨ │ Comment · Custom button
└──────────────────────────────┘
Turn into (block type)
The top button shows the current line's block type (e.g. Heading 2). Click it to convert the selected line or lines:
| Menu item | Result |
|---|---|
| Text | Removes the heading, list, quote or callout marker |
| Heading 1–4 | # … #### |
| Bulleted / Numbered / To-do list | - , 1. , - [ ] (renumbered automatically when you select several lines) |
| Quote | > |
| Callout | Opens a submenu of Obsidian callout types (Note, Info, Tip, Warning, Danger, Bug, …) → > [!type] |
| Code | Wraps the lines in a ``` code block |
| Block equation | Wraps the lines in a $$ math block |
| Toggle list / Toggle heading 1–4 | A collapsible <details> block. The selected text becomes the summary, and you type the hidden content on the next line |
| 2 columns | A two-column layout. The selected content goes in the left column |
| Page | Moves the selection into a new note in the same folder and leaves a [[wikilink]] in its place. The first line of the selection becomes the note's title |
| Page in | Same as Page, but first asks which folder to create the note in |
Colors
Click A to open the color panel:
- Text color: 9 Notion colors (gray, brown, orange, yellow, green, blue, purple, pink, red)
- Background color: the same 9 colors as highlights
- Default: removes the color from the selection
- Recently used: your last 5 colors
Press Cmd/Ctrl + Shift + H to apply your most recently used color to the selection without opening the toolbar.
Colors follow your theme: applied colors switch automatically between light and dark mode.
Bold colored text uses a slightly deeper bold variant of its color. Bold, italic, strikethrough and code applied to colored or highlighted text are written inside the color tag as HTML (e.g. <span class="nst-fg-red"><strong>text</strong></span>) so they render in Live Preview as well as Reading view. Obsidian's own Cmd/Ctrl + B does the same when the selection is colored or highlighted text.
The palette, based on Notion's colors:
| Color | Text (light) | Bold text (light) | Background (light) | Text (dark) | Bold text (dark) | Background (dark) |
|---|---|---|---|---|---|---|
| Gray | #888784 |
#787774 |
#F1F1EF |
#8F8F8F |
#9B9B9B |
#2F2F2F |
| Brown | #976D57 |
#976D57 |
#F3EEEE |
#B28773 |
#B28773 |
#46332A |
| Orange | #D1873F |
#CC782F |
#F8ECDF |
#AD774D |
#BD8052 |
#573C27 |
| Yellow | #C29343 |
#C29343 |
#FAF3DE |
#C29A56 |
#C29A56 |
#53442C |
| Green | #679176 |
#548164 |
#EEF3EC |
#5C8C6B |
#659C75 |
#2A3C31 |
| Blue | #487CA5 |
#487CA5 |
#E9F3F7 |
#6786C4 |
#6786C4 |
#1E394C |
| Purple | #8A67AB |
#8A67AB |
#F6F3F9 |
#956ACD |
#956ACD |
#3A2E47 |
| Pink | #B75D8F |
#B35488 |
#F8F1F5 |
#B85A8C |
#C25F94 |
#492E3B |
| Red | #C4554D |
#C4554D |
#FAECEC |
#CF5D57 |
#CF5D57 |
#4D302B |
Highlight colors can be customized in settings (see below); text colors are fixed.
Note: Colors are saved as HTML (
<span class="nst-fg-red">,<mark class="nst-hl-yellow">) and get their look from this plugin's CSS. If you disable the plugin, the text stays but the colors stop showing.
Inline formatting
| Button | Markdown |
|---|---|
| Bold / Italic | **text** / *text* |
| Underline | <u>text</u> |
| Strikethrough | ~~text~~ |
| Inline code | `text` |
| Inline equation | $text$ |
| Link | Type or paste a URL and press Enter → [text](url) |
| Clear formatting | Removes bold, italic, underline, strikethrough, highlights, colors, code and block markers from the selection |
Every button toggles: click it again on the same selection to remove the formatting. Formatting a colored selection works too, because the markers are placed inside the color tag so Live Preview renders them correctly.
Other buttons
-
More (⋯): opens Obsidian's command palette.
-
Comment: adds a comment to the selection.
- If the Notion-style Comments plugin is enabled, it opens that plugin's Add comment.
- Otherwise it makes a native Obsidian comment,
%%text%%, using Obsidian's built-in Toggle comment (the same asCmd/Ctrl + /). Click again to remove it. - You can choose which one to always use under Settings → Notion Selection Toolbar → Comment style.
-
Custom button (✨): runs any command you assign to it in settings (see below).
Settings
Go to Settings → Notion Selection Toolbar:
- Light / Dark theme highlight colors: change each background color separately for light and dark mode. Use the ↺ button to reset a color to its default. Highlights already in your notes update immediately.
- Comment style: what the Comment button does. Automatic (default) uses Notion-style Comments when it's enabled and native
%%comments otherwise. You can also pick one of the two to always use. - Custom toolbar button
- Command: pick any command from the command palette for the button to run.
- Icon: any Lucide icon name, e.g.
sparkles,star,zap,bookmark.
Commands & hotkeys
| Command | Default hotkey |
|---|---|
| Apply most recently used color | Cmd/Ctrl + Shift + H |
| Toggle strikethrough | – |
| Toggle underline | – |
You can bind or change hotkeys under Settings → Hotkeys.
Installation (manual)
- Download
main.js,manifest.json, andstyles.cssfrom the latest release. - Put them in
<your vault>/.obsidian/plugins/notion-selection-toolbar/(create the folder if it doesn't exist). - Restart Obsidian, then enable Notion Selection Toolbar under Settings → Community plugins.
Development
npm install
npm run dev
License
MIT