Widget de bloco de código do elementor com destaque de sintaxe (Pro)
Código Fonte é um widget Master Addons Pro para mostrar trechos de código em uma página Elementor Cole o código, escolha um dos 75 idiomas e um dos oito temas Prism.js, e as renderizações de bloco com cores de sintaxe, números de linha opcionais e um botão copiar para a área de transferência Os visitantes podem ler e copiar o código, mas não editá-lo Ele se encaixa tutoriais, documentação, changelogs e portfólios de desenvolvedores.
Como adicionar um bloco de código no elementor
Código Fonte precisa Elementor e um ativo Master Addons Pro licença.
- Ative o Master Addons Pro, edite a página com o Elementor e procure no painel de widgets Código Fonte.
- Arraste-o para onde o trecho pertence.
- Escolha o idioma Código e a Tema.
- Cole o trecho no Código Fonte caixa.
- Ligue o botão de cópia e os números de linha e defina o texto, a visibilidade e a posição do botão.
- Na guia Estilo, defina uma Altura para trechos longos e estilize o botão, visualize a página e teste Copiar.
Cada configuração é coberta pelo Configurações do widget do código-fonte guia.
75 idiomas e 8 temas Prism.js
O Código o dropdown lista 75 linguagens, de HTML, CSS, JavaScript e PHP a Python, Bash, SQL, JSON, YAML, TypeScript, React JSX, Go, Kotlin e Swift. Tema ofertas Padrão, Escuro, Funky, Okaidia, Crepúsculo, Coy, Luz solarizada e Amanhã. Escolha Personalizado para definir seu próprio plano de fundo, cor do texto, cor do número da linha e tipografia na guia Estilo.
- Use um tema claro, como luz padrão ou solarizada em páginas brancas e Okaidia ou Tomorrow em seções escuras.
- O personalizado não possui cores de palavras-chave: o código é mostrado na única cor de texto escolhida, portanto, use um tema predefinido quando desejar cores de sintaxe.
- Um widget contém um trecho. Coloque vários widgets lado a lado para código e saída.
Elementor Pro Code Destaque vs Master Addons Código Fonte
Elementor Pro tem seu próprio widget de Destaque de Código Ambos usam Prism.js, então a escolha se resume aos extras que você precisa.
| Característica | Destaque do código Elementor Pro | Código fonte dos complementos mestres |
|---|---|---|
| Preço | Precisa do Elementor Pro | Precisa de Master Addons Pro |
| Línguas | 37 | 75 |
| Temas | 6 (Sólido, Escuro, Okaidia, Luz Solarizada, Amanhã, Crepúsculo) | 8 mais cores personalizadas |
| Botão Copiar | Copiar para o interruptor da Área de Transferência | Texto personalizado, texto copiado, Sempre ou No Hover, duas posições, estilo completo |
| Números de linha | Sim | Sim |
| Destaque linhas | Sim | Não |
| Envoltório de palavras | Sim | Não |
| Altura e tamanho da fonte | Sim | Altura, mais tipografia com o tema Personalizado |
Escolha Elementor Pro se precisar destacar linhas específicas ou envolver linhas longas Escolha Master Addons se quiser mais idiomas, mais temas ou um botão de cópia estilizado Relacionado: Índice para tutoriais longos e Tabela Dinâmica para tabelas de referência.
Copie os números dos botões e linhas
Ligado Habilitar botão copiar para adicionar um botão que copia todo o trecho Defina o seu Copiar texto do botão, o Depois Copiado Texto do Botão mostrado após um clique, Visibilidade Botão (Sempre ou no Hover) e Posição Botão (canto superior direito ou inferior direito). Habilitar Número da Linha adiciona números no lado esquerdo.
- Mantenha o botão definido como Sempre nas páginas do tutorial para que os leitores percebam.
- Os números de linha facilitam a referência a uma linha no seu texto.
- Não há opção de destacar linhas específicas ou envolver linhas longas dentro do widget.
Estilo de contêiner e botão
O Recipiente seção define uma Altura (até 1200 px) tão longo snippets rolar, além de preenchimento, margem, borda e raio Com o tema Personalizado também adiciona um fundo, tipografia, cor de texto e cor número de linha O Botão a seção estiliza o botão de cópia com tipografia, cor do texto, cor de fundo, preenchimento, borda e raio.
- Limite a altura em arquivos longos para que a página permaneça legível.
- Combine o fundo do botão com a cor da sua marca.
- Adicione o preenchimento para que o código não toque nas bordas do bloco.
Perguntas frequentes sobre o código-fonte
O widget Código Fonte é gratuito?
Não. O Código Fonte faz parte Master Addons Pro. Os usuários do Elementor Pro também possuem o widget Code Highlight da Elementor.
Posso esconder os números das linhas ao lado do código?
Sim. Definir Habilitar Número da Linha to No para um bloco mais limpo.
Onde posso posicionar o botão de cópia?
Definir Posição Botão no canto superior direito ou inferior direito, e Visibilidade Botão para sempre ou no Hover.
Quais idiomas o widget Código Fonte suporta?
75, escolhido no código dropdown Eles incluem HTML, CSS, JavaScript, PHP, Python, Bash, SQL, JSON, YAML, Markdown, TypeScript, React JSX e TSX, Go, Java, Kotlin, Swift, Ruby, C, C ++ e C# Os visitantes podem ler e copiar o código, mas não podem editá-lo.
Posso usar meu próprio esquema de cores em vez dos temas predefinidos?
Parcialmente. defina o tema como personalizado para escolher o fundo, a cor do texto, a cor do número da linha e a tipografia na seção Estilo do contêiner As cores das palavras-chave vêm apenas com os oito temas predefinidos, portanto, um bloco personalizado mostra o código em uma cor, a menos que você adicione seu próprio CSS.
Posso destacar linhas específicas?
Não. O widget não tem opção de destaque de linha O widget de destaque de código do Elementor Pro pode destacar linhas escolhidas se você precisar disso.
Widgets e extensões de elementos de tendência
Construa sites sofisticados em menos tempo.
Glassmorphismo
Contêiner Extras
Padrões
![Extensão Master Addons Post/Page Duplicator para Elementor: MA Link de linha Duplicator na lista de páginas WordPress criando uma página de destino - rascunho [duplicado #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de postagem/página
