Como abrir arquivos Markdown com extensão md no Firefox

Já li essa pergunta em vários lugares, resolvi fazer um artigo para mostrar como.


Como abrir arquivos Markdown com extensão md no Firefox

Antigamente você instalava um plugin tipo o Markdown Viewer no Firefox e conseguia abrir arquivos .md que são do tipo Markdown . Mas depois da versão 57 do Firefox, isso não é mais possível, toda vez que você tenta abrir arquivo com Ctrl + o aparece essa caixa com essa informação:

Abrir arquivo md no Firefox

Ou seja, o navegador pergunta se você deseja abrir com um editor de texto ou fazer download do arquivo que já está na sua máquina.

Se você só instalar plugins não vai resolver, você precisa seguir os seguintes passos:

1. Acessar as configurações do Firefox digitando no endereço de url: about:config

about config

2. No campo de pesquisa, procurar a configuração de nome: helpers.private_mime_types_file

helpers.private_mime_types_file

Perceba que ele mostra um arquivo para mime-types que deve ser gravado no seu computador, justamente no caminho informado: ~/.mime.types . É possível até editar o caminho pelo próprio browser clicando no ícone de edição, mas vamos tomar esse caminho e nome de arquivo como padrão, até porque é padrão mesmo! ☺

3. Vamos criar o arquivo:

vim ~/.mime.types

E dentro dele vamos inserir o seguinte conteúdo:

text/plain     md txt

Como isso informamos quais tipos de arquivo queremos que o Firefox abra diretamente no navegador, se quiser mais arquivos fique à vontade para informar. Sei que o txt já abre por padrão, mas não haverá problema reinformar.

4. Agora se voçe tentar abrir o arquivo .md , perceba que já é aberto:

Arquivo md

Mas perceba que o Markdown não é renderizado e sim exibido o código como arquivo de texto. No próximo passo vamos alterar isso!

5. Agora sim entra o papel da extensão/addon/plugin do Firefox . Para isso vamos usar o Markdown Viewer Webext, existem outros, mas vamos utilizar esse, após instalar, tcharaaamm!!!

Renderização de markdown no Firefox

Você ainda pode customizar o CSS para deixá-lo do jeito como deseja, centralizado, por exemplo como eu fiz e está na imagem, indo em:

☰ → Extensões → … (do plugin) → Preferências → Preferências(do plugin)

E abaixo à o campo de inserir seu CSS , no meu caso eu inseri: body { max-width: 1000px; margin: auto; } como na imagem abaixo:

tres pontinhos css

Fácião, neh?! ☺

Antes de ir, veja também:

Fui!


firefox markdown html


Compartilhe


Nosso canal no Youtube

Inscreva-se


Marcos Oliveira

Marcos Oliveira

Desenvolvedor de software
https://github.com/terroo


Crie Aplicativos Gráficos para Linux e Windows com C++

Aprenda C++ Moderno e crie Games, Programas CLI, GUI e TUI de forma fácil.

Saiba Mais

Receba as novidades no seu e-mail!

Após cadastro e confirmação do e-mail, enviaremos semanalmente resumos e também sempre que houver novidades por aqui para que você mantenha-se atualizado!