Advance Custom HTML Pro: Code and Live Preview Together

Code display and live output

Advance Custom HTML Pro adds code snippets to WordPress posts and pages. Autocomplete suggestions assist while you write or paste code. For front-end code such as HTML, CSS, and JavaScript, a live preview shows the rendered output in a draggable panel. PHP and Python snippets can be presented with syntax highlighting.

Responsive code blocks and preview panels are designed for different device sizes. Readers can copy snippets when the copy button is enabled.

Pro themes and editor controls

Choose from more than 40 editor themes, including dark, light, and minimal styles. Set a syntax mode for each snippet, such as HTML, CSS, JavaScript, PHP, or Python. Pro also lets you adjust tab size, line wrapping, editor font size, height, and width, then align the editor left, center, or right.

• Show or hide line numbers, the fold gutter, active-line highlighting, and the copy button.
• Customize the copy button text, icon, style, and position.
• Hide headings or labels for a simpler presentation.
• Use the fold gutter to collapse code blocks.

Use in tutorials and documentation

Pair HTML and CSS lessons with their rendered output, add JavaScript demonstrations with interactive previews, or present PHP examples in courses and articles. Python syntax highlighting can support data science blogs. The same code blocks can organize API guides, reference pages, and technical articles.

Add a code block

Install and activate Advance Custom HTML, then open a post or page in the WordPress editor. Choose Add Block and select Advance Custom HTML under Widgets. Write or paste your code, configure the theme, preview, copy button, and show options, then publish or update the content.