Markdown Viewer / Browser Extension

Install: [Chrome] / [Firefox] / [Edge] / [Opera] / [Brave] / [Chromium] / [Vivaldi]

Features

• Secure by design
• Render local and remote file URLs
• Granular access to remote origins
• Multiple markdown parsers
• Full control over the compiler options ([markdown-it], [marked], [remark])
• 30+ Themes ([cleanrmd], [GitHub][github-theme])
• Custom theme support
• GitHub Flavored Markdown (GFM)
• Auto reload on file change
• Syntax highlighted code blocks ([prism][prism])
• Table of Contents (ToC)
• MathJax formulas ([mathjax])
• Mermaid diagrams ([mermaid])
• Convert emoji shortnames (icons provided free by [EmojiOne][emojione])
• Remember scroll position
• Markdown Content-Type detection
• Configurable Markdown file path detection
• Settings synchronization
• Raw and rendered markdown views
• Free and Open Source

Table of Contents

• After Install
• Themes
• Compiler Options
• Content Options
• Manage Origins
• Syntax Examples

Additional documentation specific to [Firefox][firefox-docs]

After Install

Local Files

1. Navigate to chrome://extensions
2. Locate the Markdown Viewer extension and click on the Details button

![img-extensions]

3. Make sure that the Allow access to file URLs switch is turned on

![img-file-access]

Remote Files

1. Click on the Markdown Viewer icon and select Advanced Options
2. Add the origins that you want enabled for the Markdown Viewer extension

Themes

All themes support the following width options:

• auto - automatically adjust the content width based on the screen size
• full - 100% screen width
• wide - fixed at 1400px
• large - fixed at 1200px
• medium - fixed at 992px
• small - fixed at 768px
• tiny - fixed at 576px

The auto option on the github and github-dark themes has a fixed width with a surrounding border identical to a rendered README.md file for a repository hosted on github.com

Custom Theme

1. Go to the Advanced Options and click on Settings
2. Select CUSTOM for Content Theme
3. Upload your Custom Theme below
4. Specify the Color Scheme of your theme

Your custom theme will be minified automatically on upload and it can be up to 8KB in size.

You can add `` to your markdown document to speed up development while working on your theme. Custom theme [example][custom-theme].

Compiler Options

Full CommonMark support including GFM tables and strikethrough +

Content Options

Autoreload

When enabled the extension will make a GET request every second to markdown files hosted on:

• file:/// URLs
• any host that resolves to localhost IPv4 127.0.0.1 or IPv6 ::1

Emoji

Convert emoji :shortnames: into EmojiOne images:

• Emoji shortnames like :smile: will be converted to :smile: using EmojiOne images.
• Currently unicode symbols like 😄 and ASCII emoji like :D are not supported.

MathJax

The following MathJax delimiters are supported:

• inline math: \(math\) and $math$
• display math: \[math\] and $$math$$

The following rules apply to your markdown content when MathJax is enabled:

• Regular dollar sign $ in text that is not part of a math formula should be escaped: \$
• Regular markdown escaping for parentheses: \( and \), and brackets: \[ and \] is not supported. MathJax will convert anything between these delimiters to math formulas, unless they are wrapped in backticks: `\(` or fenced code blocks.

Mermaid

Render Mermaid diagrams wrapped in mmd or mermaid fenced code blocks:

```mmd
sequenceDiagram
```

Alternatively diagrams can be wrapped in HTML tags:

<pre><code class="mermaid">
  sequenceDiagram
</code></pre>

• resize the diagram container vertically by dragging the bottom right corner of the code block up or down
• zoom in and out by holding down the Shift key and then using your mouse wheel
• pan by holding down the left mouse button and drag in any direction

Syntax

Syntax highlighting for fenced code blocks:

```js
var hello = 'hi'
```

Alternatively code blocks can be wrapped in HTML tags:

<pre class="language-js"><code class="language-js">var hello = 'hi'</code></pre>

Full list of supported languages and their corresponding [aliases][prism-lang] to use.

ToC

Generates Table of Contents (ToC) based on the headers found in the markdown document.

Manage Origins

Click on the Markdown Viewer icon and select Advanced Options.

By default Markdown Viewer does not have access to any content:

![img-no-access]

Enable File Access

To enable access to file URLs follow these steps.

In case access to local files was not enabled, an additional Allow Access button will be present next to the File Access header:

![img-file-access-allow]

Clicking on it will point you to the built-in management page for the extension where you can toggle the Allow access to file URLs switch to enable it.

Enable Site Access

Access to individual sites can be enabled by copy/pasting a URL address into the Site Access text box and then clicking on the Add button next to it:

![img-site-access-add]

Access to both http and https protocols can be enabled by using a wildcard *://raw.githubusercontent.com

Access to all subdomains for a given hostname can be enabled by using a wildcard https://*.githubusercontent.com

Access to all ports on localhost can be enabled by adding http://localhost. Access to a specific port can be enabled by adding http://localhost:3000

Allow on All Sites

Access to all sites can be enabled by clicking on the Allow All button next to the Site Access header:

![img-site-allow-all]

This is identical to adding the *://* pattern into the text box.

Content Detection

Each enabled origin has an option for content type header detection and path matching regular expression:

![img-site-access-enabled]

Header Detection

When this option is enabled the extension will check if the content-type header with a value of text/markdown, text/x-markdown or text/plain is present.

Path Matching

When this option is enabled the extension will check if the page URL matches the Path Matching RegExp.

The default regular expression is: \.(?:markdown|mdown|mkdn|md|mkd|mdwn|mdtxt|mdtext|text)(?:#.*|\?.*)?$

It is a simple regular expression that matches URLs ending with:

• markdown file extension: \.(?:markdown|mdown|mkdn|md|mkd|mdwn|mdtxt|mdtext|text)
• and optionally a hash or a querystring after that: (?:#.*|\?.*)?

The ?: used in (?:match) stands for non-capturing group and it is there for performance reasons.

You can modify the path matching regular expression for each enabled origin. The settings are being updated as you type.

Path Matching Priority

The enabled origins are matched from most to least specific:

1. https://raw.githubusercontent.com
2. https://*.githubusercontent.com
3. *://raw.githubusercontent.com
4. *://*.githubusercontent.com
5. *://*

The matching origin with the highest priority will be picked and its header detection and path matching settings will be used to determine if the con