Advance Custom HTML Pro: Code and Live Preview Together

Code show depends on the snippet

Advance Custom HTML Pro adds code snippets to WordPress posts, pages, and widgets. While you write or paste code, syntax highlighting and autocomplete suggestions help with editing. For front-end code such as HTML, CSS, and JavaScript, the live preview shows the rendered output beside the code. You can drag the preview panel to another position on screen. PHP and Python snippets can also use syntax highlighting.

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

Choose how each snippet appears

Pro includes more than 40 editor themes, including dark, light, and minimal styles, along with additional syntax modes such as PHP and Python. Adjust tab size, line wrapping, editor height or width, and alignment. You can also change the editor font size.

• Show or conceal 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 when you want a simpler code block.

These controls fit different formats: a tutorial may use active-line highlighting to guide readers, while a compact reference snippet may omit headings. Example uses include HTML and CSS lessons, JavaScript demonstrations, PHP course material, Python data science posts, API guides, and developer documentation.

Add a snippet to a post or page

1. Install and activate Advance Custom HTML.
2. Open a post or page in the WordPress editor, choose Add Block, and select Advance Custom HTML under Widgets.
3. Write or paste your code, then configure the theme, preview, copy button, and other presentation options.
4. Publish or update the content.