What is the Source Code widget in Master Addons?

It is an Elementor widget that displays code with syntax highlighting, line numbers, a language theme, and a copy-to-clipboard button. You paste a snippet, choose the language and theme, and set the copy button, all from the Elementor panel, with no plugins or shortcodes needed.

Which programming languages does it highlight?

You pick the language in the Code dropdown, including common ones like PHP, JavaScript, CSS, and HTML. The choice sets how the syntax colors are applied, so the snippet reads the way it would in a code editor.

Can readers copy the code with one click?

Yes. Turn on Enable Copy Button and a copy-to-clipboard button appears on the block. You set its position, when it shows, and the text before and after a copy, such as Copy code and Copied, which confirms the click worked.

Can I show line numbers in the code block?

Yes. The Enable Line Number toggle in the Content tab adds numbers down the left side of the block. They make it easy to reference a specific line in a tutorial, and you can turn them off for a cleaner look.

Can I change the color theme of the code?

Yes. The Theme dropdown offers Default, Dark, Funky, Okaidia, Twilight, Coy, Solarized light, Tomorrow, and Custom. Pick one to match a light or dark page, or use Custom to set your own colors in the Style tab.

Widget de código-fonte do elementor: destaque de sintaxe

Cole o código em um widget de texto normal e ele retira a formatação, deixando um bloco ilegível. O Código Fonte widget em Complementos Mestres para Elementor corrige isso: 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.
Complementos Mestres para Elementor instalado e ativo. 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.

Guia Conteúdo do código-fonte com o campo suspenso Linguagem do código, menu suspenso Tema e código-fonte

Código: a linguagem a destacar, 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.

Abandono do tema do código-fonte aberto, listando padrão, escuro, descolado, Okaidia, crepúsculo, coy, luz solarizada, amanhã e personalizado

Mudar a linguagem e o tema juntos dá a cada trecho a aparência certa Aqui está um trecho JavaScript no tema Dark.

Widget de código-fonte mostrando um trecho JavaScript com o tema Dark aplicado

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.

Botão de cópia do Código Fonte mostrando o estado de confirmação Copiado após um clique

Estilize o bloco de código #

O Estilo a guia é dividida em Recipiente e Botão, mais Padrões (uma opção Pro). O Recipiente seção controla o quadro do bloco de código.

Código-fonte Guia de estilo Seção do contêiner com altura, preenchimento, margem, tipo de borda e raio da borda

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.

O Botão a seção estiliza o botão de cópia: suas cores, tipografia, preenchimento e borda, nos estados normal e flutuante.

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.

Bloco de código-fonte de complementos mestres finalizados na página ao vivo, um trecho CSS em um tema escuro com um botão 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 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 no painel Elementor, sem plugins ou códigos de acesso necessários.

Quais linguagens de programação ele destaca?

Você escolhe a linguagem no menu suspenso Código, incluindo os comuns como PHP, JavaScript, CSS e HTML 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 na guia Estilo.

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 outra maneira 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.

Construtor Tema

Construtor Popup

Construtor de widgets

Mega Construtor de Menu

Css personalizado

Tags Dinâmicas

Condições de exibição

Biblioteca Ícones

Animação

Kits de modelos

Seções Prontas

Popups prontos

Páginas Prontas

Cabeçalho Pronto

Rodapé Pronto

WP Administrar

Editor de barras administrativas

Loginfy

Suíte Rolemaster

Blocos Mestres

Destaque WP