Markdown Note Formatting

[refringe]

I would like the ability to save a Markdown note in my vault. When viewing the note it would be formatted, and when editing the note it would appear in Markdown source; much like Github comments, like the one I'm writing now.

My team shares all sorts of technical documents within secure notes at the moment, but without formatting it can be a bit of an eye sore to look at.

[juev]

I support the idea because this functionality is missing. I understand that this will not be supported in bitwarden clients, but at least in the web interface it would be great to see.

[TWSheppard]

I seem to have a solution for me, and maybe others.

I've been playing with Vaultwarden for about 3(?) years now and have not made the switch from 1Password 7 because I use markdown extensively in notes and it's just not something I'm willing to give up. But 1Pv7 doesn't work great in macOS Sequoia so I'm thinking hard about whether to pay 1Pv8's subscription, Bitwarden's sub, or self-host which is what I'm doing when I'm playing with Vaultwarden. Since I'm not a knowledgeable web programmer but a tinkerer I called upon the mighty A.I. gods and asked ChatGPT for a solution. It failed miserably. Then I asked Claude. It got me 95% there on the first prompt and after several more prompts seems to handle the limited tests I've run in Firefox. No, I haven't done complete markdown tests or tested on other browsers. I can't offer any assistance since I only sort of understand what it's doing.

Since I don't know of any other way to do this, I used the Tampermonkey browser extension to inject JavaScript into the Vaultwarden web UI. It works great. When viewing notes fields in items, or a secure note, it's now fully styled including allowing HTML styling. When editing, it's raw text.

Now, a competent person would post the code as a github project with proper documentation but I've never done that because I haven't a clue how to set it up and respond to user requests. It sounds like it would be time consuming and I don't want to be the maintainer of a project I may never use if I stay on 1P. It's kinda intimidating for an old fart like me. So forgive me for just offering the code inline here. Use at your own risk, yada, yada.

Install the Tampermonkey extension and create a new script for the URL you use in the Vaultwarden web UI. Then paste the following into the edit box, change the @match value to match your URL, save it, make sure it's enabled, refresh the Vaultwarden page to load the JavaScript (you'll need to log in again), and view a note. It should work. Good luck!

// ==UserScript==
// @name         Vaultwarden Notes Markdown
// @namespace    http://tampermonkey.net/
// @version      2025-10-24.09.53
// @description  Render Markdown in the Notes field of Vaultwarden web vault
// @match        https://<YOUR URL GOES HERE>/*
// @grant        none
// @require      https://cdn.jsdelivr.net/npm/marked/marked.min.js
// ==/UserScript==

(function() {
    'use strict';

    // Configure marked to break on single newlines
    marked.setOptions({
        breaks: true,     // Treat single line breaks as <br>
        gfm: true,        // Enable GitHub Flavored Markdown
        sanitize: false,  // Allow HTML tags
        mangle: false,    // Don't escape autolinked email addresses
        headerIds: false  // Don't add IDs to headers
    });

    // Add custom styles for markdown elements
    const style = document.createElement('style');
    style.textContent = `
        .markdown-content blockquote {
            border-left: 4px solid #ccc;
            padding: 10px 15px;
            margin: 10px 0;
            background-color: #f5f5f5;
            color: #666;
        }
        .markdown-content blockquote p {
            margin: 0;
        }
        .markdown-content pre {
            background-color: #f4f4f4;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 10px;
            overflow-x: auto;
        }
        .markdown-content code {
            background-color: #f4f4f4;
            padding: 2px 6px;
            border-radius: 3px;
            font-family: monospace;
        }
        .markdown-content pre code {
            background-color: transparent;
            padding: 0;
        }
        .markdown-content table {
            border-collapse: collapse;
            width: 100%;
            margin: 10px 0;
        }
        .markdown-content table th,
        .markdown-content table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        .markdown-content table th {
            background-color: #f2f2f2;
        }
    `;
    document.head.appendChild(style);

    // Process the notes field
    function processNotesField(textarea) {
        // Check if already processed
        if (textarea.dataset.markdownProcessed === 'true') {
            return;
        }

        // Check if textarea still has a parent (not removed from DOM)
        if (!textarea.parentNode) {
            return;
        }

        // .value preserves newlines in textareas
        const originalText = textarea.value;

        // Convert markdown to HTML using marked
        const convertedHtml = marked.parse(originalText);

        // Create a container div to hold the rendered HTML
        const container = document.createElement('div');
        container.innerHTML = convertedHtml;
        container.className = textarea.className + ' markdown-content';
        container.style.cssText = window.getComputedStyle(textarea).cssText;
        container.style.whiteSpace = 'normal';
        container.style.wordWrap = 'break-word';
        container.style.padding = '8px';

        // Store original for potential restoration
        container.dataset.originalText = originalText;

        // Replace textarea with rendered div
        textarea.parentNode.replaceChild(container, textarea);

        // Mark as processed
        container.dataset.markdownProcessed = 'true';
    }

    // Observer to watch for the notes field appearing
    const observer = new MutationObserver((mutations) => {
        for (const mutation of mutations) {
            for (const node of mutation.addedNodes) {
                if (node.nodeType === 1) { // Element node
                    // Check if this node is the textarea or contains it
                    const textarea = node.id === 'notes' ? node : node.querySelector('#notes');
                    if (textarea && textarea.tagName === 'TEXTAREA') {
                        processNotesField(textarea);
                    }
                }
            }
        }
    });

    // Start observing
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

    // Also check for any existing notes field on page load
    const existingTextarea = document.getElementById('notes');
    if (existingTextarea && existingTextarea.tagName === 'TEXTAREA') {
        processNotesField(existingTextarea);
    }
})();