Código de destaque de sintaxe com Javascript [fechado]

109

Quais bibliotecas Javascript você pode recomendar para blocos de destaque de sintaxe <code> em HTML?

(Uma sugestão por resposta, por favor).

javascript html syntax syntax-highlighting mlambie
fonte
shjs.sourceforge.net
Firoz Khan

Respostas:

103

StackOverflow usa a biblioteca Prettify .

AaronSieb
fonte
Eu apoio isso. O Google Code o usa para seu próprio realce de repositório (desde que eles o escreveram) e detecta automaticamente o idioma.
Karan,
Certamente, usar um que detecta "automaticamente" a linguagem simplesmente coloca mais peso na máquina / navegador do cliente ...
James,
2
Você pode dar o idioma ao Prettify se souber, isso vai melhorar o desempenho. Isso simplesmente não é usado no StackOverflow devido ao grande público de idiomas.
Vincent Robert,
Acabei de adicionar isso ao meu site, e é ótimo e muito simples de usar!
Lawrence Dol
@Vincent: melhora mais do que apenas o desempenho ;-)
SamB
44

Recentemente, desenvolvi um chamado arco-íris.

O objetivo principal do design era tornar a biblioteca central realmente pequena e torná-la realmente fácil para os desenvolvedores estenderem.

Veja http://rainbowco.de .

Craig
fonte
2
Acabei de encontrar o Rainbow hoje - parece-me que ele pode discriminar com mais precisão do que o Prettify (como, por exemplo, ser capaz de dizer quando rdf:typeé usado como um elemento e quando é um atributo).
Roger_S
3
Isso precisa ir até o topo, Craig. Eu tentei todas as outras soluções e apenas Rainbow lidou com Python corretamente e tinha folhas de estilo de tema legíveis . Plugin incrível!
Blender de
15

O jQuery Syntax Highlighter é um novo baseado no Prettify do Google - um realçador de sintaxe simples de javascript realmente muito popular.

Ele suporta coisas como blocos codee pre, capaz de usar nomes de classe como language-javascriptpara indicar que queremos destacar, bem como quebra de linha. Você pode copiar e colar o código selecionando-o normalmente em vez de abrir uma visualização bruta como muitas outras. Ele pode ser ainda mais personalizado usando o atributo de dados HTML5 data-shou especificando opções na inicialização. Uma ótima escolha estável que é atualizada regularmente.

Balupton
fonte
O autor na verdade diz que é baseado no Prettify do Google, não no SyntaxHighlighter. Se parece com SyntaxHighlighter 3, porém, mas parece exigir muito menos trabalho para configurar. Obrigado pelo link!
Tieson T.
15

E o Prism de Lea Verou.

Do anúncio de sua postagem no blog em junho (2012):

  • É minúsculo. O núcleo tem apenas 1,5 KB reduzido e compactado em gzip.
  • É incrivelmente extensível. Não só é fácil adicionar novas linguagens (isso é um dado adquirido em todos os realçadores de sintaxe atualmente), mas também estender as existentes.
  • Suporta paralelismo através de Web Workers, para melhor performance em determinados casos.
  • Ele não o força a usar qualquer marcação específica do Prism, nem mesmo um nome de classe específico do Prism, apenas a marcação padrão que você deveria usar de qualquer maneira. Então, você pode apenas tentar por um tempo, remova-o se não gostar e não deixe rastros.
Ilya Tuvschev
fonte
Essa acabou sendo a melhor opção de todas as respostas para mim devido à facilidade de adicionar novas definições de linguagem.
Mike Grace
5

Se você estiver usando jQuery, há Chilli:

http://code.google.com/p/jquery-chili-js/

Tudo que você precisa fazer é incluir jquery-chili.js e recipes.js, e realçar com 

$("code").chili();

Ele deve descobrir o idioma sozinho.

Edu felipe
fonte
Todos os links para exemplos nessa página levam a um domínio expirado cheio de anúncios, então é um pouco difícil ter uma ideia de como é o realce.
Nathan Osman
5

Estou muito feliz com o SHJS . Suporta vários idiomas e parece muito rápido e preciso.

Aqui está um exemplo de onde eu o uso no meu blog . Estou usando meu próprio arquivo CSS personalizado que simula o realce de sintaxe do Coda . Envie-me um e-mail se desejar usá-lo.

Andrew Hedges
fonte
4

jQuery.Syntax é um marcador de sintaxe extremamente rápido e leve. Possui carregamento dinâmico de arquivos de origem de sintaxe e integra-se de forma limpa usando CSS ou modelines.

Ele foi desenvolvido especificamente para preencher uma lacuna - isto é: um analisador de sintaxe rápido, limpo e do lado do cliente.

ioquatix
fonte
infelizmente, pensava que uma mensagem FpML padrão era SPAM :)
ehosca
@ehosca, você pode me dar algum esclarecimento sobre o problema que está tendo?
ioquatix
quando colo o xml em goo.gl/PPcDx para goo.gl/qSqm9 aparece o conteúdo inválido, parece ser spam. espero que isto ajude.
ehosca de
Você precisa incluir algumas quebras de linha no texto, caso contrário, parecerá spam de link. Não consigo lembrar as fórmulas exatas que usei, mas acho que se você tiver mais de um URL por linha, o texto é considerado spam - isso porque muitos bots estavam enviando spam para o sistema ( sintaxe-highlighing.com ).
ioquatix de
3

Se você estiver procurando por realce de sintaxe em um editor de navegador, experimente o CodeMirror .

rplevy
fonte
3

Não estou sendo argumentativo, mas apenas pensei que vale a pena mencionar que se você estiver usando um CMS ou plataforma de blog, usar um marcador de back-end é melhor por razões óbvias - dê uma olhada em Geshi ( http://qbnz.com/highlighter/ ) se você está interessado. Na verdade, você pode configurar seu servidor para analisar o conteúdo HTML por meio de uma tecnologia de back-end - portanto, não há necessidade de marcadores JS. (A única funcionalidade que eles adicionam é a capacidade de imprimir / copiar [usando swf].)

James
fonte
2
Não é óbvio para mim. Por que usar um marcador de back-end é melhor?
Evan P.
1
Sim, eu também seria realmente adoraria saber o que é "óbvio" sobre preferindo enviar uma resposta maior para o cliente ...
Zenmaster
1
Eu prefiro que o destaque de sintaxe ainda esteja presente em dispositivos que não têm JS ativado. Além disso, os marcadores do lado do cliente têm custos de tempo de execução que podem ser bastante elevados se você tiver muito código para destacar. Dito isso, depende do seu caso de uso específico :)
James
Quais dispositivos não têm JS habilitado?
Jack Giffin,