Show code with its front-end output

Advance Custom HTML Pro lets you add code examples to WordPress posts, pages, and widgets. Write or paste a snippet in the editor, then use syntax highlighting and autocomplete while you work. For HTML, CSS, and JavaScript, the draggable preview panel displays the front-end output alongside the code. PHP and Python snippets can be displayed with syntax highlighting.

Responsive code blocks and preview panels adapt to different device sizes. Readers can view and copy snippets when the copy button is enabled.

Set the editor style and layout

Pro includes more than 40 editor themes, with dark, light, and minimal styles. Choose a syntax mode for each snippet and adjust its tab size, line wrapping, height, or width. You can align the editor left, center, or right and change the font size.

• Show or hide line numbers, the fold gutter, active-line highlighting, and wrapping.
• Enable or disable the copy button, then customize its text, icon, style, and position.
• Hide headings or labels for a simpler code display.

Use it in tutorials and documentation

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

Add a code block to WordPress

Install and activate Advance Custom HTML, then open a post or page in the WordPress editor. Select Add Block and choose Advance Custom HTML under Widgets. Write or paste your code, set the theme, preview, copy button, and other presentation settings, then publish or update the content. You can also insert snippets with a shortcode.