Todos conhecemos o software de criptografia de desktop e os IDEs da web. Esses recursos destacam a sintaxe para facilitar a escrita e a depuração de código.
Mas você sabia que pode pegar a mesma cor de sintaxe e adicioná-la ao seu conteúdo da web?
Obviamente, nem todo mundo escreve sobre código ou possui trechos de código em seus posts. Mas se você escrever muitos artigos de codificação ou precisar adicionar trechos de código à sua página de destino, desfrutará dessas soluções de destaque de código CSS e JS.
Se você está procurando por plug-ins de marcadores de sintaxe para WordPress, dê uma olhada nesta postagem.
1. Caixas de código-fonte angulares
Aqui está um snippet legal criado por Andrew Archibald, construído inteiramente no Angular.js.
Todas essas caixas de código de exemplo têm guias muito semelhantes às que você encontrará nas incorporações do CodePen. Mas você pode adicionar esse tipo de código à sua página incrustado, todos gerenciados por CSS para estilizar.
Isso reduziria as solicitações HTTP sobre a incorporação, e isso lhe dará muito mais controle sobre o tipo de sintaxe que você está usando.
Admito que as guias são bem legais e isso usa a biblioteca de realce angular para compatibilidade de sintaxe em dezenas de idiomas.
2] Estilo da etiqueta
Aqui está um exemplo muito mais detalhado para desenvolvedores que escrevem longos tutoriais e compartilham trechos de código em massa.
Este projeto de design de código funciona com dois recursos: uma barra vertical esquerda com números de linha ou um fundo escuro de página inteira para o código de exemplo.
Você pode alterar o estilo das opções de cores como desejar com apenas um pouco de jQuery. Sem mencionar, há uma variedade enorme aqui para combinar com qualquer design de site.
3. Guias da área de texto
Então, aqui está um projeto realmente único desenvolvido por Ashley Ktorou que mostra o que você pode fazer com uma área de texto simples.
Os codificadores na web precisam digitar o código em algum lugar. Uma área de texto é o elemento perfeito para lidar com isso.
No entanto, com esse snippet, você encontrará uma área de texto personalizada com destaque junto com guias personalizadas e uma função de tela cheia. Sem mencionar que tudo isso funciona com códigos CSS e JS básicos.
É uma loucura que possamos criar editores de código no navegador hoje.
4. Números de linha somente CSS
Esse elemento de sintaxe dinâmica é realmente muito simples. Mas é por causa dessa simplicidade que realmente merece um lugar nesta lista.
Com esse código, você pode adicionar automaticamente números de linha dinâmicos em seus blocos de fragmentos. Você não precisa codificar os números e eles serão agrupados, independentemente de quantas linhas de código você adicionar.
Eu acho que isso pode funcionar bem para um blog com muitos trechos de código entre a escrita.
E é um dos poucos exemplos aqui que usa um plano de fundo mais claro com texto mais escuro.
5. Destaque da sintaxe de auto-inicialização com guias
Deseja adicionar uma função de destaque de sintaxe junto com o Bootstrap? Então você encontrou a caneta perfeita do desenvolvedor Kijan Maharjan.
Isso permite adicionar um widget com guias à sua página que contém muitos estilos diferentes para destacar a sintaxe.
Escolha cores com a biblioteca de códigos prettify e configure todo o layout com pequenas edições CSS.
6. Demonstração de destaque de sintaxe
Aqui está uma demonstração de destaque muito interessante que suporta uma ampla variedade de idiomas para você escolher.
Cada idioma possui seu próprio estilo de design e esquema de cores, mas você também pode editá-los com um pouco de CSS.
Você encontrará algumas opções homogêneas em snippets mais básicos, como o exemplo JSON incorporado acima. No entanto, isso ainda oferece variedade e o design é simples o suficiente para combinar com qualquer design.
7. Prism.js Demo
O script Prism.js gratuito é uma das melhores soluções de código aberto para destacar a sintaxe. É usado por grandes blogs de design como o Smashing Magazine e está disponível gratuitamente para qualquer caso de uso.
Mas se você quiser mergulhar no Prism sem muito código, poderá estudar esse snippet criado por Bram de Haan.
A partir desse código, você encontrará uma configuração muito leve que pode copiar e alterar o estilo para corresponder ao seu site. Use listras de zebra e uma barra de rolagem personalizada para realmente se destacar de outros elementos na página.
8. Editor de código CSS puro
Ok, então o nome disso é um pouco enganador. Tecnicamente, não é um editor de código que você pode usar que roda apenas em CSS.
Mas esse fragmento ainda é tremendamente impressionante.
É uma interface IDE de código estático recriada usando apenas HTML e CSS.
Você provavelmente não encontrará muita utilidade para algo assim no seu site. Mas os estilos de código podem inspirar você a clonar um layout semelhante para seus próprios trechos.
9. Coloração de sintaxe
Super simples e super básico descrevem esse snippet criado por Michaël Germini.
Se você deseja evitar criar sua própria sintaxe, realçando do zero, este lápis é para você. Ele usa um fundo branco limpo com texto brilhante e é um bom modelo de inicialização.
Basta ter em mente que isso é super básico portanto, você precisará gastar um pouco de tempo editando o estilo para corresponder ao seu site.
10. Guia de Código
Neste guia de código gratuito Jo Dahl, você pode ver como esses blocos de destaque de sintaxe são usados em uma configuração do mundo real.
O guia leva você através de HTML e CSS em um layout de grade muito limpo. Os trechos são fantásticos e têm um esquema de cores para chamar sua atenção sem ser irritante para a experiência de leitura.
Lembre-se deste design se estiver criando um blog ou site que apresenta trechos de código.
