Title: Advance Custom HTML – Show Live Code, Share Snippets, Embed Code, and Style Them Your Way.
Author: bPlugins
Published: 11 de noviembre de 2022
Last modified: 29 de marzo de 2026
---
Buscar plugins
# Advance Custom HTML – Show Live Code, Share Snippets, Embed Code, and Style Them Your Way.
Por [bPlugins](https://profiles.wordpress.org/bplugins/)
[Descargar](https://downloads.wordpress.org/plugin/advance-custom-html.2.0.4.zip)
* [Detalles](https://es.wordpress.org/plugins/advance-custom-html/#description)
* [Valoraciones](https://es.wordpress.org/plugins/advance-custom-html/#reviews)
* [Instalación](https://es.wordpress.org/plugins/advance-custom-html/#installation)
* [Desarrollo](https://es.wordpress.org/plugins/advance-custom-html/#developers)
[Soporte](https://wordpress.org/support/plugin/advance-custom-html/)
## Descripción
**#1 Plugin to Add Custom HTML & CSS & JavaScript Code and Display Any Code Snippet
Beautifully in WordPress.**
[**Advance Custom HTML**](https://bplugins.com/products/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.
[**Advance Custom HTML**](https://bplugins.com/products/advance-custom-html/) |
[**Pricing**](https://bplugins.com/products/advance-custom-html/pricing/) | [**Support**](https://bplugins.com/support/)
| [**Demo**](https://bplugins.com/products/advance-custom-html/#demos)
### 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**](https://bplugins.com/products/advance-custom-html/pricing/)
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
[**Live Demo**](https://bplugins.com/products/advance-custom-html/#demos) | [**Buy The Pro**](https://bplugins.com/products/advance-custom-html/pricing)
### Check out our other WordPress Plugins-
[**Html5 Video Player**](https://bplugins.com/products/html5-video-player/) – Display
videos as single and playlist in multiple skins.
[**PDF Poster**](https://bplugins.com/products/pdf-poster/) – Display/Embed PDF
files with different styles.
[**Html5 Audio Player**](https://bplugins.com/products/html5-audio-player/) – Listen
audios with awesome visuals.
[**StreamCast**](https://bplugins.com/products/streamcast-radio-player/) – Customizable
radio player with different skins.
[**3D Viewer**](https://bplugins.com/products/3d-viewer/) – Embed 3D models and
3D products with interaction.
[**Advanced Post Block**](https://bplugins.com/products/advanced-post-block/) –
Show posts and custom posts in different layouts.
## Capturas
* [[
* Add Advance Custom HTML Block
* [[
* HTML with Preview in Editor
* [[
* Gutenberg Block Settings
* [[
* Preview rendered HTML in frontend
* [[
* Preview Code snipped
* [[
* Preview Code snipped without heading
* [[
* Preview Code snipped with bottom copy button
## Bloques
Este plugin proporciona 1 bloque.
* Advance Custom HTML Write code like editor.
## Instalación
#### From Gutenberg Editor:
1. Go to the WordPress Block/Gutenberg Editor
2. Search For **Advance Custom HTML**
3. Click on the **Advance Custom HTML** block to add the block
#### Download & Upload:
1. Download the **Advance Custom HTML** plugin (_.zip file_)
2. In your admin area, go to the Plugins menu and click on **Add New**
3. Click on **Upload Plugin** and choose the **`advance-custom-html.zip`** file and
click on **Install Now**
4. Activate the plugin and Enjoy!
#### Manually:
1. Download and upload the **Advance Custom HTML** plugin to the **`/wp-content/plugins/`**
directory
2. Activate the plugin through the Plugins menu in WordPress
## FAQ
### 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.
### Can I disable certain features like the copy button or line numbers?
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](https://wordpress.org/support/plugin/custom-html/)
### Where do I report security bugs found in this plugin?
Please report security bugs found in the source code of the Advance Custom HTML
plugin through the [Patchstack Vulnerability Disclosure Program](https://patchstack.com/database/vdp/9e5fc69c-ad86-4b05-9ec9-ca0dec118598).
The Patchstack team will assist you with verification, CVE assignment, and notify
the developers of this plugin.
## Reseñas
### [How does it work?](https://wordpress.org/support/topic/how-does-it-work-110/)
[Sponsi](https://profiles.wordpress.org/sponsi/) 19 de septiembre de 2025 1 respuesta
There’s literally NO options here, nothing to work, WTF? Where is the dashboard,
where is adding widgets or something? WTF?
### [Tailwind](https://wordpress.org/support/topic/tailwind/)
[perfectocayabyab](https://profiles.wordpress.org/perfectocayabyab/) 17 de septiembre
de 2025 2 respuestas
Not working with tailwind
### [Helpful for advance code editing](https://wordpress.org/support/topic/helpful-for-advance-code-editing/)
[maviosres](https://profiles.wordpress.org/maviosres/) 2 de octubre de 2023
I was looking for a plugin that can help to write code and make an instant preview
and i found this one. It’s a new plugin but working very smoothly.
[ Leer todas las 3 reseñas ](https://wordpress.org/support/plugin/advance-custom-html/reviews/)
## Colaboradores y desarrolladores
«Advance Custom HTML – Show Live Code, Share Snippets, Embed Code, and Style Them
Your Way.» es un software de código abierto. Las siguientes personas han colaborado
con este plugin.
Colaboradores
* [ bPlugins ](https://profiles.wordpress.org/bplugins/)
* [ Abu Hayat ](https://profiles.wordpress.org/abuhayat/)
* [ Tanin Rahman ](https://profiles.wordpress.org/taninrahman/)
* [ shehabulislam ](https://profiles.wordpress.org/shehabulislam/)
* [ Freemius ](https://profiles.wordpress.org/freemius/)
«Advance Custom HTML – Show Live Code, Share Snippets, Embed Code, and Style Them
Your Way.» está traducido en 1 idioma. Gracias a [los traductores](https://translate.wordpress.org/projects/wp-plugins/advance-custom-html/contributors)
por sus contribuciones.
[Traduce «Advance Custom HTML – Show Live Code, Share Snippets, Embed Code, and Style Them Your Way.» a tu idioma.](https://translate.wordpress.org/projects/wp-plugins/advance-custom-html)
### ¿Interesado en el desarrollo?
[Revisa el código](https://plugins.trac.wordpress.org/browser/advance-custom-html/),
echa un vistazo al [repositorio SVN](https://plugins.svn.wordpress.org/advance-custom-html/)
o suscríbete al [registro de desarrollo](https://plugins.trac.wordpress.org/log/advance-custom-html/)
por [RSS](https://plugins.trac.wordpress.org/log/advance-custom-html/?limit=100&mode=stop_on_copy&format=rss).
## Registro de cambios
#### 2.0.4 – 23 February 2026
* **Update:** Redesigned the dashboard with a modern and improved user interface,
replacing the previous outdated layout.
#### 2.0.3 – 2 December 2025
* Updated and offers to plugins description.
#### 2.0.2 – 25 November 2025
* Update freemius sdk and little fixes.
#### 2.0.1 – 5 November 2025
* Update free SDK
#### 2.0.0, 15 September, 2025
* Update Modern Dashboard and Fixed Issues
#### 1.0.9
* Fixed Issues
#### 1.0.8
* Solve Issues
#### 1.0.7
* Solve preview issue in Editor
#### 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
## Meta
* Versión **2.0.4**
* Última actualización **hace 3 semanas**
* Instalaciones activas **10.000+**
* Versión de WordPress ** 6.6 o superior **
* Probado hasta **6.9.4**
* Versión de PHP ** 7.1 o superior **
* Idiomas
* [Dutch](https://nl.wordpress.org/plugins/advance-custom-html/) y [English (US)](https://wordpress.org/plugins/advance-custom-html/).
* [Traducir a tu idioma](https://translate.wordpress.org/projects/wp-plugins/advance-custom-html)
* Etiquetas:
* [block](https://es.wordpress.org/plugins/tags/block/)[code](https://es.wordpress.org/plugins/tags/code/)
[code snippet](https://es.wordpress.org/plugins/tags/code-snippet/)[custom html](https://es.wordpress.org/plugins/tags/custom-html/)
[embed code](https://es.wordpress.org/plugins/tags/embed-code/)
* [Vista avanzada](https://es.wordpress.org/plugins/advance-custom-html/advanced/)
## Valoraciones
3 de 5 estrellas.
* [ 1 valoración de 5 estrellas ](https://wordpress.org/support/plugin/advance-custom-html/reviews/?filter=5)
* [ 0 valoraciones de 4 estrellas ](https://wordpress.org/support/plugin/advance-custom-html/reviews/?filter=4)
* [ 1 valoración de 3 estrellas ](https://wordpress.org/support/plugin/advance-custom-html/reviews/?filter=3)
* [ 0 valoraciones de 2 estrellas ](https://wordpress.org/support/plugin/advance-custom-html/reviews/?filter=2)
* [ 1 valoración de 1 estrellas ](https://wordpress.org/support/plugin/advance-custom-html/reviews/?filter=1)
[Your review](https://wordpress.org/support/plugin/advance-custom-html/reviews/#new-post)
[Ver todas las valoraciones](https://wordpress.org/support/plugin/advance-custom-html/reviews/)
## Colaboradores
* [ bPlugins ](https://profiles.wordpress.org/bplugins/)
* [ Abu Hayat ](https://profiles.wordpress.org/abuhayat/)
* [ Tanin Rahman ](https://profiles.wordpress.org/taninrahman/)
* [ shehabulislam ](https://profiles.wordpress.org/shehabulislam/)
* [ Freemius ](https://profiles.wordpress.org/freemius/)
## Soporte
¿Tienes algo que decir? ¿Necesitas ayuda?
[Ver el foro de soporte](https://wordpress.org/support/plugin/advance-custom-html/)
## Donar
¿Te gustaría apoyar el progreso de este plugin?
[ Dona a este plugin ](https://gum.co/wpdonate/)