Se você escreve para a web, talvez queira dar uma olhada no Markdown. Existem muitos aplicativos Markdown que atendem a escritores da web. Mas editores de código gratuitos como o Visual Studio Code (VSCode) da Microsoft podem ser ainda mais poderosos.
O VSCode entende Markdown e possui ferramentas integradas para visualizá-lo em HTML. No entanto, você pode adicionar funcionalidades de processador de texto, como contagem de palavras e um verificador ortográfico. Você também pode habilitar personalizações específicas do site para o visualizador.
Finalmente, a capacidade de copiar Markdown como HTML para que você possa colá-lo de forma limpa em um Sistema de Gerenciamento de Conteúdo (CMS) é uma obrigação.
Baixe e instale o VSCode
Para começar, baixe o VSCode ou sua alternativa de código aberto VSCodium. As versões de cada um estão disponíveis para todos os principais sistemas operacionais de desktop.
Uma vez que você Baixei e instalei o VSCode, execute o aplicativo para começar.
Instalar extensão de contagem de palavras
Comece adicionando um contador de palavras. Existem muitas extensões disponíveis que lidam com isso. O que melhor diferencia entre palavras reais e código ou nomes de arquivos é a própria extensão Word Counter da Microsoft.
Download:Contagem de palavras Extensão VSCode (gratuita)
- Clique em Baixar extensão debaixo Recursos no painel inferior direito.
- Uma vez baixado, mude para VSCode.
- Clique no ícone de engrenagem no canto inferior esquerdo da interface.
- Clique em Extensões.
- Clique nas reticências (...) próximo à parte superior do painel Extensões.
- Clique Instalar a partir do VSIX.
- Escolha o ms-vscode.wordcount-*.vsix arquivo que você acabou de baixar.
o Contagem de palavras extensão deve agora ser instalada. Teste-o abrindo um novo arquivo Markdown e digitando. Agora você deve ver um contador de palavras no canto inferior esquerdo da interface:
Instalar extensão de verificação ortográfica
Você também vai querer adicionar a funcionalidade de verificação ortográfica. Tal como acontece com os contadores de palavras, existem muitas extensões que lidam com a verificação ortográfica. O mais popular é Verificação ortográfica do código pela Street Side Software, pois está disponível em vários idiomas.
Download:Verificação ortográfica do código Extensão VSCode (gratuita)
- Siga as etapas de 1 a 6 da seção acima.
- Escolha o streetsidesoftware.code-spell-checker-*.vsix arquivo que você acabou de baixar.
o Verificação ortográfica do código extensão deve agora ser instalada. Teste-o abrindo um novo arquivo Markdown e digitando palavras com erros ortográficos.
Você deverá ver uma linha ondulada azul sob essas palavras, juntamente com uma contagem de erros no lado inferior direito da interface:
Personalize o rabisco de erro
O maior problema com esta extensão de verificação ortográfica é a cor azul fraca usada para o rabisco que identifica erros. Ele tende a se misturar ao fundo de temas escuros e é reutilizado para outros elementos do Markdown.
Você pode tentar alterá-lo para uma cor vermelha em negrito, como você esperaria ver em um processador de texto:
- Clique no ícone de engrenagem no canto inferior esquerdo da interface.
- Clique em Definições.
- Clique em Bancada de trabalho, então Aparência.
- Role para baixo até Personalização de cores:
- Clique Edite em settings.json.
- Cole o seguinte código no editor que é aberto em uma nova guia:
"editorInfo.primeiro plano": "#ff0000" - Feche e salve o arquivo.
Agora, se você errar uma palavra, o VSCode irá decorá-la com um rabisco vermelho brilhante:
Ignorando falsos positivos
O corretor ortográfico pode não reconhecer certos termos específicos do setor ou nomes próprios, como nomes de empresas. Na captura de tela acima, por exemplo, o VSCode destaca a abreviação "distro" como um erro de ortografia.
Para parar de ver essas palavras como erros, adicione-as ao seu Configurações do Usuário.
- Clique com o botão direito do mouse na palavra que deseja que o corretor ortográfico ignore.
- Pairar sobre Ortografia e selecione Adicionar palavras às configurações do usuário.
A partir de agora, a verificação ortográfica não identificará mais essas palavras como incorretas:
Instalar Copy Markdown como extensão HTML
Em seguida, instale a extensão Copiar Markdown como HTML para que você possa copiar e colar Markdown formatado.
Download:Copiar Markdown como HTML Extensão VSCode (gratuita)
- Siga as etapas de 1 a 6 das seções acima.
- Escolha o jerriepelser.copy-markdown-as-html-1.1.0.vsix arquivo que você acabou de baixar.
Agora você deve poder copiar o Markdown do VSCode e colá-lo em um CMS como HTML limpo. Para testar isso:
- Selecione algum texto Markdown.
- Abra o Paleta de Comandos no Visão menu ou pressionando CTRL+Shift+P.
- Escolher Markdown: Copiar como HTML:
- Cole o Markdown copiado em um novo arquivo HTML.
Você deve ver que o Markdown copiado foi colado corretamente como HTML:
Personalizando o painel de visualização
Por padrão, o painel de visualização terá o mesmo estilo do tema atual do VSCode.
No entanto, você pode querer que as visualizações reflitam mais de perto o destino final do seu conteúdo. Você pode personalizar o painel de visualização para fazer com que seu Markdown pareça já estar no site em que você está publicando.
Você pode usar qualquer site que desejar; os seguintes estilos foram retirados do MUO. Apenas use a ferramenta inspecionar elemento do seu navegador para encontrar fontes e escolha cores de qualquer site.
- Crie um novo arquivo e nomeie-o como "CustomStyles.css"
- Cole o seguinte exemplo de código CSS no arquivo:
corpo {
cor de fundo: #ff;
cor: #2c2c2c;
família de fontes: Roboto;
tamanho da fonte: 18px;
peso da fonte: 400;
altura da linha: 1.7em;
largura máxima: 750px;
}h1 {
tamanho da fonte: 38px;
peso da fonte: 800;
}h2 {
tamanho da fonte: 34px;
peso da fonte: 700;
}h3 {
tamanho da fonte: 24px;
peso da fonte: 700;
}uma {
borda inferior: 2px sólido #bf0d0b;
cor: #bf0d0b;
peso da fonte: 700;
}uma:flutuar {
cor: #ff;
fundo: #bf0d0b;
}Forte {
intensidade da fonte: Negrito;
} - Feche e salve o arquivo.
- Clique no ícone de engrenagem no canto inferior esquerdo da interface.
- Clique em Definições.
- Clique em Extensões e depois Remarcação.
- Role para baixo até Markdown: estilos e clique Adicionar Item.
- Digite o caminho do seu CustomStyles.css arquivo, por exemplo:
C:\Usuários\Adão\Estilos personalizados.css - Clique OK.
Depois de fazer isso, você deve terminar com um painel de visualização muito parecido com este artigo.
Novamente, obtive esses valores usando a ferramenta Inspecionar Elemento do meu navegador no MUO, mas você desejará encontrar os valores para o seu próprio site de destino.
Temas do Editor
O tema padrão do VSCode vem tanto no escuro quanto no claro, com versões de alto contraste de cada um. Mas como qualquer bom editor de código, existem uma tonelada de ótimos temas de terceiros disponíveis.
Se você preferir a aparência de um processador de texto em vez de um editor de código, recomendo o tema Office de huacat:
Se você preferir um editor de código, temas comuns como Drácula, Gruvbox, Material (veja a captura de tela abaixo) e Nord estão disponíveis no mercado de extensões.
Para instalar um novo tema:
- Clique no ícone de engrenagem no canto inferior esquerdo da interface.
- Clique em Extensões.
- Pesquise qualquer um dos temas mencionados acima ou simplesmente filtre a categoria para temas e navegue pelo que está disponível.
O VSCode é o editor final de Markdown?
Então, o VSCode é o melhor editor de Markdown para conteúdo da web? Fora da caixa, provavelmente não. Mas é tão extensível quanto qualquer coisa poderia ser.
Contadores de palavras, corretores ortográficos, Copiar Markdown como HTML, personalizações de visualização e temas apenas arranham a superfície. Há um ecossistema cheio de extensões disponíveis para o VSCode, e você é livre para torná-lo seu.
