Code blocks and image zoom in docs

HelpWP ships two reader-facing extras for docs out of the box: Prism.js for syntax highlighting and Fancybox for image zoom. Both are loaded only on doc pages and on the docs archive.

Syntax-highlighted code blocks

Inside the editor, wrap code in the

</code> shortcode and pass a <code>lang</code> attribute:
<pre><code>[code lang="php"]
function helpwp_hello() {
return 'world';
}

Prism handles a long list of languages (php, js, ts, css, html, bash, json, yaml, sql, python, go, ruby, rust, and many more). The lang value is the standard Prism language slug.

If you write in the block editor, the Code block is also wrapped with Prism, but you can keep using the shortcode for finer control over the language.

Image zoom

Any <img> tag inside doc content automatically gets a Fancybox wrapper on the front-end. Click the image to open a lightbox, click outside or press Esc to close. There is no setting to toggle this; if you would rather not use it, dequeue the script via wp_dequeue_script( 'fancybox' ) from your theme.

Heading anchors

Every <h2> through <h4> heading in a doc gets an automatic id attribute derived from its text. That makes every section linkable via a fragment URL (/docs/getting-started/#installation) without any extra effort from the author.

Featured image

The featured image is shown in the docs archive (the