Как открыть markdown в браузере

How can I open a Markdown file?

I have a Markdown file, and I want to open it with the formatting. I tried using a web browser, but it just gave me plain text. I also added two Chrome extensions, but it still just gave me some plain text.

4 Answers 4

I use Visual Studio Code to edit and view markdown.
You can edit markdown just like any other text file.

To see the formatted version, just right click the tab and select «Open Preview.»

If you use this website here! and click start writing at the top you can paste your markdown on the left and see a preview of how it looks on the right. Also, markdown is just a text file so if you open it using anything it will still be a textfile; the link I suggested shows you the text file on the left and shows you a markdown preview. You would add a link like this: «[the test you want people to see](your http link)»

You can use Atom. It can be downloaded at https://www.atom.io. Atom includes a package to preview Markdown files. It can be activated by using Ctrl+Shift+M .

You might like Obsidian. It has a lot of features so it might be daunting but you don’t have to use all of them. It primarily uses Markdown files and so you can use your Markdown files with it and they should mostly work. I don’t use it (I use Visual Studio Code like Merkle Groot) so I don’t know if it will handle inline html/css/js properly but it’s worth checking out.

The Overflow Blog

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.3.3.43278

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Name already in use

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Markdown Viewer / Browser Extension

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

• Secure by design
• Render local and remote file URLs
• Granular access to remote origins
• Multiple markdown parsers
• Full control over the compiler options (marked, remark)
• 30+ Themes (cleanrmd, GitHub)
• GitHub Flavored Markdown (GFM)
• Auto reload on file change
• Syntax highlighted code blocks (prism)
• Table of Contents (ToC)
• MathJax formulas (mathjax)
• Mermaid diagrams (mermaid)
• Convert emoji shortnames (icons provided free by 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
• Compiler Options
• Content Options
• Themes
• Manage Origins
• Markdown Detection
• Syntax Examples

1. Navigate to chrome://extensions
2. Locate the Markdown Viewer extension and click on the Details button
3. Make sure that the Allow access to file URLs switch is turned on

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

Markdown Viewer can be used with any markdown parser/compiler. Currently the following compilers are supported: marked, remark, showdown, markdown-it, remarkable, commonmark, and officially it ships with Marked and Remark:

Option	Default	Description
breaks	false	Enable GFM line breaks. This option requires the gfm option to be true.
gfm	true	Enable GFM GitHub Flavored Markdown.
pedantic	false	Conform to obscure parts of markdown.pl as much as possible. Don’t fix any of the original markdown bugs or poor behavior.
sanitize	false	Sanitize the output. Ignore any HTML that has been input.
smartypants	false	Use «smart» typographic punctuation for things like quotes and dashes.

Option	Default	Description
breaks	false	Enable GFM line breaks. This option requires the gfm option to be true.
gfm	true	Enable GFM GitHub Flavored Markdown.
sanitize	false	Sanitize the output. Ignore any HTML that has been input.

For any other supported compiler that you may want to use, follow the Manual Install steps.

Option	Default	Description
autoreload	false	Auto reload on file change
toc	false	Generate Table of Contents
syntax	true	Syntax highlighted fenced code blocks
mathjax	false	Render MathJax formulas
mermaid	false	Render Mermaid diagrams
emoji	false	Convert emoji :shortnames: into EmojiOne images
scroll	true	Remember scroll position

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

Convert emoji :shortnames: into EmojiOne images:

• Emoji shortnames like: :sparkles: will be converted to ✨ using EmojiOne images.
• Currently unicode symbols like ✨ and ASCII emoji like 😀 are not supported.

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.

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

Remember scroll position:

• When enabled, the scroll option remembers the current scroll position and scrolls back to it after page reload.
• When disabled, the scroll option will either scroll to the top of the document or to a certain header (anchor) if a hash URL fragment was present.

Syntax highlighting for fenced code blocks:

The full list of enabled languages and their names can be found here.

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

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 on github.com

Access to local file URLs can be enabled by using the Allow access to file URLs option for the extension.

Access to remote origins, however, have to be enabled explicitly.

Here is how you can enable the extension on the https://raw.githubusercontent.com origin:

The origin consists of a protocol and a domain part. The protocol can be either https , http , or a * to match both https and http .

Allow All Origins

In case you really want to you can enable the extension for all origins:

Alternatively you can use the Allow All button.

Take a look at the Path Matching Priority section below on how the Markdown content can be included for or excluded from rendering when access to all origins is enabled!

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

The extension synchronizes your preferences across all of your devices using Google Sync. The list of your allowed origins is being synced too. However, the actual permissions that you grant using the Chrome’s consent popup cannot be synced.

In case you have added a new origin on some of your devices you will have to explicitly allow it on your other devices. In this case an additional refresh label will be shown on each origin that needs to be refreshed. This label will be present only on those devices and origins that needs to be refreshed, meaning currently the extension does not have access to those origins. Expanding the origin will reveal an additional REFRESH button:

Markdown Viewer can only access explicitly allowed remote origins and the file origin, if enabled. However, not all content served on those origins will be a Markdown file.

When this option is enabled the extension will check for the existence of the text/markdown and text/x-markdown content-type header before trying to match the path:

If the header detection is disabled or a proper content-type header is missing, the extension will check if the URL is ending with a markdown file extension.

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’s there for performance reasons.

You can modify the path matching regular expression for each enabled origin individually. 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 or http://raw.githubusercontent.com
2. *://raw.githubusercontent.com
3. *://*

Only the first matching origin is picked and then its Path Matching RegExp is used to match the entire URL. If it fails then no other attempts are being made to match the URL.

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

*://website.com — specific origin with custom Path Matching RegExp:
\/some\/custom\/path\/to\/serve\/markdown\/$

*://* — match all origins using the default Path Matching RegExp:
\.(?:markdown|mdown|mkdn|md|mkd|mdwn|mdtxt|mdtext|text)(?:#.*|\?.*)?$

In case we want to match a custom path we have to add a more specific origin and set its Path Matching RegExp accordingly.

*://github.com — specific origin with invalid Path Matching RegExp:
something impossible to match .

*://* — match all origins using the default Path Matching RegExp:
\.(?:markdown|mdown|mkdn|md|mkd|mdwn|mdtxt|mdtext|text)(?:#.*|\?.*)?$

Some origins may serve rendered HTML content on URLs ending with markdown file extension:

— HTML — Markdown

In this case we want to exclude the github.com origin altogether and for that we have to add a more specific origin and set its Path Matching RegExp to something that’s impossible to match.

*://bitbucket.org — specific origin with custom Path Matching RegExp:
.*\/raw\/.*\.(?:markdown|mdown|mkdn|md|mkd|mdwn|mdtxt|mdtext|text)(?:#.*|\?.*)?$

*://gitlab.com — specific origin with custom Path Matching RegExp:
.*\/raw\/.*\.(?:markdown|mdown|mkdn|md|mkd|mdwn|mdtxt|mdtext|text)(?:#.*|\?.*)?$

*://* — match all origins using the default Path Matching RegExp:
\.(?:markdown|mdown|mkdn|md|mkd|mdwn|mdtxt|mdtext|text)(?:#.*|\?.*)?$

Some origins may serve rendered HTML content on URLs ending with markdown file extension:

— HTML — Markdown

— HTML — Markdown

In this case we want to match Markdown files only when their path contains the raw word, and for that we have to add a more specific origin and update its Path Matching RegExp accordingly.

A separate repository containing examples about the Markdown syntax and all features available in Markdown Viewer can be found on GitHub, GitLab and BitBucket:

• elements.md — quick overview of the Markdown syntax and all features available in Markdown Viewer
• syntax.md — extensive list of Markdown syntax examples with different combinations and edge cases
• prism.md — syntax highlighting examples, for the full list of currently supported languages take a look at this file
• mermaid.md — different types of Mermaid diagrams
• mathjax.md — MathJax examples and support documentation

Allow the appropriate remote origin and update its path matching regexp if needed:

raw.githubusercontent.com using the default Path Matching RegExp:
\.(?:markdown|mdown|mkdn|md|mkd|mdwn|mdtxt|mdtext|text)(?:#.*|\?.*)?$

bitbucket.org only paths containing the raw word and ending with the default Path Matching RegExp:
.*\/raw\/.*\.(?:markdown|mdown|mkdn|md|mkd|mdwn|mdtxt|mdtext|text)(?:#.*|\?.*)?$

gitlab.com only paths containing the raw word and ending with the default Path Matching RegExp:
.*\/raw\/.*\.(?:markdown|mdown|mkdn|md|mkd|mdwn|mdtxt|mdtext|text)(?:#.*|\?.*)?$

Alternatively, pull any of those repositories and access them on the file:/// origin locally.

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. Make sure that the Developer mode switch is enabled
5. 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

1. Clone this repository
2. Execute sh build/package.sh chrome (append compilers to include all available compilers)
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

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

The MIT License (MIT)

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.

9 бесплатных онлайн-редакторов с поддержкой Markdown

Текстовые редакторы нужны всем и среди всех приложений для работы мы используем их чаще других. Существует много хороших редакторов, но людям свойственно всегда хотеть большего, поэтому разработчики создают новые и новые приложения. При этом, помимо нативных, существуют онлайн-редакторы, доступные в браузере на любой платформе. О них я вам сегодня и расскажу.

1. StackEdit

StackEdit — это бесплатный Markdown-редактор, предлагающий множество полезных функций. Он имеет панель визуального форматирования (жирный, курсив, списки и т.п.), умеет синхронизироваться с облаками (Dropbox, Google Drive), импортировать файлы по URL или с локального диска. Изюминкой StackEdit является возможность конвертации HTML в Markdown.

2. Dillinger

В Dillinger очень минималистичный интерфейс, который способствует концентрации на вашем тексте. Этот редактор имеет не только поддержку облачных сервисов Dropbox, Google Drive, One Drive, но и даже GitHub. Ваши готовые тексты можно экспортировать в HTML, Markdown и PDF. В Dillinger есть режим фокуса, в котором с экрана скрывается все, кроме набираемого текста.

3. Markable

Простой Markdown-редактор с чистым интерфейсом. Все, что он умеет (если вы не создадите аккаунт на сервисе для доступа к расширенным функциям), это работать с текстом и отображать предпросмотр сверстанного Markdown-фрагмента. Сохранить вашу работу можно, скачав текстовый файл в HTML или Markdown (.md) по предоставленной ссылке.

4. Markdown Journal

Еще один довольно простенький Markdown-редактор, который синхронизируется с Dropbox. Чтобы использовать его, вы должны будете предоставить Markdown Journal доступ к папке с документами в вашем Dropbox.

5. Dingus

Dingus — это относительно старый и чрезвычайно простой Mardown-редактор, доступный в любом браузере. Он примечателен тем, что создан Джоном Грубером, отцом Markdown.

6. Markdown-Editor

Как видите, разработчики Markdown-Editor не очень заморачивались с названием. Этот редактор поддерживает разметку GitHub Flavored Markdown (GFM) и работает в связке с Google Drive.

7. (GitHub-Flavored) Markdown Editor

Еще один вариант, если вам нужен редактор с поддержкой GitHub Flavored Markdown. Он не работает с облачными хранилищами, но имеет панель предпросмотра, отображающую отформатированный Markdown-код.

8. Writebox

Writebox — бесплатный текстовый редактор с режимом фокуса и поддержкой Markdown. Когда вы начинаете печатать, он скрывает все, кроме самого текста. Отлично работает Dropbox и Google Drive, имеет поддержку горячих клавиш и позволяет скачивать ваш текст в формате html или txt.

9. wri.pe

Довольно простой онлайн-блокнот, который понимает разметку Markdown. При необходимости может сохранить ваши тексты в Dropbox или Evernote.

Заключение

Как видите, недостатка в бесплатных онлайн-редакторах с поддержкой Markdown совершенно не ощущается. Среди всех я бы выделил StackEdit и Dillinger, оба имеют достаточный набор функций для повседневной работы, чем и отличаются от остальных.

Однако, если вы работаете над GitHub-проектами, то должны оценить преимущества Markdown-Editor и (GitHub-Flavored) Markdown Editor.

Образовательные ресурсы по Markdown

Markdown отлично подходит для написания текстов, предназначенных для публикации в вебе. Он прост, интуитивен, не так запутан, как HTML, и разработан специально для создания текстов.

Если вас заинтересовал Markdown, вот несколько ресурсов, которые будут вам полезны:

How to open Markdown files with md extension in Firefox

In the past you installed a Markdown Viewer plugin on Firefox and was able to open .md files that are of the type Markdown. But after the 57 version of Firefox, this is no longer possible, every time you try to open a file with Ctrl + o this box appears with this information:

That is, the browser asks if you want to open with a text editor or download the file that is already on your machine.

If you just install plugins it will not solve, you need to follow the following steps:

1. Access Firefox settings by typing in the url address: about:config

2. In the search field, look for the name setting: helpers.private_mime_types_file

Notice that it shows a file for mime-types that must be saved on your computer, exactly in the informed path:

/.mime.types . It is even possible to edit the path by the browser itself by clicking on the edit icon, but we will take this path and file name as default, even because it is standard! ☺

Let’s create the file:

And inside it we will insert the following content:

As a result we inform you what types of files we want Firefox to open directly in the browser, if you want more files feel free to inform. I know that txt already opens by default, but there will be no problem re-formatting.

4. Now if you try to open the .md file, notice that it is already open:

But notice that the Markdown is not rendered but the code is displayed as a text file. In the next step we will change that!

5. Now comes the role of Firefox’s extension/addon/plugin. For this we will use the Markdown Viewer Webext, there are others, but we will use this one, after installing, tcharaaamm! !!

You can still customize the CSS to make it the way you want, centralized, for example as I did and is in the image, by going to:

☰ → Extensions → … (from plugin) → Preferences → Preferences (from plugin)

And below the field to insert your CSS, in my case I inserted: body as in the image below:

.png)