Lista de realce para colar / exibir o código-fonte no WordPress

2018 年 11 24 月 日

Ao escrever um artigo de programação e apresentar o código-fonte, quero o Highlighter, uma função que pode exibir o código de uma maneira fácil de ler.Na verdade, ele foi desenvolvido tanto que é difícil decidir qual usar.Neste artigo, apresentaremos as ferramentas para destacar o código-fonte no WordPress e seus recursos separadamente para tipo de biblioteca, tipo de plug-in e serviço da web.

Tipo de biblioteca

Marcador do tipo para fazer upload do arquivo de biblioteca adquirido para a pasta de tema filho e usá-lo.É mais leve que um plugin, mas leva um pouco de tempo para instalar.

Highlight.js

Uma biblioteca JavaScript chamada Highlight.js. Ele oferece suporte a 189 linguagens de programação e 89 estilos de exibição (em novembro de 2018).A função é tão simples quanto destacar o código.Muita luz.Popular.

https://highlightjs.org/

Prism.js

Esta também é uma biblioteca JavaScript leve.Ele oferece suporte a 153 idiomas e 8 estilos de exibição (em novembro de 2018).Como uma extensão, você pode adicionar facilmente números de linha, realce de linhas especificadas, exibição de idioma, instalação do botão de cópia, etc.Isso também é popular.

https://prismjs.com/

Código do Google embelezar

Como o nome indica, uma biblioteca JavaScript desenvolvida pelo google. Ele suporta as principais linguagens de programação, como C, Python, HTML, CSS, JavaScript, Makefile, mas as linguagens menores precisam ser suportadas por extensões.Existem 5 estilos de exibição (em novembro de 2018).Além do método de fazer upload para uma pasta do WordPress como os dois tipos acima e usá-lo, há um método de fácil instalação usando um autoloader.Existem poucas informações em japonês porque não há muitos usuários.

https://github.com/google/code-prettify

Tipo de plug-in

Um tipo distribuído como um plugin gratuito do WordPress.É muito fácil de implantar e gerenciar, mas pode tornar seu site um pouco mais pesado do que outros tipos.No tipo de biblioteca, você pode selecionar para suportar apenas o idioma necessário, mas na versão do plug-in, é uma imagem com todos os idiomas e todas as funções.

WP Code Highlight.js

É uma versão de plug-in de Highlight.js introduzida no tipo de biblioteca. Compatível com SyntaxHighlighter, Prettify e CrayonSyntaxHighlighter, então você pode migrar de outros realçadores também.

https://ja.wordpress.org/plugins/wp-code-highlightjs/

Marcador de sintaxe do prisma

Uma versão de plugin do Prism.js.

https://ja.wordpress.org/plugins/ank-prism-for-wp/

Code Prettify

Mesmo.

https://ja.wordpress.org/plugins/code-prettify/

Marcador de sintaxe Crayon

Impressão de que existem muitos usuários e informações abundantes sobre como abrir em japonês.Mesmo os iniciantes podem facilmente alterar o tamanho e o design da fonte, adicionar números de linha, realçar, etc., e é muito personalizável.Existem muitas análises que dizem que é pesado, e é uma preocupação que a última atualização foi interrompida desde 2015.

https://ja.wordpress.org/plugins/crayon-syntax-highlighter/

Mivhak Syntax Highlighter

Ele suporta mais de 130 linguagens de programação e tem 36 temas.Parece que os scripts de linguagem e temas são carregados sob demanda do CSS e JS leves, mas parece ser tão pesado quanto o Crayon Syntax Highlighter.Você pode especificar o tamanho da fonte apenas para a parte do código.

https://ja.wordpress.org/plugins/mivhak/

 

Eu comparei os efeitos de cada plugin na velocidade de exibição do site, portanto, consulte isso também.

Comparação da velocidade de exibição do site de plug-ins do Marcador de sintaxe

 

 

Tipo de serviço da web

É um tipo de Marcador que pode ser destacado convertendo o código-fonte em uma tag para embutir na Web e colando a tag em um editor de texto Wordpress.

Gist (serviço GitHub)

Gist é um serviço de compartilhamento de código no GitHub. Quando você faz upload do código para Gist, a tag para exibição é gerada. É necessário se registrar no GitHub, mas ao contrário, a vantagem é que você pode editar e gerenciar o código no lado do GitHub (edição com um editor de texto,OuÉ complicado mexer com tags como).

https://gist.github.com/discover

srctohtml

Você pode converter facilmente o código em tags HTML para incorporação sem registro.As linguagens suportadas são JavaScript, C ++, PHP e um pouco menos.

http://marginalsoft.com/tools/srctohtml/

Qual escolher

Também é dito que a ferramenta a ser usada depende do que você deseja enfatizar.Resumi brevemente as orientações de cada um, portanto, consulte-as.Também é importante se você se preocupa com o design no momento do destaque.

Tipo de biblioteca A ênfase é colocada na leveza da operação e na velocidade de exibição
Tipo de plug-in Ênfase na facilidade de introdução
(Alguns plug-ins não são tão pesados)
Tipo de serviço da web GitHub registrado (Gist), que é fascinado pela função de gerenciamento de código
Pessoas que têm poucas oportunidades de incorporar (srctohtml)

A propósito, eu uso o plugin Mivhak Syntax Highlighter.É bom que você possa especificar o tamanho da fonte apenas para a parte do código e pode operar várias configurações de botão em uma tela de configuração simples.Fica lento no celular, mas a pessoa que se refere ao código provavelmente é do PC, e acho que esse é o problema.