Como transformar o VSCode no editor final de Markdown

Como transformar o VSCode no editor final de Markdown

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 a funcionalidade do 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.



MAKEUSEO VÍDEO DO DIA

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.



A tela de boas-vindas padrão do VSCode.

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)



  1. Clique em Baixar extensão debaixo Recursos no painel inferior direito.
  2. Uma vez baixado, mude para VSCode.
  3. Clique no ícone de engrenagem no canto inferior esquerdo da interface.
  4. Clique em Extensões .
  5. Clique nas reticências ( ... ) próximo à parte superior do painel Extensões.
  6. Clique Instalar a partir do VSIX . ​​​​​​​​VSCode com a extensão Word Count da Microsoft mostrado detectando o número de palavras em um documento de amostra.
  7. 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:

​​​​​​​Um documento de remarcação aberto no VSCode com erros ortográficos detectados por um sublinhado ondulado azul suave.

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)

  1. Siga as etapas de 1 a 6 da seção acima.
  2. 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.

​​​​​​​O lado inferior direito da barra de status do VSCode com um indicador mostrando quatro erros de ortografia.

Você deverá ver uma linha ondulada azul sob essas palavras, juntamente com uma contagem de erros no lado inferior direito da interface:

O arquivo settings.json do VSCode é aberto com o código personalizado adicionado.

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:

como obter dados de um disco rígido antigo
  1. Clique no ícone de engrenagem no canto inferior esquerdo da interface.
  2. Clique em Definições .
  3. Clique em Bancada de trabalho , então Aparência .
  4. Role para baixo até Personalização de cores : Um documento de remarcação aberto no VSCode com erros de ortografia flagrantes detectados por um forte sublinhado ondulado vermelho.
  5. Clique Edite em settings.json .
  6. Cole o seguinte código no editor que é aberto em uma nova guia:
    "editorInfo.foreground": "#ff0000"
    Um documento de remarcação aberto no VSCode com três erros de ortografia.
  7. e salve o arquivo.

Agora, se você errar uma palavra, o VSCode irá decorá-la com um rabisco vermelho brilhante:

Um documento HTML formatado corretamente aberto no VSCode.

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 .

  1. Clique com o botão direito do mouse na palavra que deseja que o corretor ortográfico ignore.
  2. Pairar sobre Ortografia e selecione Adicionar palavras às configurações do usuário . ​​​​​​​Este artigo como um arquivo de remarcação aberto no VSCode com o visualizador padrão.

A partir de agora, a verificação ortográfica não identificará mais essas palavras como incorretas:

​​​​​​​​As configurações do VSCode > Extensões > Markdown > Markdown: menu Estilos.

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)

  1. Siga as etapas de 1 a 6 das seções acima.
  2. 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:

  1. Selecione algum texto Markdown.
  2. Abra o Paleta de Comandos no Visão menu ou pressionando CTRL+Shift+P .
  3. Escolher Markdown: Copiar como HTML : Este artigo como um arquivo de remarcação aberto no VSCode com o visualizador personalizado para se parecer com o MUO.
  4. Cole o Markdown copiado em um novo arquivo HTML.

Você deve ver que o Markdown copiado foi colado corretamente como HTML:

A tela de boas-vindas do VSCode no tema light.

Personalizando o painel de visualização

Por padrão, o painel de visualização terá o mesmo estilo do tema atual do VSCode.

O markdown deste artigo é aberto no VSCode usando o tema Office por huacat.

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 .

  1. Crie um novo arquivo e nomeie-o como ' CustomStyles.css '
  2. Cole o seguinte exemplo de código CSS no arquivo: 
    body { 
      background-color: #fff; 
      color: #2c2c2c; 
      font-family: Roboto; 
      font-size: 18px; 
      font-weight: 400; 
      line-height: 1.7em; 
      max-width: 750px; 
    } 
      
    h1 { 
      font-size: 38px; 
      font-weight: 800; 
    } 
      
    h2 { 
      font-size: 34px; 
      font-weight: 700; 
    } 
      
    h3 { 
      font-size: 24px; 
      font-weight: 700; 
    } 
      
    a { 
      border-bottom: 2px solid #bf0d0b; 
      color: #bf0d0b; 
      font-weight: 700; 
    } 
      
    a:hover { 
      color: #fff; 
      background: #bf0d0b; 
    } 
      
    strong { 
      font-weight: bold; 
    }
  3. e salve o arquivo.
  4. Clique no ícone de engrenagem no canto inferior esquerdo da interface.
  5. Clique em Definições .
  6. Clique em Extensões e depois Remarcação .
  7. Role para baixo até Markdown: estilos e clique Adicionar Item .
  8. Digite o caminho do seu CustomStyles.css arquivo, por exemplo:
    C:\Users\Adam\CustomStyles.css
    O markdown deste artigo é aberto no VSCode usando o tema Material da Equinusocio.
  9. 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.

como obter mais pesquisas sobre recompensas do google

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:

  1. Clique no ícone de engrenagem no canto inferior esquerdo da interface.
  2. Clique em Extensões .
  3. 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.