Ir para o conteúdo principal

Como adicionar um trecho de código usando o Gutenberg no WordPress

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Quase todos os blogueiros, criadores de conteúdo ou desenvolvedores de tecnologia às vezes precisam exibir trechos de código destacados em seu blog. Pode ser uma dor de cabeça em si. No entanto, destacar uma ou mais linhas neste snippet também pode ser necessário, e esse recurso infelizmente não faz parte da maioria das integrações de código. Felizmente, o plugin SyntaxHighlighter Evolved existe. Mostraremos como usá-lo para manter o código o mais limpo e legível possível.

SintaxeHighlighter Evolved

A instalação e ativação do plugin é simples. Você pode encontrá-lo no repositório de plugins do WP.org mas certifique-se de que seja bem feito Alex Mills (Viper007Bond)porque, de fato, há muitos resultados. No entanto, sabemos que é confiável e atualizado. Além disso, ele vem com um bloco especializado para a editora Gutenberg. Sem mencionar vários parâmetros que permitem personalizar sua experiência, tornando-a nossa escolha para esse tipo de tarefa.

No menu parametros do seu painel do WordPress, você encontrará um novo item chamado SyntaxHighlighter . Vá em frente e clique nele. Lá você pode ajustar tudo o que precisa para incorporar os trechos de código no seu site WordPress.

Configurações de marcador

A página de configurações do plug-in é relativamente simples. Uma coisa em particular que gostamos nesse plug-in é que você recebe muitas personalizações sobre como o código é exibido no seu site. Você pode adicionar classes CSS à incorporação, ajustar o preenchimento do número da linha, escolher temas de cores, usar guias inteligentes e quebras de linha e decidir se deseja carregar o realce individual da linguagem de codificação no nível do site.

Queremos definir três parâmetros específicos que a maioria das pessoas deve conhecer.

Versão do plug-in, números de linhas e tamanhos das guias

A primeira é a versão do plug-in que você está carregando. Embora o plug-in permaneça atualizado no repositório, você pode escolher entre as versões 2.xe 3.x do plug-in , dependendo de como você deseja exibir seu código. Ambos são seguros, no entanto, cada um deles oferece recursos específicos que o outro não possui (no momento da redação deste artigo).

Comece a promover seu blog

Faça o download de dezenas de logotipos, banners, modelos de sites e muitas outras ferramentas de marketing para comercializar seu blog WordPress. [Recomendado]

Se os usuários copiarem seu código é o mais importante, a versão 3.x fará o truque. No entanto, se o seu for mais útil para a exibição do que o utilitário real, a quebra da versão 2.x pode ser melhor para você, porque você não precisa usar as barras de rolagem. para trechos de código grandes.

Em seguida, você deve exibir ou não os números de linha. Para grandes blocos de código e tutoriais, os números de linha são inestimáveis. No entanto, quando você tem trechos curtos, não é necessário rotulá-los permanentemente como linhas 1 e 2. Removê-los pode melhorar drasticamente a aparência do código.

E depois há o tamanho da guia sempre controverso. O valor padrão da opção é 4, mas você pode substituí-lo pelo número de sua escolha. Incluindo o valor correto de 2. (Sim, percebemos que não há valor correto, apenas gostamos dos espaços de tabulação 2.)

Seu código e códigos de acesso

Se você rolar até a parte inferior da página parametros você verá uma visualização do código grande, bem como um grande número de parâmetros de código curto. Seria bom passar por eles, apenas para ver o que todo o plugin pode fazer para destacar seus trechos de código. Além disso, todas as alterações feitas acima na exibição do código nas configurações acima serão refletidas aqui. Portanto, pressione Salvar depois de alterar qualquer uma das opções.

Embora algumas pessoas não sejam os maiores fãs de códigos curtos, porque podem vinculá-lo a alguns plug-ins, achamos que vale a pena usá-los porque são inteligentes e fáceis de memorizar. Se nada mais, você deve se lembrar de duas coisas e o plug-in funcionará da melhor maneira para você.

ou ou ou e ... bem, você recebe </ li> <li> </ Li> </ ul>

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

Ou algumas variações. Se você se lembra, está confiante nas diferentes coisas que pode fazer com este plugin. Embora você possa usar o identificador longo, o plug-in SyntaxHighlighter foi desenvolvido o suficiente para simplificar seu trabalho.

Use códigos de acesso

Onde quer que você possa criar um código curto, você pode usá-lo. No Divi ou no editor clássico, você pode usar o módulo Texto ou o editor TinyMCE e simplesmente colar o código entre os códigos de acesso. Devido à operação da guia Visual, sugerimos que você use a guia texto para manter esses caracteres especiais de formatação.

Se você é usuário do Gutenberg / Block Editor, as coisas são muito simples. Você pode, novamente, usar o bloco de texto para isso. Ainda mais fácil, o bloco HTML personalizado. Como acima, cole o código nas tags shortcode.

Melhor ainda, o bloco SyntaxHighlighter Evolved é ele próprio. A instalação do plug-in inclui seu próprio bloco Gutenberg; portanto, se você não é um código de acesso e não quer brincar com as configurações, não precisa. Basta encontrar o bloco em formatação e insira-o na sua mensagem ou página.

Não importa como você insere o código, você verá a mesma renderização no front-end do seu site WordPress.

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

Resumir

Pode ser necessário apresentar trechos para seu público-alvo por vários motivos. Talvez você esteja escrevendo tutoriais ou publicando soluções para problemas comuns que o público pode usar e usar como bem entender? Mas, às vezes, uma integração ao GitHub simplesmente não fornece o tipo de experiência que você deseja para seus usuários. É quando você precisa de um plugin como o SyntaxHighlighter Evolved.

Em apenas alguns cliques, com um pouco de personalização e um bloco ou código de acesso Gutenberg, seu público-alvo explorará seu código sem problemas.

Este artigo contém comentários 0

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
1 ações
ação1
chilrear
Enregistrer