…uide pages

PR Checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes/features)
• Docs have been added/updated (for bug fixes/features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no API changes)
• Build related changes
• CI-related changes
• Documentation content changes
• Other... Please describe:

Issue

I've noticed that when using code block with group property, everything was working correctly in guide pages and api pages, unless it was used with JsDoc.tags action. For example, creating following tsdoc:

/**
 * A related resource link (see hateoas principles).
 * @example
 * ```typescript name="Test" group="testgroup"
 * const link: ResourceLink = {
 *  href: 'https://example.com/api/resource/123',
 * }
 * ```
 * ```typescript name="Test 2" group="testgroup"
 * const templatedLink: ResourceLink = {
 * href: 'https://example.com/api/resource/{id}',
 * templated: true,
 * title: 'Resource by ID',
 * }
 * ```
 */
export interface ResourceLink {}

and then using JsDoc action in markdown page:

{% set examples = JSDoc.tags("apps/ng-doc/poc/api/sample.types.ts#ResourceLink", "example") %}
{% for example in examples %}
{{ example }}
{% endfor %}

was rendering the example with the first tab being below the tab-group, instead of inside of it.

After analysing and debugging, I noticed that the code block was being removed from the <ng-doc-tab> and placed in an external block after the processHtml method was run from process.html.ts. I tried removing each plugin, and it seems like there is a bug in unified itself because no matter what I did, the HTML structure was still being changed. A fix that works and does not break any other functionality is to wrap the <ng-doc-tab> inside a <div> for building purposes, which is then removed by tabs.processor.

Does this PR introduce a breaking change?

• Yes
• No

Other information