Custom Codeblock WordPress Plugin

This guide provides step-by-step instructions for installing, configuring, and using the Custom Codeblock WordPress plugin, which features a stylish code display with copy and expand/collapse options, per-line copy buttons on hover, horizontal scrolling for long lines, and a fixed medium text size.

Table of Contents

• Installation
• Usage
• Features
• Shortcode Attributes
• Styling and Behavior
• Troubleshooting

Installation

1. Download the Plugin Files:
   • Create a folder named codeblock-plugin in the wp-content/plugins/ directory of your WordPress installation.
   • Place the following files in the codeblock-plugin folder:
     • codeblock-plugin.php
     • codeblock.css
     • codeblock.js
2. Activate the Plugin:
   • Log in to your WordPress admin panel.
   • Navigate to Plugins > Installed Plugins.
   • Find Custom Codeblock with Copy and Expand/Collapse in the list and click Activate.
3. Verify Installation:
   • Ensure no errors appear, and the plugin is listed as active.

Usage

1. Add a Codeblock:
   • Open the page or post editor in WordPress.
   • Switch to the Text editor (not the Visual editor) to avoid formatting issues.
   • Use the

</code> shortcode to insert a codeblock. Example:</p>
<pre><code>[codeblock language="PHP"]<br />
<?php<br />
echo "Hello World";<br />
echo "Another line";<br />
?><br />

Preview and Publish:

• Preview the page/post to see the codeblock in action.
• Publish or update the page/post to make it live.

Features

• Code Display: Shows code in a dark-themed container with a language label (e.g., “PHP”, “Bash”).
• Copy All Button: Located in the header, copies the entire codeblock content to the clipboard with a “Copied!” feedback for 2 seconds.
• Expand/Collapse: Toggles the codeblock visibility; collapses after copying and expands on demand.
• Per-Line Copy: Hover over any line to reveal a “Copy” button that copies only that line, with “Copied!” feedback for 2 seconds.
• Horizontal Scroll: Long lines remain unbroken, with a horizontal scrollbar appearing when content exceeds the container width.
• Fixed Text Size: Content text is set to a medium size (16px) and cannot be overridden.

Shortcode Attributes

• language: Specifies the programming language or format (e.g., “PHP”, “Bash”, “JavaScript”). Default is “Bash”.
  • Example:
    Python

    Copy AllCollapse

    code here

Styling and Behavior

• Appearance: The codeblock has a dark background (#1e1e1e), a header with a slightly lighter shade (#2d2d2d), and white text (#d4d4d4).
• Text Size: Fixed at 16px (medium) using !important to prevent overrides.
• Hover Effects: Buttons change to a darker shade (#555) on hover.
• Scrollbars: Custom-styled horizontal scrollbars appear when needed, with a height of 8px and a thumb color of #555.

Troubleshooting

• Code Not Displaying Correctly:
  • Ensure you are using the Text editor in WordPress to avoid auto-formatting.
  • Check that all plugin files are correctly placed and the plugin is activated.
• Copy Function Not Working:
  • Verify that your browser supports the Clipboard API (modern browsers like Chrome, Firefox, and Edge do).
  • Check the browser console (F12) for errors and ensure no ad blockers or security settings are interfering.
• Horizontal Scroll Not Appearing:
  • Ensure the .line-content class has white-space: nowrap and the container has sufficient width. Adjust the .codeblock-content padding if needed.
• Plugin Not Loading:
  • Confirm file permissions are correct (e.g., 644 for files) and the plugin folder is in wp-content/plugins/.
  • Deactivate and reactivate the plugin to reset.

For further assistance, contact your WordPress administrator or refer to the plugin source files for debugging.

Try me