Como configurar o Typora para editar Markdown e exportar PDF

Escola
1

:warning: A partir de julho de 2022, as versões beta completas deixaram de funcionar.

Windows: Instale a versão de teste e, sem abrir documentos, você pode criar tantas janelas vazias quantas precisar. Após abrir o primeiro arquivo, não será mais possível abrir novos documentos, portanto, crie as janelas vazias imediatamente após o lançamento com Ctrl+Shift+N, e depois feche a janela de Informações da Licença. A janela não pode ser reutilizada, então é melhor criar várias janelas vazias de uma vez.

A imagem mostra uma janela com várias abas do editor Typora, uma delas exibindo informações sobre a licença. (Legenda gerada por IA)
A imagem mostra uma janela com várias abas do editor Typora, uma delas exibindo informações sobre a licença. (Legenda gerada por IA)860×104 49.1 KB

Linux: Criar novas janelas com Ctrl+o e abrir documentos nelas funciona normalmente :sunglasses:. Não é necessário preparar antecipadamente várias janelas vazias.

Introdução

:bulb: Typora — o melhor editor:

  • para trabalhar com arquivos Markdown
  • para exportar em PDF (veja as configurações abaixo)

Quais vantagens você pode aproveitar:

  • pode ser usado como rascunho, inserindo imagens (salvas offline!), código com destaque de sintaxe e tabelas
  • requer poucos esforços para formatação
  • conveniente para inserção de conteúdo e links cruzados dentro do documento
  • permite trabalhar com o documento como se fosse uma página web — você edita uma imagem embutida e ela é atualizada no documento
  • é possível referenciar a mesma imagem em diferentes documentos
  • o formato é universal e compatível em ambas as direções entre Typora, Gitlab, GitHub, YouTrack e descrições de Notes no Proxmox
  • quase totalmente compatível com a formatação usada em Gitlab e GitHub (o arquivo readme.md abre automaticamente)
  • altamente compatível para uso em plataformas de documentação online, como Docsify

Instalação

Baixe manualmente do site https://typora.io ou instale via Choco:

choco install typora --ignore-checksums --execution-timeout=300 --limit-output --no-progress --yes

Tema Vue.js

Este tema combina perfeitamente com Docsify. O visual dos documentos, o visual no Docsify e os PDFs exportados serão idênticos!

~/.config/Typora/themes/

Coloque os arquivos nesta pasta:

vue (pasta)
vue.css
vue_dark.css

Arquivo completo com temas disponível aqui:
typora_themes.zip|anexo (3,1 MB)

Configuração de margens

As margens afetam a disposição do conteúdo e, uma vez definidas, não devem ser alteradas, para não quebrar a separação de páginas.

Para documentação, pode-se adotar: topo 10 — fundo 5, esquerda 10, direita 5. Com essa margem, nem todos os impressores conseguirão imprimir o número da página.

Tela de configuração de exportação para PDF com formato de papel A4 e margens em milímetros. (Legenda gerada por IA)
Tela de configuração de exportação para PDF com formato de papel A4 e margens em milímetros. (Legenda gerada por IA)902×631 22.6 KB

Inserção de quebra de página (PDF)

Para inserir uma quebra de página forçada, use o seguinte código antes do título.

Assim, você poderá gerar PDFs adequados para impressão, com divisão lógica do texto por páginas (tabelas são divididas automaticamente).

<div style="page-break-after: always;"></div>

:person_tipping_ mão: Faça exportações periódicas do documento com as configurações anteriores e reescrita, para obter um PDF com a divisão de páginas desejada:

As duas opções de exportação no programa são mostradas com suas respectivas teclas de atalho. (Legenda gerada pela IA)

Corrija os quebras de página, se necessário, usando o separador mencionado acima.

Configurações de inserção de imagens

Certifique-se de que a opção está ativada:

Copiar imagem para pasta de usuário = ./images/${filename}

Configurações de inserção de imagens no sistema, onde é possível especificar o caminho do arquivo e escolher regras para imagens locais e online. (Legenda gerada pela IA)
Configurações de inserção de imagens no sistema, onde é possível especificar o caminho do arquivo e escolher regras para imagens locais e online. (Legenda gerada pela IA)894×454 23.7 KB

Isso permitirá copiar as imagens para a pasta vinculada localmente. Para mover a imagem da pasta temporária para a permanente, use o menu contextual da imagem Copiar para \u003c pasta \u003e..., onde “pasta” é o nome da pasta, correspondente ao nome do documento (criada automaticamente na primeira salvamento do documento).

Menu contextual do interface web, onde o item "Copiar para my_usage" está destacado, com um gráfico de retângulos coloridos ao fundo. (Legenda gerada pela IA)
Menu contextual do interface web, onde o item "Copiar para my_usage" está destacado, com um gráfico de retângulos coloridos ao fundo. (Legenda gerada pela IA)822×588 42.8 KB

Cuidado com espaços e caracteres especiais!

O Typora exibe as imagens com esses caminhos corretamente, mas por exemplo o Gitlab não. Nesse caso, é necessário corrigir o caminho, substituindo os caracteres especiais usando o Urlencoder:

     -    %20
!    -    %21
@    -    %40
#    -    %23
$    -    %24
%    -    %25
^    -    %5E
\u0026    -    %26
*    -    %2A
(    -    %28
)    -    %29
\u003c    -    %3C
\u003e    -    %3E

Suporte a formatação avançada

Ative o suporte a formatação avançada:

Configurações do editor Markdown em português, incluindo preferências sintáticas, suporte a sintaxe e pontuação inteligente. (Legenda gerada pela IA)
Configurações do editor Markdown em português, incluindo preferências sintáticas, suporte a sintaxe e pontuação inteligente. (Legenda gerada pela IA)998×662 19.8 KB

Números de linha em blocos de código

Na versão mais recente do programa, apareceu uma opção nas configurações que adiciona numeração de linhas a todos os blocos de código.

Se a numeração for necessária apenas em alguns casos, use este sintaxe ao especificar a destaque do código:

{.language-name .numberLines}

ou

# para numeração a partir de um número específico
{.language-name .numberLines startFrom=\"start-value\"}

Remover quebra entre títulos

Na versão mais recente do Typora 0.11.7, foi adicionada a opção “ Quebra de página entre títulos principais”. Basta desativá-la permanentemente.

Recomenda-se adicionar numeração de páginas (rodapé):

${pageNo} / ${totalPages}

Configurações de exportação para PDF com parâmetros de formato, tema, títulos e opção de abrir o arquivo automaticamente após a exportação. (Legenda gerada pela IA)
Configurações de exportação para PDF com parâmetros de formato, tema, títulos e opção de abrir o arquivo automaticamente após a exportação. (Legenda gerada pela IA)1268×819 42.8 KB

\"Para versões antigas até 0.11.7\"

Na versões antigas:
Por padrão, o Typora adiciona uma quebra de página entre os títulos ao exportar para PDF, o que prejudica a aparência das páginas PDF. Para corrigir isso:

\u003ckbd\u003eMenu\u003c/kbd\u003e–\u003ckbd\u003eArquivo\u003c/kbd\u003e–\u003ckbd\u003eConfigurações\u003c/kbd\u003e–\u003ckbd\u003eFormatação\u003c/kbd\u003e–\u003ckbd\u003eAbrir pasta de temas\u003c/kbd\u003e

C:\\Users\\xx\\AppData\\Roaming\\Typora\\themes

Abra o arquivo github.css e comente o bloco @media_print, adicionando os caracteres de comentário CSS /* e */:

/*@media print {
    html {
        font-size: 13px;
    }
    table,
    pre {
        page-break-inside: avoid;
    }
    pre {
        word-wrap: break-word;
    }
}*/

Reinicie o Typora.

Quebra de tabelas por páginas

No PDF exportado, a tabela sempre começa em uma nova página. Altere esse comportamento abrindo o arquivo do tema C:\\Users\\...\\AppData\\Roaming\\Typora\\themes\\github.css e substitua avoid por auto:

\u003ckbd\u003eMenu\u003c/kbd\u003e–\u003ckbd\u003eArquivo\u003c/kbd\u003e–\u003ckbd\u003eConfigurações\u003c/kbd\u003e–\u003ckbd\u003eFormatação\u003c/kbd\u003e–\u003ckbd\u003eAbrir pasta de temas\u003c/kbd\u003e

    pre {
        page-break-inside: auto;
}

### Documentação

Documentação parcialmente traduzida: https://way23.ru/typora-razryvy-shtarnitsy-stranitsy/

### Emojis

https://github.com/ikatyang/emoji-cheat-sheet

### Guia de formatação

[Markdown-Reference.pdf|anexo](upload://bJJtcLkXrjMiDU9xA38FqzPSZJd.pdf) (334,3 KB)

### Diagramas

https://support.typora.io/Draw-Diagrams-With-Markdown

https://mermaid.js.org/syntax/gantt.html

[typora_diagrams.md|anexo](upload://t9Q87PYdpkvGHOIrRP5wvRWvtWe.md) (12,8 KB)

```mermaid
stateDiagram-v2
    State1: O estado com uma nota
    note right of State1
        Informação importante! Você pode escrever
        notas.
    end note
    State1 --> State2
    note left of State2 : Esta é a nota à esquerda.

%%{init: { 
  "theme": "base", 
  "themeVariables": { 
    "pie1": "#8BC34A", "pie2": "#f3d69c", "pie3": "#FF5722",
    "pie4": "#009688", "pie5": "#5C6BC0", "pie6": "#03A9F4",
    "pie7": "#EF4444", "pie8": "#ec070c", "pie9": "#FFC107",
    "pie10": "#ca936d","pie11": "#c9edfa","pie12": "#E91E63"
  } 
} }%%
pie title
    "CI/CD, SETUP, RND (HA/LB)" : 37.3
    "Other (DB, BACKUP, etc.)" : 15.94
    "CONSULT + Suporte" : 13.3
    "PM, processo" : 10.45
    "PERIODIC / SETUP (VM)" : 7.4
    "DOCS" : 5.31
    "PRESALE" : 4.6
    "MONITORING" : 3.85
    "ONBOARD / PREPARE" : 1.82
    "MÁNUEIS / FIX" : 0.18
    "RND (Arquitetura)" : 0.05

Botão

Para obter o botão:

Imagem de um botão vermelho com texto branco em russo que diz: "Requer esclarecimento". (Legenda da imagem do AI)

Adicione no início do documento README.md o seguinte código:

<style>
.markdown-section .mybutton, .markdown-section .mybutton:hover {
  cursor: pointer;
  color: #CC0000;
  height: auto;
  display: inline-block;
  border: 2px solid #CC0000;
  border-radius: 4rem;
  margin: 2px 0px 2px 0px;
  padding: 8px 18px 8px 18px;
  line-height: 1.2rem;
  background-color: white;
  font-family: -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  font-weight: bold;
  text-decoration: none;
}
</style>

Para inserir o botão, use o código com a especificação da classe:

[Requer esclarecimento](URL ':class=mybutton')

No PDF, o botão será exibido como uma simples ligação.