Raunak Gupta

Vaaky Highlighter is a lightweight syntax highlighter plugin for the WordPress Gutenberg editor. Add beautiful code blocks with line numbers, a copy-to-clipboard button, optional filename label, automatic language detection, and 35+ themes. Powered by Highlight.js — a fast, dependency-free alternative to Prism.
Syntax highlighting is powered by Highlight.js, a fast and dependency-free JavaScript library that supports multiple programming languages and themes.
Vaaky Highlighter is ideal for developers, bloggers, technical writers, and documentation sites who want elegant syntax-highlighted code without unnecessary bloat.
Using it is simple: add the Vaaky Highlighter Sourcecode block in Gutenberg, paste your code, and publish — the plugin handles everything automatically.
View the live demo of all supported themes: 
<a href="https://www.webhat.in/?page_id=626&utm_source=wordpress.org&utm_medium=readme.txt&utm_campaign=link&utm_id=vaaky_highlighter&utm_term=Theme+Demo" rel="nofollow ugc">Demo Page</a>
<h3>What’s new in 1.2.0</h3>
<ul>
<li>Line numbers for code blocks</li>
<li>Floating copy-to-clipboard button on every block</li>
<li>Optional filename label (renders as a tab above the code)</li>
<li>Word-wrap toggle per block + global default</li>
<li>Visual theme picker (no more guessing from a dropdown)</li>
<li>Modernized build using @wordpress/scripts</li>
<li>Drops PHP 5.6 / WordPress 6.0 support — now requires PHP 7.4 / WordPress 6.5</li>
</ul>
<h3>Usage</h3>
<ol>
<li>Add the Vaaky Highlighter block in the Gutenberg editor</li>
<li>Paste or write your code</li>
<li>Select a language (optional)</li>
<li>Save and view your page on the frontend</li>
</ol>
<h3>Supported Languages</h3>
<ul>
<li>Apache</li>
<li>Bash</li>
<li>C</li>
<li>C#</li>
<li>C++</li>
<li>CSS</li>
<li>DNS Zone file</li>
<li>DOS</li>
<li>Django</li>
<li>Dockerfile</li>
<li>Go</li>
<li>HTML / XML</li>
<li>Handlebars</li>
<li>JSON</li>
<li>Java</li>
<li>JavaScript</li>
<li>Markdown</li>
<li>Nginx</li>
<li>Objective-C</li>
<li>PHP</li>
<li>Plaintext</li>
<li>PostgreSQL & PL/pgSQL</li>
<li>PowerShell</li>
<li>Python</li>
<li>R</li>
<li>Ruby</li>
<li>Rust</li>
<li>SCSS</li>
<li>SQL / MySQL</li>
<li>Shell</li>
<li>Twig</li>
<li>TypeScript</li>
<li>YAML / YML</li>
</ul>

Vaaky Highlighter — Syntax Highlighter, Code Blocks, Line Numbers for Gutenberg

Lightweight syntax highlighter with code blocks, line numbers, copy-to-clipboard, and 35+ themes. A fast, free alternative to Prism for WordPress.

Kasuga

Sticky Copy Button for Code Blocks automatically adds a floating copy button to each <code><pre><code></code> block on your website. 
It provides convenient front-end copying for developers, readers, and tutorial users.
<h3>Features</h3>
This plugin is light, fast, and highly customizable:
<ul>
<li>Adjustable button position (up/down and left/right)</li>
<li>Customizable labels (“Copy” / “Copied”)</li>
<li>Adjustable font size</li>
<li>Background color, text color, or transparent mode</li>
<li>Max-height option for large code blocks (with scroll support)</li>
<li>Optional line numbers (simple native implementation)</li>
<li>Custom CSS that is safely sanitized</li>
</ul>
No dependencies such as Prism or Highlight.js are required.
<h3>Detailed Settings Guide</h3>
The following explains every option in the plugin settings page.
<h3>1. Button Position</h3>
Adjust vertical position (top offset in px) 
Moves the button up or down relative to the top of the code block. 
Use positive or negative values to fine-tune vertical alignment.
Adjust horizontal position (right offset in px) 
Moves the button left or right by adjusting how far it sits from the right edge of the code block. 
Use positive or negative values to fine-tune horizontal alignment.
These values help fine-tune button alignment to avoid overlapping with theme elements.
<h3>2. Button Text and Behavior</h3>
Copy button label 
The label shown normally (default: “Copy”).
Label after copying (2 seconds) 
Once the text is copied, the button temporarily displays this label. 
Default: “Copied”.
<h3>3. Button Size</h3>
Button size (8–36 px) 
Controls the font size of the button. 
Padding is automatically adjusted based on this value.
<h3>4. Button Colors</h3>
Button text color 
Hex color of button text.
Button background color 
Hex background color. 
When copying, the plugin automatically swaps the text and background colors for visual feedback. 
However, if the background is transparent, only the text color is swapped.
Always transparent background 
If enabled: 
– The button background always becomes transparent. 
– Only text + border remain visible
<h3>5. Code Block Max Height</h3>
Enable 
Must be checked for the value to apply.
Code block max height (px) 
Sets a maximum height (minimum: 100px). 
Content taller than this becomes scrollable.
This prevents long code blocks from stretching your page layout.
<h3>6. Display Line Numbers</h3>
Display Line Numbers (Enable) 
Shows simple line numbers next to each line. You can also fine-tune the position of the line numbers (offset adjustment is available). 
Notes: 
– Line height is unified for consistency. 
– Theme-specific code styling is preserved. 
– Line wrapping is forcibly disabled.
This is a built-in lightweight alternative to syntax-highlighter libraries.
<h3>7. Custom Styles (CSS)</h3>
You can add any custom CSS to adjust:
<ul>
<li>Button design</li>
<li>Wrapper layout</li>
<li>Code spacing</li>
<li>Line number appearance</li>
</ul>
Optionally, you can enable “Add !important to CSS declarations automatically” to force your custom styles to take effect even when the theme’s CSS has higher specificity.
Usable Selectors (CSS) :
<ul>
<li>.copy-code-btn → The copy button</li>
<li>.copy-code-btn.copied → The button after Copying</li>
<li>.code-block-wrapper → Wrapper of the code block (position: relative)</li>
<li>.code-block-wrapper pre → Inner code text area (the <code><pre></code> element)</li>
<li>
.line-numbers → The container holding the line numbers
</li>
<li>
Example: 
 <code>.copy-code-btn {</code> 
     <code>font-family: "Comic Sans MS", cursive;</code> 
     <code>font-weight: 700;</code> 
     <code>border: none;</code> 
 <code>}</code>
</li>
</ul>
<h3>Donate</h3>
If you find this plugin useful and would like to support its development, 
you can make a voluntary donation via PayPal.
Your support helps keep this plugin maintained and improved. 
Thank you!
PayPal: https://www.paypal.me/Kasuga16

Sticky Copy Button for Code Blocks


This is an excellent companion to the native code block in WordPress. It adds a code button inside the code block, which I prefer so it doesn't take up too much room. I had to add some CSS overrides in my theme to maintain the appearance of my code block style, and to move the button to the far right of the block where I wanted it. I'm giving it 4 stars because of that, but I otherwise would have given it 5 stars for ease of use.



/* Removes 50px padding added by the plugin's CSS */.code-block-wrapper { padding-right: 0 !important; }/* Forces the button to move to the right after removing the 50px padding */.copy-code-btn { right:4px !important; }


Simple and works well

Adds a floating "Copy" button to every code block, with extensive styling options, optional line numbers, max-height control, and custom CSS support.

Vaaky Highlighter — Syntax Highlighter, Code Blocks, Line Numbers for Gutenberg vs Sticky Copy Button for Code Blocks