# How Markdown Here Detects and Converts Markdown Content in Email Compose Fields > Learn how Markdown Here detects and converts Markdown in email fields. It parses, renders with marked and highlight.js, and injects HTML while preserving your source for easy editing. - Repository: [Adam Pritchard/markdown-here](https://github.com/adam-p/markdown-here) - Tags: internals - Published: 2026-03-05 --- **Markdown Here detects rich-text email compose fields by traversing the DOM from `document.activeElement` to locate editable containers, then extracts raw markdown via `MdhHtmlToText`, sends it to a background script that runs the **marked** parser and **highlight.js**, and finally injects the rendered HTML back into the editor while preserving the original source in a hidden wrapper for unrendering.** Markdown Here enables users to write emails in Markdown within webmail clients like Gmail and Outlook. According to the adam-p/markdown-here source code, the extension employs a seven-stage pipeline that bridges content scripts, background processes, and DOM manipulation to detect and convert Markdown content in email compose fields. ## Stage 1: Locating the Focused Compose Element In [`src/common/markdown-here.js`](https://github.com/adam-p/markdown-here/blob/main/src/common/markdown-here.js) (lines 50-98), the `findFocusedElem()` method traverses upward from `document.activeElement` to identify the target container. The implementation handles complex scenarios including same-origin iframes and Firefox/Thunderbird-specific quirks. When the traversal yields an `` node, the code automatically substitutes it with the `` element (lines 90-95) to ensure a valid editing context. ## Stage 2: Verifying Rich-Text Editability Before attempting conversion, the extension validates that the discovered element supports rich-text editing. The `elementCanBeRendered()` function in [`src/common/markdown-here.js`](https://github.com/adam-p/markdown-here/blob/main/src/common/markdown-here.js) (lines 100-108) inspects the `contentEditable` and `designMode` flags, returning `true` only for rich-edit fields such as Gmail compose areas or Outlook web editors. This check prevents the extension from activating on plain-text inputs or read-only elements. ## Stage 3: Determining Render vs. Unrender State The extension must decide whether to render fresh Markdown or revert previously rendered HTML. In [`src/common/markdown-here.js`](https://github.com/adam-p/markdown-here/blob/main/src/common/markdown-here.js) (lines 64-110), the code searches for existing `.markdown-here-wrapper` elements using `findMarkdownHereWrapper()` and `findMarkdownHereWrappersInRange()`. If wrappers exist within the current selection, the system triggers an **unrender** operation to restore the original Markdown; otherwise, it proceeds to **render** the content as HTML. ## Stage 4: Extracting Raw Markdown Text Once rendering is confirmed, [`src/chrome/contentscript.js`](https://github.com/adam-p/markdown-here/blob/main/src/chrome/contentscript.js) (lines 57-68) initiates the extraction process. The `requestMarkdownConversion` function instantiates an `MdhHtmlToText` helper that parses the DOM selection and extracts visible text while handling email signatures. The raw Markdown is then transmitted to the privileged background script via `Utils.makeRequestToPrivilegedScript` with the action parameter set to `'render'`. ```javascript function requestMarkdownConversion(elem, range, callback) { var mdhHtmlToText = new MdhHtmlToText.MdhHtmlToText(elem, range); Utils.makeRequestToPrivilegedScript( document, { action: 'render', mdText: mdhHtmlToText.get() }, function (response) { var renderedMarkdown = mdhHtmlToText.postprocess(response.html); callback(renderedMarkdown, response.css); }); } ``` ## Stage 5: Background Markdown-to-HTML Conversion The heavy lifting occurs in [`src/chrome/backgroundscript.js`](https://github.com/adam-p/markdown-here/blob/main/src/chrome/backgroundscript.js) (lines 17-28), which receives the render request and processes it through `MarkdownRender.markdownRender` (implemented in [`src/common/markdown-render.js`](https://github.com/adam-p/markdown-here/blob/main/src/common/markdown-render.js)). This component orchestrates the **marked** parser for Markdown processing and **highlight.js** for syntax highlighting, generating both HTML output and associated CSS styles based on user preferences stored in `OptionsStore`. ```javascript if (request.action === 'render') { OptionsStore.get(function (prefs) { responseCallback({ html: MarkdownRender.markdownRender( request.mdText, prefs, marked, hljs), css: prefs['main-css'] + prefs['syntax-css'] }); }); return true; } ``` ## Stage 6: Injecting Rendered HTML with Inline Styles With the converted HTML ready, [`src/common/markdown-here.js`](https://github.com/adam-p/markdown-here/blob/main/src/common/markdown-here.js) (lines 64-97 and 121-168) executes the injection sequence. The `renderMarkdown` method constructs a wrapper `

` containing the rendered content and a hidden "raw-MD holder" `

` that base64-encodes the original Markdown for future unrendering. The `replaceRange` function swaps the user's selection with this wrapper. To ensure compatibility with email clients like Gmail that strip `