Adicionar Linhas ao HighlightJS

Curiosamente, os desenvolvedores do HighlightJS acreditam piamente que “não” ter linhas no código destacado pela bibliotéca é uma característica.  Sinceramente, não sei de onde os caras tiraram esta idéia, mas como gosto dele, decidi fazer um “hack” para resolver isso, todavia, o fiz com jQuery.

Eu estou instanciando o HighlightJS desta forma:

$('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
});

Não testei de outra forma, até porque considero esta a mais “semântica”.

Para adicionar o suporte a linhas basta iterar sobre o conteúdo de cada um e fazer uma substituição no HTML:

$('.hljs').each(function (index) {
    if($(this).hasClass('lines')) {
        var lines = $(this).html().split("\n");
        var html = '';
        for(var i = 0; i < lines.length; i++) {
            html += "\n"+(i+1)+"" + lines[i];
        }
        $(this).html(html.replace("\n", ""));
    }
});

Feito isso, precisamos adicionar estilo a class “lineNumber”:

.lineNumber {
   border-right: 1px solid;
   margin-right: 10px;
   padding: 0px 5px;
   text-align: right;
   width: 40px!important;
   display: inline-block;
}

E por fim, agora ao definir um bloco de código, simplesmente adicione a classe “lines”:

<pre><code class="javascript lines">//Seu código aqui</code></pre>

E para testar, seguem os códigos anteriores:

$('.hljs').each(function (index) {
    if($(this).hasClass('lines')) {
        var lines = $(this).html().split("\n");
        var html = '';
        for(var i = 0; i < lines.length; i++) {
            html += "\n"+(i+1)+"" + lines[i];
        }
        $(this).html(html.replace("\n", ""));
    }
});
.lineNumber {
   border-right: 1px solid;
   margin-right: 10px;
   padding: 0px 5px;
   text-align: right;
   width: 40px!important;
   display: inline-block;
}

É isso ai! Abraço do Giba!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *