O painel de visualização de Markdown do MarkNode pode ser estilizado com diferentes temas. Escolha um visual integrado, deixe a visualização acompanhar automaticamente o tema do aplicativo ou escreva seu próprio CSS para combinar com o local onde seus documentos serão publicados.
Acompanhando o Tema do Aplicativo
Por padrão, a visualização usa a opção Seguir o tema do app: ela adota o estilo integrado que combina com o seu tema do aplicativo atual, de modo que alternar de Paper para Midnight (ou qualquer outro tema) recolore a visualização para combinar em uma única ação. Você não precisa escolher um tema de visualização, a menos que queira um visual diferente do restante do aplicativo.
Temas Integrados
O MarkNode vem com um conjunto de temas de visualização integrados, disponíveis para todos os usuários. Eles são somente leitura e não podem ser modificados, mas você sempre pode copiar um deles como ponto de partida para um tema personalizado. Além dos estilos que combinam com cada tema do aplicativo (Paper, Midnight, Sepia, Nord, Solarized Dark, High Contrast), há visuais voltados a contextos e climas específicos, como:
- GitHub Light e GitHub Dark — renderização no estilo do GitHub para documentação
- Solarized Light e Solarized Dark — as paletas Solarized
- Serif — uma coluna centralizada com fonte serifada para textos longos
- Compact — um layout mais compacto para material de referência denso
- Academic, Newsprint, Dracula e outros
Os temas integrados derivam suas cores base de fundo, texto, links e bordas do tema do aplicativo ativo, então ficam corretos no claro e no escuro sem que você precise escolher nada novamente. (Há também um estilo interno Padrão que dá suporte a Seguir o tema do app; no menu, você escolhe Seguir o tema do app em vez de Padrão diretamente.)
Para trocar de tema, clique no botão de estilo da visualização no cabeçalho do painel de visualização ou clique com o botão direito em qualquer ponto da visualização e use a lista de estilos. Escolha Seguir o tema do app para voltar a acompanhar o tema do aplicativo ou escolha um estilo específico para fixá-lo. A alteração é aplicada imediatamente a todas as superfícies de visualização — a visualização acoplada ao lado do editor e quaisquer janelas de visualização que você tenha desacoplado — e é lembrada entre as sessões.
Criando um Tema Personalizado
No menu de estilos da visualização, escolha Novo estilo a partir deste… para criar um tema personalizado baseado no que está ativo no momento:
- Digite um nome para o novo tema. Os nomes não podem coincidir com o nome de um tema integrado.
- O editor de CSS é aberto com o CSS de origem já preenchido — edite-o como preferir.
Conforme você digita, a visualização é renderizada novamente ao vivo. O CSS fica na memória até que você salve, então você pode experimentar à vontade; se mudar de ideia, feche o editor para descartar as edições.
Para editar um tema personalizado que você já criou, selecione-o e escolha Editar estilo atual… no mesmo menu.
Salvando e Compartilhando
Ao salvar um tema personalizado, ele é armazenado na sua biblioteca global de temas, ficando disponível em todos os projetos desta máquina. Você também pode marcar Salvar uma cópia no projeto atual para gravá-lo no projeto, o que significa que o tema viaja junto com ele. Se você versionar o projeto no Git, todos os colaboradores que clonarem o repositório verão a mesma visualização.
Ao abrir um projeto que contém um tema de visualização personalizado que você ainda não possui, esse tema aparece na sua lista de estilos enquanto o projeto estiver aberto.
O Que o CSS Personalizado Pode Estilizar
O CSS personalizado tem escopo limitado ao contêiner da visualização (.markdown-preview), portanto não afeta o editor, a barra lateral ou qualquer outra parte do MarkNode. Você pode estilizar:
- Fontes e tamanhos do corpo do texto
- Títulos, listas, citações e tabelas
- Blocos de código, código embutido e cores de realce de sintaxe
- Espaçamento, preenchimento e a largura máxima do conteúdo
Se quiser que seu tema personalizado se adapte automaticamente ao claro e ao escuro como os integrados fazem, comece duplicando um tema integrado — sua cópia herda essa base sensível ao tema e você ajusta a partir daí.
Reestruturações pesadas do DOM não são possíveis, pois o CSS ajusta apenas a apresentação visual, não o HTML subjacente.
Excluindo um Tema Personalizado
Selecione um tema personalizado e use a ação de exclusão no menu de estilos. Uma confirmação aparece antes. Se o tema excluído for o ativo, o MarkNode volta ao tema integrado padrão. Os temas integrados não têm ação de exclusão e não podem ser removidos.