Cole o código em um widget de texto normal e ele retira a formatação, deixando um bloco ilegível. O Widget de código-fonte, um widget Pro em Complementos Mestres para Elementor, corrige que: ele mostra seu código com realce de sintaxe adequado, números de linha, um tema de idioma e um botão de cópia, para que os leitores possam pegar um trecho com um clique.
Ele é construído para tutoriais, documentação e blogs de desenvolvedores, em qualquer lugar que você precise mostrar PHP, JavaScript, CSS, HTML ou outro idioma de forma limpa Você cola o código, escolhe um idioma e tema e define o botão de cópia, tudo no painel Elementor Abaixo está uma execução em cada configuração.
O que o widget Código Fonte faz #
O widget pega um bloco de código e o renderiza com realce de sintaxe codificado por cores com base no idioma escolhido. Ele pode numerar as linhas, aplicar um dos vários temas do editor e adicionar um botão copiar para a área de transferência que confirma quando o código foi copiado.
Ele tem três guias: Conteúdo para o código, idioma e botão de cópia, Estilo para o contêiner e aparência de botão e Avançado para as opções usuais do Elementor.
Antes de começar #
- WordPress com Elementor instalado e ativo.
- Master Addons Pro instalado com uma licença ativa, uma vez que o Código Fonte é um widget Pro. Novo no plugin? veja o guia instalação.
- O trecho de código que você deseja exibir.
Como adicionar o widget Código Fonte #
No editor Elementor, abra o Elementos painel e pesquisa Código Fonte, ou vá até a seção Complementos mestres Arraste-o para sua página Ele carrega com um trecho de amostra para que você possa ver o destaque imediatamente.
Adicione seu código e escolha um idioma #
Abrir o Conteúdo guia. O Código Fonte seção detém tudo Cole seu trecho no Código Fonte box, então defina a linguagem e o tema acima dele.
- Código: a linguagem a destacar, uma de 75, como PHP, JavaScript, CSS, ou HTML Isso define como as cores são aplicadas.
- Tema: o esquema de cores para o bloco (coberto abaixo).
- Código Fonte: o trecho em si, com uma opção Escrever com IA se você precisar de um exemplo rápido.
Escolha um tema #
O Tema dropdown define o esquema de cores do bloco de código Ele inclui Default, Dark, Funky, Okaidia, Twilight, Coy, Solarized light, Tomorrow, e uma opção Custom, para que você possa combinar o bloco com uma página clara ou escura.
Mudar a linguagem e o tema juntos dá a cada trecho a aparência certa Aqui está um trecho JavaScript no tema Dark.
Configure o botão de cópia #
O botão copiar é o que torna o widget útil para tutoriais Abaixo da caixa de código estão os controles para ele.
- Habilitar botão de cópia: mostrar ou esconder o botão de copiar para a área de transferência.
- Habilitar número de linha: ligue ou desligue os números das linhas à esquerda.
- Visibilidade do botão: mostrar o botão Sempre ou apenas no hover.
- Posição do botão: coloque-o em um canto, como no canto superior direito.
- Texto do botão de cópia e depois do texto do botão copiado: o rótulo antes e depois de uma cópia, como Código de cópia e Copiado.
Quando um visitante clica no botão, o rótulo muda para o texto Depois de Copiado para confirmar que a cópia funcionou.
Estilize o bloco de código #
O Estilo a guia é dividida em Recipiente e Botão, mais Padrões quando o livre Padrões a extensão está ligada. O Recipiente seção controla o quadro do bloco de código.
- Altura: tampe a altura do bloco e deixe o código longo rolar.
- Preenchimento e margem: espaçamento dentro e ao redor do bloco.
- Tipo de fronteira e raio de fronteira: o contorno e os cantos arredondados.
- Apenas tema personalizado: fundo, tipografia, cor do texto e cor do número da linha O costume mostra o código em uma cor, sem destaque de palavras-chave.
O Botão a seção estiliza o botão de cópia: sua tipografia, cor do texto, cor de fundo, preenchimento, borda e raio Não há cores de hover separadas.
O resultado na página #
Publicar ou antever e o código renderiza realçado, com números de linha e um botão de cópia de trabalho Segue - se um trecho CSS sobre o tema Escuro com o botão a mostrar o seu estado Copiado.
Casos de uso comum #
- Tutoriais e postagens de instruções os leitores de código de compartilhamento podem copiar.
- Documentação de plug-ins e temas com exemplos de configuração ou gancho.
- Blogs desenvolvedores mostrando trechos em PHP, JavaScript ou CSS.
- Bases conhecimento com comandos copiar-colar.
- Páginas de destino demonstrando uma chamada de API ou código de incorporação.
Dicas para trabalhar com o widget Código Fonte #
- Combine o idioma com o código. A configuração correta do código é o que torna o destaque preciso.
- Escolha um tema que se encaixe na página. Use um tema escuro em seções escuras e um tema claro em páginas brancas.
- Mantenha o botão de cópia visível. Defina a visibilidade do botão como Sempre para tutoriais, para que os leitores a identifiquem.
- Limite a altura para trechos longos. Uma altura fixa com rolagem evita que um longo bloco assuma o controle da página.
- Escreva etiquetas claras dos botões. Copiar código e copiar informam aos leitores exatamente o que aconteceu.
Perguntas frequentes #
O que é o widget Código Fonte em Master Addons?
É um widget Master Addons Pro para Elementor que exibe código com realce de sintaxe, números de linha, um tema de idioma e um botão copiar para a área de transferência Você cola um trecho, escolhe o idioma e o tema e define o botão copiar, tudo do painel Elementor, sem necessidade de plugins ou códigos de acesso.
Quais linguagens de programação ele destaca?
Você escolhe uma das 75 linguagens no menu suspenso Código, incluindo PHP, JavaScript, CSS, HTML, Python, SQL e YAML. A escolha define como as cores da sintaxe são aplicadas, para que o trecho leia como seria em um editor de código.
Os leitores podem copiar o código com um clique?
Sim. Ativar botão de cópia ativar e um botão de cópia para a área de transferência aparece no bloco Você define sua posição, quando ele mostra, e o texto antes e depois de uma cópia, como Copiar código e Copiado, que confirma o clique trabalhado.
Posso mostrar números de linha no bloco de código?
Sim. O botão Habilitar número de linha na guia Conteúdo adiciona números no lado esquerdo do bloco. Eles facilitam a referência a uma linha específica em um tutorial e você pode desligá-los para obter uma aparência mais limpa.
Posso alterar o tema de cores do código?
Sim. O menu suspenso Tema oferece Padrão, Escuro, Funky, Okaidia, Crepúsculo, Coy, Luz solarizada, Amanhã e Personalizado Escolha um para combinar com uma página clara ou escura, ou use Personalizado para definir suas próprias cores de fundo e texto na guia Estilo personalizado mostra código em uma cor, sem destaque de palavra-chave.
Embrulhando #
O widget Código Fonte transforma um trecho bruto em um bloco limpo e destacado que os leitores podem copiar em um clique Cole seu código, defina o idioma e o tema, ligue os números de linha e o botão copiar e, em seguida, estilize o contêiner para corresponder à sua página Para uma comparação com o widget Destaque de Código do Elementor Pro, consulte o Widget de bloco de código do elementor página. Para outra forma de apresentar conteúdo estruturado, consulte o Widget de tabela dinâmica, navegue por completo Widgets e extensões Master Addons, e verifique o página preços para o que cada plano inclui.
