Melhorando a Leitura do Seu Código com Highlight.js

Olá a todos! Como esta é minha primeira postagem, é claro que deveria ser sobre destaque de código dentro de sites e blogs. A experiência de leitura e compreensão do código é essencial para desenvolvedores, seja em blogs técnicos, documentação ou até mesmo em projetos pessoais. É aqui que entra o Highlight.js, uma biblioteca que permite realçar sintaticamente trechos de código de forma automática e eficiente.

O que é o Highlight.js?

O Highlight.js é uma biblioteca de realce de sintaxe de código escrita em JavaScript, que funciona diretamente no navegador. Ela detecta automaticamente a linguagem do código e aplica um esquema de cores que melhora a legibilidade, facilitando a compreensão do conteúdo por outros desenvolvedores.

Vantagens de Usar Highlight.js

1. Melhora a Legibilidade do Código

Quando um trecho de código é destacado corretamente, fica muito mais fácil identificar estruturas, palavras-chave, strings e comentários. Isso facilita o entendimento rápido, principalmente quando se trata de linguagens com sintaxe complexa.

2. Suporte a Múltiplas Linguagens

A biblioteca suporta mais de 200 linguagens, incluindo JavaScript, Python, Java, Kotlin, HTML, CSS, SQL, e muitas outras. Isso significa que não importa qual tecnologia você está abordando, seu código sempre terá um realce adequado.

3. Detecção Automática da Linguagem

O Highlight.js consegue identificar automaticamente a linguagem do código sem a necessidade de especificação manual. Isso torna o processo de implementação mais simples, economizando tempo e reduzindo erros.

4. Facilidade de Implementação

Para adicionar o Highlight.js ao seu site ou blog, basta incluir a biblioteca e inicializá-la. Veja um exemplo simples:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Exemplo Highlight.js</title>
    <!-- CSS do Highlight.js -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
    <!-- JS do Highlight.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <!-- Inicialização do Highlight.js -->
    <script>hljs.highlightAll();</script>
</head>
<body>
    <pre><code class="language-javascript">
        function helloWorld() {
            console.log("Olá, mundo!");
        }
    </code></pre>
</body>
</html>

Você também tem a opção de não aplicar de maneira global, como no exemplo acima. Nesta postagem, eu deixei o código dessa forma, aplicando o codigo somente para essa postagem:

<!-- CSS do Highlight.js -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
<!-- JS do Highlight.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<!-- Inicialização do Highlight.js -->
<script>hljs.highlightAll();</script>

5. Suporte a Diferentes Temas

O Highlight.js oferece uma grande variedade de temas para personalizar o realce do código de acordo com o design do seu site. Você pode escolher entre temas claros, escuros e até inspirados em editores de código como VS Code e Monokai. Para mudar o tema, basta mudar o link do stylesheet.

Para o tema do VS Code, use um dos links:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/vs.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/vs2015.min.css">

Para o tema do Monokai, use o link:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/monokai.min.css">

Para você visualizar todos os temas disponíveis, acesse o link https://cdnjs.com/libraries/highlight.js.

6. Leve e Rápido

Diferente de outras bibliotecas mais pesadas, o Highlight.js é otimizado para carregamento rápido, garantindo que sua página não sofra impactos de desempenho.

Conclusão

Se você publica artigos técnicos, mantém uma documentação de API ou simplesmente quer deixar seus exemplos de código mais bonitos e fáceis de ler, o Highlight.js é uma excelente solução. Com suporte para diversas linguagens, facilidade de implementação e uma interface leve, essa biblioteca é uma ferramenta indispensável para qualquer desenvolvedor que deseja compartilhar código de maneira eficiente.

Experimente o Highlight.js e melhore a apresentação do seu código hoje mesmo! E então agora sim, eu posso começar o meu proprio blog.

Pesquisar neste blogue

Koalla Developer