Se você oferece qualquer software ou dica de programação, com certeza desejará compartilhar trechos de código. Essa forma de compartilhar trechos de código pode ajudá-los a configurar uma prática rapidamente. No entanto, o compartilhamento de código com toda a formatação necessária não é possível por padrão. O que quero dizer com formatação é o realce de sintaxe. Ainda assim, é algo muito fácil de fazer.
Felizmente, se você usa divi, deve saber que existe uma maneira integrada de fazer isso manualmente, para adicionar estilos personalizados a esses trechos de código. Além disso, existem plug-ins e Ressources aplicativos de terceiros que podem realmente simplificar o processo de criação de trechos esteticamente agradáveis e funcionais no Divi.
Neste tutorial, vou mostrar como compartilhar trechos de código no Divi (manualmente). E também mostrarei como projetar blocos de snippet com Divi Builder, que o levará ao próximo nível.
Visão geral
Aqui está uma visão geral dos designs de snippet possíveis neste tutorial.
As caixas de trechos de código com trechos de código adicionadas ao modo manual.
Pré-requisitos para o tutorial
Para este tutorial, tudo que você precisa é o Tema Divi, instalado e ativo. Construiremos os trechos de código de amostra do zero usando o Divi Builder em uma nova página.
Para começar, crie uma nova página e implante o Divi Builder na interface pública. Em seguida, escolha a opção "Construir do zero".
Agora você está pronto para ir!
Projeto de uma caixa personalizada para trechos de código no Divi
Como nosso trecho de código reside em um módulo de texto, podemos usar o construtor divi para adicionar elementos de design ao módulo de texto (e ao redor dele). Para este projeto, usaremos um módulo de resumo para servir como um rótulo para o snippet. A seguir, estilizaremos e posicionaremos o cursor à esquerda do módulo de texto. A seguir, definiremos o estilo do módulo de texto do nosso snippet.
Criando a seção, linha e coluna
Primeiro, devemos criar uma nova seção com uma linha de uma coluna.
Atualize os parâmetros de linha da seguinte maneira:
Largura da calha: 1
Preenchimento personalizado: 0px na parte superior, 0px na parte inferior
Adicione o módulo de texto
Em seguida, adicione um módulo de texto à linha.
Você pode deixar o conteúdo por padrão. Adicionaremos nossos trechos de código do WordPress mais tarde. Por enquanto, vamos modelar o módulo de texto atualizando os seguintes parâmetros de texto:
Cor de fundo: # eff0f1 Cor do texto: # 000000 Margem personalizada: 60 px à esquerda Preenchimento personalizado: 3% superior, 3% inferior, 3% esquerdo, 3% direito
Largura da borda superior: 10 px Cor da borda superior: # 7cda24
Criação do rótulo do snippet
Para criar o rótulo do snippet, usaremos um módulo blurb. Isso permitirá que você adicione um ícone de texto resumido (ou ícone de imagem personalizada) ao lado do idioma de código exibido.
Crie um módulo de apresentação e arraste-o acima do módulo de texto. Em seguida, atualize as seguintes configurações de apresentação:
Título: css Conteúdo: [remover conteúdo fictício] Use o ícone: SIM Ícone: veja a captura de tela
Atualize os parâmetros de design da seguinte maneira:
Cor de fundo: # 1b2426 Cor do ícone: # 7cda24 Localização da imagem / ícone: esquerda Tamanho da fonte: 20px Cor do título do texto: #ffffff Tamanho do texto Título: 16px
Altura da linha de título: 1.3em Largura: 100px Margem personalizada: -44px inferior, -50px esquerdo Preenchimento personalizado: 10px superior, 2px inferior, 15px esquerdo, 15px direito
Seção duplicada para criar mais designs de caixa de snippet
Isso suporta nosso primeiro design de caixa de código. Agora só temos que duplicar a seção que contém o design do bloco de código e atualizar o rótulo e as cores para criar um novo bloco de código para uma linguagem de codificação diferente. Obviamente, isso é opcional, mas se você planeja adicionar trechos diferentes a uma página, é útil ter um esquema de cores diferente para cada um.
Por exemplo, duplique a seção e abra as configurações do módulo Blurb.
Atualize o título para "js" para Javascript.
Em seguida, clique com o botão direito em Image / Icon Color e selecione Find and Replace.
Opções de pesquisa e substituição atualizadas:
Em: esta seção Substituir por: [nova cor] Substituir tudo: marque substituir todos os valores encontrados
Agora você tem um novo bloco de snippets para snippets JS.
Aqui está um exemplo de caixas de snippet para tipos de código populares para WordPress.
Usando o plug-in Prettify Code para adicionar realce de sintaxe aos snippets de código manuais
Bem, é verdade que, com o método manual, você pode colar imediatamente o texto e passar. o Plugin Prettify Code irá adicionar instantaneamente o código realçado a todas as tags "pré". A beleza deste plugin é que não há absolutamente nenhuma customização necessária. Tudo o que você precisa fazer é baixar e ativar o plugin.
Aqui está um exemplo de como será o código com o Active Prettify Code.
Código Prettify vem Google e também é usado para estilizar todos aqueles trechos maravilhosos em stackoverflow.com.
Para terminar
Visualizar trechos de código no Divi não precisa ser difícil. Adicionar os trechos manualmente usando as tags de código pré e Word fornecidas pelo WordPress fará o trabalho para a maioria dos trechos não-html, mas você precisa primeiro executar o trecho por meio de um codificador. html para ter certeza. Além disso, você pode personalizar ainda mais o estilo do trecho de texto usando as configurações do módulo de texto. E não se esqueça do Code Prettify para adicionar destaque aos trechos do manual.
Para aqueles que compartilham trechos regularmente, usar o plugin SyntaxHighlighter é provavelmente sua melhor aposta. De qualquer forma, você sempre terá a opção de adicionar designs mais criativos aos seus snippets usando o Divi Builder.
Bonne acaso.
