Review do plugin: Code Block Pro – Beautiful Syntax Highlighting

Se você tem um site em WordPress e está procurando uma forma de embedar códigos de diversas linguagens de programação e formatação em suas postagens, vou dar uma dica excelente de plugin leve, versátil e bem classudo: o Code Block Pro Beautiful Syntax Highlighting.

O Code Block Pro é um plugin para WordPress que facilita a inserção de trechos de código em suas postagens e páginas, oferecendo uma formatação elegante e destacando a sintaxe para diversas linguagens de programação. Este plug-in é especialmente útil para desenvolvedores e blogueiros técnicos que desejam exibir códigos de maneira clara e visualmente atraente para seus visitantes.

Nossa opinião dos diferenciais do Code Block Pro:

Realce de sintaxe

O principal objetivo do Code Block Pro é oferecer realce de sintaxe para uma ampla gama de linguagens de programação. Isso torna os códigos mais legíveis e compreensíveis para os leitores.

Alguns blocos de exemplo

CSS

/* Estilo para parágrafo */
.paragrafo__exemplo_css{
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  font-style: normal;
  color: #333333;
  background-color: tomato;
  letter-spacing: 1px;
  line-height: 1.5;
  text-align: left;
  margin-bottom: 20px;
}

HTML deprecated inclusive

<!-- Código obsoleto -->
<font color="#333">Texto exemplo</font>
<center>Conteúdo centralizado</center>

<!-- Código atualizado -->
<span class="text-style">Texto exemplo</span>
<div class="center">Conteúdo centralizado</div>

<style>
	.text-style {
	  font-size: 14px;
	  color: #333;
	}
	
	.center {
	  text-align: center;
	}
</style>

Fácil gestão e edição

Permite a inserção simples de blocos de código em postagens e páginas através de um editor visual. Não é necessário conhecimento avançado para usá-lo.

Personalização de estilo

Oferece várias opções de temas para que você possa personalizar a aparência dos blocos de código de acordo com o design do seu site.

Suporte multilíngue

• Suporta diversas linguagens de programação, desde as mais populares, como JavaScript, Python e PHP, até linguagens mais específicas.

Responsividade

• Os blocos de código são responsivos e se adaptam bem a diferentes tamanhos de tela, garantindo uma ótima experiência de leitura em dispositivos móveis.

Integração com gutenberg

• Compatível com o editor de blocos Gutenberg do WordPress, permitindo uma integração suave e intuitiva, basta adicionar um bloco e digitar Cod.. que ele aparece.

Principais benefícios do Code Block Pro:

Além de bonito demais, funcional, leve, o plugin tem forte reputação, é feito por um excelente desenvolvedor, é simples, seguro, e pode ser seu escolhido para embedar trechos de códigos em suas páginas.

Funções que para mim são as TOP

• Detecta automaticamente a linguagem de programação do código inserido e aplica o realce de sintaxe adequado.
• Sabe o que você mais usa e já facilita a nteração com as variáveis.
• Suporta uma ampla gama de linguagens de programação, incluindo, mas não se limitando a, JavaScript, Python, PHP, HTML, CSS, SQL, e muito mais.
• Possui funcionalidades adicionais como numeração de linhas, cópia de código com um clique e coloração de sintaxe personalizada para melhorar ainda mais a experiência do usuário.
• Com uma interface amigável e intuitiva, o Code Block Pro é fácil de usar, mesmo para aqueles que não são desenvolvedores experientes.
• Os blocos de código são visualmente atraentes, tornando o conteúdo técnico mais acessível e agradável para os leitores.
• Compatível com qualquer tema de WordPress, garantindo uma integração suave e sem complicações.

Meus insights finais

O Code Block Pro é uma ferramenta ótima para compartilhar códigos e tutoriais técnicos. Ele não apenas melhora a legibilidade dos códigos, mas também adiciona um toque profissional e estilizado às suas postagens. Com sua facilidade de uso, opções de personalização e suporte a múltiplas linguagens, o Code Block Pro é um dos melhores plugins de destaque de sintaxe disponíveis para WordPress.

Se você busca uma solução eficiente e visualmente atraente para inserir e destacar códigos em seu site WordPress, o Code Block Pro é definitivamente uma escolha recomendada.

Nota editorial: Não ganhamos comissão de links e ferramentas selecionadas em nosso site. Não há qualquer tipo de interferência nas nossas opiniões trazidas aos leitores.

Informações extras do desenvolvedor do plugin Code Block Pro

Features

• Includes 25+ built-in themes to choose from.
• Supports over 140 programming languages
• 10+ Modern programming web fonts – locally hosted
• Line numbers
• Line highlighting (static and on hover)
• Blur highlighting (with reveal on hover)
• Header styles
• Footer styles
• Copy button
• Native Gutenberg block
• Tab or space indentation
• Core functionality works in headless mode (see FAQ)
• Converting from the default code block (and others)
• Max height with scrollable section (optional expand button)

Dicas

• Try combining line highlighting with the blur effect to add some extra depth, and focus on the important parts of the code without losing context
• All settings are per block, but some settings are remembered when you add the next block
• Add a link in the code footer (some footers support this, not all) that points to a demo
• To achieve a flush look, remove padding under Extra Settings and select a theme with a background color matching your site theme

Temas Visual Studio Code inclusos

• Dark Plus (demo)
• Dracula Soft (demo)
• Dracula (demo)
• GitHub Dark Dimmed (demo)
• Github Dark (demo)
• Github Light (demo)
• Light Plus (demo)
• Material Darker (demo)
• Material Default (demo)
• Material Lighter (demo)
• Material Ocean (demo)
• Material Palenight (demo)
• Min Dark (demo)
• Min Light (demo)
• Monokai (demo)
• Nord (demo)
• One Dark Pro (demo)
• Poimandres (demo)
• Rose Pine Dawn (demo)
• Rose Pine Moon (demo)
• Rose Pine (demo)
• Slack Dark (demo)
• Slack Ochin (demo)
• Solarized Dark (demo)
• Solarized Light (demo)
• Vitesse Dark (demo)
• Vitesse Light (demo)

Temas extras premium e pagos

• Custom Dynamic Theme (advanced) read more
• Andromeda (demo)
• Ayu Dark (demo)
• Ayu Mirage (demo)
• Ayu Light (demo)
• Cobalt2 (demo)
• Night Owl (demo)
• Night Owl Light (demo)
• Noctis (demo)
• Noctis Azureus (demo)
• Noctis Bordo (demo)
• Noctis Hibernus (demo)
• Noctis Lilac (demo)
• Noctis Lux (demo)
• Noctis Minimus (demo)
• Noctis Obscuro (demo)
• Noctis Sereno (demo)
• Noctis Uva (demo)
• Noctis Viola (demo)
• Palenight (demo)
• Pico 8 (demo)
• Shades of Purple (demo)
• Shades of Purple Super Dark (demo)
• Synthwave ’84 (demo)
• Tokyo Night (demo)
• Tokyo Night Storm (demo)
• Tokyo Night Light (demo)
• Winter is Coming (demo)
• Winter is Coming Light (demo)
• Winter is Coming Dark (demo)

Linguagens suportadas

• ABAP (demo)
• ActionScript 3 (demo)
• Ada (demo)
• ANSI (control codes rendered)
• Apache (demo)
• Apex (demo)
• APL (demo)
• Ara (demo)
• ASM (demo)
• Astro (demo)
• Awk (demo)
• Ballerina (demo)
• BAT (Batchfile) (demo)
• Berry (demo)
• BibTeX (demo)
• BICEP (demo)
• Blade (demo)
• C (demo)
• Cadence (demo)
• Clarity (demo)
• Clojure (demo)
• CMake (demo)
• COBOL (demo)
• CodeQL (demo)
• CoffeeScript (demo)
• C++ (demo)
• Crystal (demo)
• C# (demo)
• CSS (demo)
• CUE (demo)
• Cypher (cql) (demo)
• D (demo)
• Dart (demo)
• DAX (demo)
• Diff (demo)
• Dockerfile (demo)
• DreamMaker (demo)
• Elixir (demo)
• Elm (demo)
• ERB (demo)
• Erlang (demo)
• Fish (demo)
• F# (demo)
• GDResource (Godot) (demo)
• GDScript (Godot) (demo)
• GDShader (Godot) (demo)
• Gherkin (demo)
• GLSL (demo)
• Glimmer js/ts (demo)
• Gnuplot (demo)
• Go (demo)
• GraphQL (demo)
• Groovy (demo)
• Hack (demo)
• HAML (demo)
• Handlebars (demo)
• Haskell (demo)
• HCL (demo)
• HLSL (demo)
• HTML (demo)
• HTTP (demo)
• INI (demo)
• Imba (demo)
• Java (demo)
• JavaScript (demo)
• Jinja HTML (demo)
• Jison (demo)
• JSON (demo)
• JSON5 (demo)
• JSONC (demo)
• JSONL (demo)
• JSONnet (demo)
• JSSM (demo)
• JSX (demo)
• Julia (demo)
• Kotlin (demo)
• Kusto (demo)
• LaTeX (demo)
• LESS (demo)
• Ledger (Beancount) (demo)
• Liquid (demo)
• Lisp (demo)
• Logo (demo)
• Lua (demo)
• Makefile (demo)
• Markdown (demo)
• Marko (demo)
• MATLAB (demo)
• MDC (demo)
• MDX (demo)
• Mermaid (demo)
• Mojo (demo)
• Narrat (nar) (demo)
• Nextflow (nf) (demo)
• Nginx (demo)
• Nim (demo)
• Nix (demo)
• Objective-C (demo)
• Objective-C++ (demo)
• OCaml (demo)
• Pascal (demo)
• Perl (demo)
• PHP (demo)
• PLSQL (demo)
• PostCSS (demo)
• Power Query (demo)
• PowerShell (demo)
• Prisma (demo)
• Prolog (demo)
• Protocol Buffers (demo)
• Pug (demo)
• Puppet (demo)
• PureScript (demo)
• Python (demo)
• R (demo)
• Raku (demo)
• Razor (demo)
• Windows Registry (demo)
• Rel (demo)
• RISC-V (demo)
• RST (demo)
• Ruby (demo)
• Rust (demo)
• SAS (demo)
• Sass (demo)
• Scala (demo)
• Scheme (demo)
• SCSS (demo)
• Splunk SPL (demo)
• Bash (demo)
• ShellScript (demo)
• Zsh (demo)
• ShellSession (demo)
• Smalltalk (demo)
• Solidity (demo)
• SPARQL (demo)
• SQL (demo)
• SSH Config (demo)
• Stata (demo)
• Stylus (demo)
• Svelte (demo)
• Swift (demo)
• SystemVerilog (demo)
• TASL (demo)
• TCL (demo)
• TeX (demo)
• TOML (demo)
• TSX (demo)
• Turtle (demo)
• Twig (demo)
• TypeScript (demo)
• V (demo)
• VB (demo)
• Verilog (demo)
• VHDL (demo)
• VimL (demo)
• Vue HTML (demo)
• Vue (demo)
• Vyper (vy) (demo)
• WASM (demo)
• Wenyan (demo)
• WGSL (demo)
• Wolfram (demo)
• XML (demo)
• XSL (demo)
• YAML (demo)
• ZenScript (demo)
• Zig (demo)