Home

Awesome

Markdown Viewer / Browser Extension

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

Features

Table of Contents

Additional documentation specific to Firefox

After Install

Local Files

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

img-extensions

  1. 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:

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 <link rel="stylesheet" type="text/css" href="file:///home/me/custom-theme.css"> to your markdown document to speed up development while working on your theme. Custom theme example.


Compiler Options

Full CommonMark support including GFM tables and strikethrough +

OptionDefaultDescription
abbrfalseAbbreviation using *[word]: Text <abbr>
attrfalseCustom attributes using {} curly brackets
breaksfalseConvert new lines \n in paragraphs into line breaks <br>
cjkfalseSuppress linebreaks between east asian characters
deflistfalseDefinition list <dl>
footnotefalseFootnotes [^1] [^1]: a
htmltrueEnable HTML tags in source
insfalseInserted text ++a++ <ins>
linkifytrueAutoconvert URL-like text to links
markfalseMarked text ==a== <mark>
subfalseSubscript ~a~ <sub>
supfalseSuperscript ^a^ <sup>
tasklistsfalseTask lists - [x]
typographerfalseEnable some language-neutral replacement + quotes beautification
xhtmlOutfalseUse / to close single tags (<br />)

Content Options

OptionDefaultDescription
autoreloadfalseAuto reload on file change
emojifalseConvert emoji :shortnames: into EmojiOne images
mathjaxfalseRender MathJax formulas
mermaidfalseRender Mermaid diagrams
syntaxtrueSyntax highlighted fenced code blocks
tocfalseGenerate Table of Contents

Autoreload

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

Emoji

Convert emoji :shortnames: into EmojiOne images:

MathJax

The following MathJax delimiters are supported:

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

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>

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 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:

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 content should be rendered or not.

It is recommended to explicitly allow only the origins that you want the extension to have access to.

Remove Origin

Click on the Remove button for the origin that you want to remove. This removes the permission itself so that the extension can no longer access that origin.

Refresh Origin

The extension synchronizes your preferences across all of your devices if you have logged into your browser and enabled the sync feature. The list of your allowed origins is being synced too. However, the actual permissions that you grant using the consent popup cannot be synced.

In case you have enabled a new origin on some of your devices you will have to explicitly allow it on your other devices. In this case the origin will be highlighted and an additional Refresh button will be present:

img-site-refresh

Only origins that needs to be refreshed will be highlighted. The extension cannot access highlighted origins unless you click on the Refresh button.

In some cases access to previously allowed origins may get disabled. Make sure you check back the advanced options page or reload it and look for highlighted origins that needs to be refreshed.


Syntax Examples

Examples about the Markdown syntax and all features available in Markdown Viewer can be found on GitHub, GitLab and BitBucket:

Allow the appropriate remote origin or pull any of the above repositories and access it on the file:/// origin locally.


Manual Install

The following instructions applies for: Chrome, Edge, Opera, Brave, Chromium and Vivaldi.

Note that in any of the following cases you won't receive any future updates automatically!

Load packed .crx

  1. Go to releases and pick a release that you want to install
  2. Download the markdown-viewer.crx file
  3. Navigate to chrome://extensions
  4. Drag and drop the markdown-viewer.crx file into the chrome://extensions page

Load unpacked .zip

  1. Go to releases and pick a release that you want to install
  2. Download the markdown-viewer.zip file and extract it
  3. Navigate to chrome://extensions
  4. Make sure that the Developer mode switch is enabled
  5. Click on the Load unpacked button and select the extracted directory

Build

  1. Clone this repository
  2. Execute sh build/package.sh chrome (or firefox to build for Firefox)
  3. Navigate to chrome://extensions
  4. Make sure that the Developer mode switch is enabled
  5. Click on the Load unpacked button and select the cloned directory

Manifest v2

  1. Clone the mv2 or compilers-mv2 branch (Markdown Viewer v4.0)
  2. Navigate to chrome://extensions
  3. Make sure that the Developer mode switch is enabled
  4. Click on the Load unpacked button and select the cloned directory

License

The MIT License (MIT)

Copyright (c) 2013-present, Simeon Velichkov simeonvelichkov@gmail.com (https://github.com/simov/markdown-viewer)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.