Opis
Advance Custom HTML | Pricing | Support | Demo
Advance Custom HTML lets users display HTML, CSS, JavaScript, PHP, Python, or other code snippets within WordPress posts, pages, or widgets. With built-in live preview support, syntax highlighting, and code editor features, it’s designed for sharing code in a clean, readable, and responsive format.
This plugin includes a front-end code editor with a draggable preview panel, multiple syntax themes, and customizable settings for formatting and appearance. Ideal for tutorials, technical articles, and documentation, it provides a flexible way to embed and present code with real-time results.
Free Features – Everything You Need to Start
-
Edit code and preview output together on the editor/backend.
-
Live Output Preview: See the results of your code instantly
-
Autocomplete suggestions while writing code
-
Draggable Preview Panel to move output anywhere on screen
-
Set editor Font Size
-
Fully responsive, mobile-friendly interface
-
Lightweight and fast for better performance
Pro Features – Unlock Advanced Controls
The Pro version offers extended customization and control over code presentation and layout.
What’s Included in Pro:
-
Choose from 40+ editor themes (dark, light, minimal, etc.)
-
Adjust Tab size, line wrapping, editor height/width
-
Change syntax mode per snippet: HTML, CSS, JS, PHP, Python, and more
-
Toggle features: Copy button, Fold gutter, Highlight active line, etc.
-
Customize the Copy to Clipboard button text, icon, style, and position
-
Hide Headings or Labels for a clean, minimalist look
-
Hide or Show Line numbers to simplify code presentation
-
Enable or Disable Wrap to control line flow in your editor
-
Edit Code Editor/Snippet Height and Width, and align left, center, or right
-
Fold Gutter support for collapsing code blocks
-
Highlight Active Line Toggle for easier focus during tutorials
How to Use – Step-by-Step Guide
Quick setup in just a few steps:
-
Install the Advance Custom HTML
-
Open the editor for any post or page
-
Click Add Block and select Advance Custom HTML under Widgets
-
Write or paste your code
-
Customize the settings (theme, preview, copy button)
-
Publish or update the content
Use Cases:
-
Write and preview front-end HTML/CSS tutorials
-
Embed JavaScript snippets with instant results
-
Display PHP code in educational content
-
Show Python syntax in data science blogs
-
Publish developer documentation or API guides
-
Create interactive code articles with live editing
Perfect For:
-
Bloggers and Tech Writers
-
Coaches, Instructors, and Course Creators
-
Web Developers and Designers
-
Software Product Sites
-
Niche Tutorials & SaaS Startups
-
Business Sites with Technical Content
-
Anyone publishing HTML, JS, CSS, PHP, or Python code
Check out our other WordPress Plugins-
Html5 Video Player – Display videos as single and playlist in multiple skins.
PDF Poster – Display/Embed PDF files with different styles.
Html5 Audio Player – Listen audios with awesome visuals.
StreamCast – Customizable radio player with different skins.
3D Viewer – Embed 3D models and 3D products with interaction.
Advanced Post Block – Show posts and custom posts in different layouts.
Slike ekrana
Blokovi
Ovaj dodatak omogućava 1 blok.
- Advance Custom HTML Write code like editor.
Instalacija
From Gutenberg Editor:
- Go to the WordPress Block/Gutenberg Editor
- Search For Advance Custom HTML
- Click on the Advance Custom HTML block to add the block
Download & Upload:
- Download the Advance Custom HTML plugin (.zip file)
- In your admin area, go to the Plugins menu and click on Add New
- Click on Upload Plugin and choose the
custom-html.zip
file and click on Install Now - Activate the plugin and Enjoy!
Manually:
- Download and upload the Advance Custom HTML plugin to the
/wp-content/plugins/
directory - Activate the plugin through the Plugins menu in WordPress
ČPP
-
What types of code can I embed with Advance Custom HTML?
-
You can embed HTML, CSS, JavaScript, PHP, Python, and other programming languages. The plugin supports syntax highlighting and live preview for many common formats.
-
How do I display a code snippet in a post or page?
-
You can use either the Gutenberg block or the shortcode provided when you create a new snippet. Just paste it into any post, page, or widget area.
-
Can I show the live output of my code?
-
Yes. The plugin includes a draggable preview panel that shows live output for front-end code like HTML, CSS, and JavaScript.
-
Does this plugin support syntax highlighting?
-
Yes, syntax highlighting is built-in and supports multiple languages. You can also choose from over 40 editor themes to match your site.
-
Yes. You can toggle settings like line numbers, copy button, wrap lines, fold gutter, and more.
-
Can I display multiple code snippets on one page?
-
Yes. You can insert as many snippets as needed using shortcodes or blocks. Each snippet has its own settings and display options.
-
Is the plugin responsive and mobile-friendly?
-
Yes. All embedded code blocks and preview panels are designed to work across devices of all sizes.
-
How do I change the appearance of the code editor?
-
You can choose from a wide range of themes and customize font size, spacing, layout, and more from the editor settings.
-
Does it work with any WordPress theme?
-
Yes, it will work with any standard WordPress theme.
-
Can I change block settings?
-
Yes, you can change block settings from the Gutenberg block editor's right sidebar.
-
Where can I get support?
-
You can post your questions on the support forum here
Recenzije
Saradnici i programeri
“Advance Custom HTML” is open source software. The following people have contributed to this plugin.
Doprinositelji“Advance Custom HTML” je prijeveden na 1 dijalekt. Zahvala prevodiocima za njihov doprinos.
Prevedi “Advance Custom HTML” na vaš jezik.
Zainteresirani za razvoj?
Pregledajte kôd, pogledajte SVN spremišteili se pretplatite na dnevnik razvoja od RSS.
Zapis promijena
1.0.6
- Added a New Feature+
1.0.5
- Update Admin Dashboard
1.0.4
- Update SDK version
1.0.3
- Fixed Issue
- Upload version 1.0.3
1.0.2
- Fixed issue
1.0.1
- Embed the code to frontend
- Edit Tab Size
- Add Theme Option where have 45 themes collection
- Change Different Language For Different Syntax
- Display Heading
- Hide/Show Copy Button
- Change Position of Copy Button When Heading is Disable
- Change Copy Button Type Like You Can Keep Icon or Text(You can change text with your needed)
- Styles Copy Button
- Hide/Show Highlight Active Line
- Hide/Show Fold Gutter
- Autocompletion Enable/Disable
- Wrap Enable/Disable
- Edit Code Editor Height and Width
1.0.0
- Initial Release