Como fazer a cor correta do código em "Habré" e por que é tão difícil

Alguns meses atrás, publiquei meu primeiro post no Habré. Talvez alguns de vocês notem que o código do artigo é pintado de uma maneira incomum e, o mais importante, colorido corretamente, apesar do editor de texto incorporado no site não suportar a marcação original do código e destacar seus elementos incorretamente. Ao mesmo tempo, o código não é inserido pela imagem, como fazem alguns escritores completamente desesperados.

No meu caso, preservar a marcação foi especialmente importante, pois o artigo era uma descrição de como trabalhar no código. Para resolver o problema, criei uma ferramenta que permite transferir o destaque do código no esquema selecionado da IDEA para um artigo sobre Habr. Vou falar sobre o processo de criação de uma ferramenta e os recursos de seu uso.

Por que tudo isso

À primeira vista, pode parecer que isso é feito com malícia, simplesmente porque a iluminação padrão implementada através da tag <source> não é adequada.

De certa forma, isso é verdade, mas não é bem assim.

Primeiro, o destaque dentro da <source> não pode funcionar com partes do código, pois não haverá informações suficientes para colorir. Todos os elementos declarados fora do escopo da peça serão pintados aleatoriamente. Esse problema não tem solução, pois, até onde eu sei, nenhum dos serviços de coloração online permite que você execute um dos seguintes procedimentos:

1. Cole o código completo do projeto no artigo sem exibi-lo na íntegra ou cole o link do commit no GitHub. Em locais específicos do artigo, use recortes de linhas do código completo (com uma indicação do intervalo). Nesse caso, a luz de fundo deve ser determinada com base no código completo, é claro.
2. Indique meta informações explícitas para elementos indefinidos. Uma maneira bastante difícil para o usuário, mas eu concordaria com isso.

Em segundo lugar, o destaque dentro do <source> nunca é igual ao número de diferentes tipos de elementos com um IDE regular. E devido ao problema descrito acima, criar cores avançadas não faz sentido: ninguém insere o código completo do projeto no artigo, portanto, essa funcionalidade não funciona.

Ao mesmo tempo, a realidade é que partes do código precisam ser inseridas nos artigos e, quanto menores, melhor.

Você pode ler o código sem realçar, mas por quê.

Características do Habr

O IntelliJ IDEA possui suporte interno para exportar código para HTML. A cópia regular do código é colocada na área de transferência, incluindo o código colorido, que pode ser lido como HTML.

Infelizmente, o Habr não permite o uso de marcação HTML em artigos diretamente. As razões para isso são um mistério coberto pela escuridão, mas talvez isso se deva à unificação da aparência dos artigos. Se você permitir o uso de HTML em artigos, será possível recuperar o atraso, para que haja problemas com a visualização.

Geralmente apoio a idéia de proibir o HTML em artigos, mas há uma ressalva. Um recurso para o pessoal de TI, onde o código é frequentemente discutido e não há como inseri-lo corretamente no artigo, é de alguma forma estranho.

Então, temos a nossa disposição tags <b> , <i> , <font> . Além disso, tudo isso funciona dentro da <code> , necessária para a formatação. Bem, o   ; Eles também nos salvaram, o que é útil para longas linhas de código e recuo.

Desnecessário dizer que todas as formas padrão de obter o código HTML da IDEA não fornecem esse tipo de HTML, portanto o trabalho de conversão será bastante grande.

A abordagem

Para começar, vale a pena agradecer ao autor que fez um lacre pelo seu material sobre esse assunto. Não usei diretamente a ferramenta proposta no artigo, e dificilmente teria acontecido, mas graças a esse material entendi toda a profundidade do problema e, ao mesmo tempo, senti o vento da esperança.

O único ponto negativo desta publicação é a grande quantidade de código combinada com uma explicação muito limitada do que ela faz e por quê.

Tentarei corrigir a situação e descrever o que você deve fazer com a sua marcação HTML, se você quiser trazê-la para um formulário pronto para inserção no Habr.

1. Antes de exportar, você precisa definir o esquema de cores desejado no IDEA, por exemplo, no site de Temas de cores . O código será exportado com o esquema selecionado. É melhor escolher um esquema com fundo branco (já que o fundo não pode ser definido no Habré) e sem sublinhado. Não pensei em como é fácil arrastá-los, porque realmente não queria.
2. Trabalhamos apenas com os internos da <pre> . Mesmo se você estiver usando a exportação não da IDEA, mas de alguma outra, provavelmente haverá essa tag na marcação HTML, pois sem ela é difícil formatar o código corretamente. A tag em si é removida, substituindo-a por <code> .
3. O texto provavelmente será apresentado como um <span> com estilos diferentes. Todos eles têm que se livrar. Muitos serviços de coloração trazem estilos para uma folha de estilos, que é lógica, e usam links para nomes de estilos. Especificamente, o IDEA ainda não faz isso, o que facilita a tarefa (as configurações de estilo estão diretamente no <span> ).
4. Defina a cor da fonte através da <font> . Infelizmente, a cor do plano de fundo não pode ser definida.
5. font-style:italic propriedade font-style:italic em um par de tags <i> </i> e font-weight:bold em <b> </b> .
6. Substitua todos os espaços com o   ; .
7. Quebras de linha na forma de <br> substituídas por \n .
8. A marcação HTML na IDEA produz linhas em branco com estilos e espaços a partir de espaços com estilos. É melhor jogar fora esses estilos: isso reduzirá bastante o comprimento e aumentará a compreensibilidade do código.
9. Verifique se os feeds de linha não têm nenhum estilo. Caso contrário, haverá problemas com as linhas vazias.

O último parágrafo é ilustrado por um exemplo:

<code>
1 <font color="000000">
</font> 2
</code>

O código fornecido será ativado por "Habr" em 12 . O mesmo se aplica às tags <b> e <i> , bem como a qualquer combinação delas. As quebras de linha não devem ter um estilo e tudo ficará bem.

Implementação

A princípio, a tarefa de escrever um conversor para código HTML arbitrário parecia bastante complicada para mim. No entanto, se você tomar uma decisão por uma versão específica do HTML, tudo não será tão ruim. Consegui fazer tudo no RegExp puro, ou seja, mesmo sem a análise de HTML. O principal problema acabou sendo a identificação da marcação Habr.

Para evitar quebras de linha tenham estilos, tive que fazer substituições bastante complicadas, que são provavelmente as mais incompreensíveis (consulte a função pop-upBr). A idéia é que as tags após cada substituição sejam exibidas da profundidade das tags de formatação para o exterior. Assim, depois de todas as substituições, a tag <br> está fora de formatação.

Além disso, o IDEA coloca não apenas Rich Text na área de transferência, mas também objetos bastante complicados, como application/x-java-jvm-local-objectref . O problema é que a presença de tais objetos na área de transferência leva a erros persistentes no meu console sobre o tópico de construção do DataFlavor. Infelizmente, não há nada que você possa fazer: o JDK simplesmente trabalha com a área de transferência. Para mim, a descoberta de um código desse tipo foi uma descoberta. Aparentemente, os tios inteligentes que escreveram isso acreditam que sim. Em geral, não tenha medo de erros que possam ocorrer ao trabalhar com a ferramenta.

O projeto está escrito em Kotlin e vive no GitHub .

Sugestões para melhorias são bem-vindas! Por exemplo, seria bom projetar essa ferramenta como um plugin para o IDEA. Ainda não encontrei uma maneira simples de fazer isso: as fontes do plug-in Copiar como HTML, infelizmente, estão fechadas e leva muito tempo para descobrir como escrever esse plug-in do zero.