main - c771a01 build: prevent markdown styling from bleeding into examples (#31358)

Author: crisbeto

docs-content/guides/creating-a-custom-form-field-control.md.html

@@ -4,7 +4,7 @@
 <p>For example in this guide we&#39;ll learn how to create a custom input for inputting US telephone
 numbers and hook it up to work with <code>&lt;mat-form-field&gt;</code>. Here is what we&#39;ll build by the end of this
 guide:</p>
-<div material-docs-example="form-field-custom-control"></div>
+</div><div material-docs-example="form-field-custom-control"></div><div class="docs-markdown">
 
 <p>In order to learn how to build custom form field controls, let&#39;s start with a simple input component
 that we want to work inside the form field. For example, a phone number input that segments the

docs-content/guides/creating-a-custom-stepper-using-the-cdk-stepper.md.html

@@ -1,6 +1,6 @@
 <div class="docs-markdown"><h1>Creating a custom stepper using the CDK stepper</h1><p>The <a href="https://material.angular.dev/cdk/stepper/overview">CDK stepper</a> allows to build a custom stepper which you can completely style yourself without any specific Material Design styling.</p>
 <p>In this guide, we&#39;ll learn how we can build our own custom stepper using the CDK stepper. Here is what we&#39;ll build by the end of this guide:</p>
-<div material-docs-example="cdk-custom-stepper-without-form"></div>
+</div><div material-docs-example="cdk-custom-stepper-without-form"></div><div class="docs-markdown">
 
 
         <h2 id="create-our-custom-stepper-component" class="docs-header-link">

docs-content/overviews/cdk/a11y/a11y.md.html

@@ -192,14 +192,14 @@ <h3 id="focusmonitor" class="docs-header-link">
 </code></pre>
 <p>Any element that is monitored by calling <code>monitor</code> should eventually be unmonitored by calling
 <code>stopMonitoring</code> with the same element.</p>
-<div material-docs-example="focus-monitor-overview"></div>
+</div><div material-docs-example="focus-monitor-overview"></div><div class="docs-markdown">
 
 <p>It is possible to falsify the <code>FocusOrigin</code> when setting the focus programmatically by using the
 <code>focusVia</code> method of <code>FocusMonitor</code>. This method accepts an element to focus and the <code>FocusOrigin</code>
 to use. If the element being focused is currently being monitored by the <code>FocusMonitor</code> it will
 report the <code>FocusOrigin</code> that was passed in. If the element is not currently being monitored, it
 will just be focused like normal.</p>
-<div material-docs-example="focus-monitor-focus-via"></div>
+</div><div material-docs-example="focus-monitor-focus-via"></div><div class="docs-markdown">
 
 
         <h4 id="cdkmonitorelementfocus-and-cdkmonitorsubtreefocus" class="docs-header-link">
@@ -211,7 +211,7 @@ <h4 id="cdkmonitorelementfocus-and-cdkmonitorsubtreefocus" class="docs-header-li
 <code>checkChildren</code> set to <code>false</code>. <code>cdkMonitorSubtreeFocus</code> is the equivalent of calling <code>monitor</code> on
 the host element with <code>checkChildren</code> set to <code>true</code>. Each of these directives has an <code>@Output()</code>
 <code>cdkFocusChange</code> that will emit the new <code>FocusOrigin</code> whenever it changes.</p>
-<div material-docs-example="focus-monitor-directives"></div>
+</div><div material-docs-example="focus-monitor-directives"></div><div class="docs-markdown">
 
 
         <h3 id="styling-utilities" class="docs-header-link">

docs-content/overviews/cdk/accordion/accordion.md.html

@@ -2,7 +2,7 @@
 foundation upon which you can build your own custom accordion component. CDK accordion provides
 logic for the accordion interaction pattern without any styles. You can customize the accordion's
 appearance based on your application&#39;s needs.</p>
-<div material-docs-example="cdk-accordion-overview"></div>
+</div><div material-docs-example="cdk-accordion-overview"></div><div class="docs-markdown">
 
 
         <h3 id="accessibility" class="docs-header-link">

docs-content/overviews/cdk/clipboard/clipboard.md.html

@@ -8,7 +8,7 @@ <h3 id="click-an-element-to-copy" class="docs-header-link">
 existing element. The directive selector doubles as an <code>@Input()</code> for the text to be copied.</p>
 <pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;avatar.jpg&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;Hero avatar&quot;</span> [<span class="hljs-attr">cdkCopyToClipboard</span>]=<span class="hljs-string">&quot;getShortBio()&quot;</span>&gt;</span>
 </code></pre>
-<div material-docs-example="cdk-clipboard-overview"></div>
+</div><div material-docs-example="cdk-clipboard-overview"></div><div class="docs-markdown">
 
 
         <h3 id="programmatically-copy-a-string" class="docs-header-link">

docs-content/overviews/cdk/dialog/dialog.md.html

@@ -16,7 +16,7 @@ <h3 id="initial-setup" class="docs-header-link">
 
 <span class="hljs-keyword">@include</span> cdk.overlay();
 </code></pre>
-<div material-docs-example="cdk-dialog-overview"></div>
+</div><div material-docs-example="cdk-dialog-overview"></div><div class="docs-markdown">
 
 <p>You can open a dialog by calling the <code>open</code> method either with a component or with a <code>TemplateRef</code>
 representing the dialog content. The method additionally accepts an optional configuration object.
@@ -83,7 +83,7 @@ <h4 id="styling-the-dialog-component" class="docs-header-link">
 })
 <span class="hljs-keyword">class</span> <span class="hljs-title class_">MyDialog</span> {}
 </code></pre>
-<div material-docs-example="cdk-dialog-styling"></div>
+</div><div material-docs-example="cdk-dialog-styling"></div><div class="docs-markdown">
 
 
         <h4 id="providing-a-custom-dialog-container" class="docs-header-link">
@@ -155,7 +155,7 @@ <h3 id="sharing-data-with-the-dialog-component" class="docs-header-link">
     Hello, {{data.name}}
 <span class="hljs-tag">&lt;/<span class="hljs-name">ng-template</span>&gt;</span>
 </code></pre>
-<div material-docs-example="cdk-dialog-data"></div>
+</div><div material-docs-example="cdk-dialog-data"></div><div class="docs-markdown">
 
 
         <h3 id="accessibility" class="docs-header-link">

docs-content/overviews/cdk/drag-drop/drag-drop.md.html

@@ -11,7 +11,7 @@ <h3 id="getting-started" class="docs-header-link">
 features. You can now add the <code>cdkDrag</code> directive to elements to make them draggable. When
 outside of a <code>cdkDropList</code> element, draggable elements can be freely moved around the page.
 You can add <code>cdkDropList</code> elements to constrain where elements may be dropped.</p>
-<div material-docs-example="cdk-drag-drop-overview"></div>
+</div><div material-docs-example="cdk-drag-drop-overview"></div><div class="docs-markdown">
 
 
         <h3 id="reordering-lists" class="docs-header-link">
@@ -22,7 +22,7 @@ <h3 id="reordering-lists" class="docs-header-link">
 reorderable collection. Items will automatically rearrange as an element moves. Note
 that this will <em>not</em> update your data model; you can listen to the <code>cdkDropListDropped</code> event to
 update the data model once the user finishes dragging.</p>
-<div material-docs-example="cdk-drag-drop-sorting"></div>
+</div><div material-docs-example="cdk-drag-drop-sorting"></div><div class="docs-markdown">
 
 
         <h3 id="transferring-items-between-lists" class="docs-header-link">
@@ -32,7 +32,7 @@ <h3 id="transferring-items-between-lists" class="docs-header-link">
       <p>The <code>cdkDropList</code> directive supports transferring dragged items between connected drop zones.
 You can connect one or more <code>cdkDropList</code> instances together by setting the <code>cdkDropListConnectedTo</code>
 property or by wrapping the elements in an element with the <code>cdkDropListGroup</code> attribute.</p>
-<div material-docs-example="cdk-drag-drop-connected-sorting"></div>
+</div><div material-docs-example="cdk-drag-drop-connected-sorting"></div><div class="docs-markdown">
 
 <p>Note that <code>cdkDropListConnectedTo</code> works both with a direct reference to another <code>cdkDropList</code>, or
 by referencing the <code>id</code> of another drop container:</p>
@@ -54,7 +54,7 @@ <h3 id="transferring-items-between-lists" class="docs-header-link">
   }
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-<div material-docs-example="cdk-drag-drop-connected-sorting-group"></div>
+</div><div material-docs-example="cdk-drag-drop-connected-sorting-group"></div><div class="docs-markdown">
 
 
         <h3 id="attaching-data" class="docs-header-link">
@@ -164,7 +164,7 @@ <h3 id="customizing-the-drag-area-using-a-handle" class="docs-header-link">
 restrict the user to only be able to do so using a handle element, you can do it by adding the
 <code>cdkDragHandle</code> directive to an element inside of <code>cdkDrag</code>. Note that you can have as many
 <code>cdkDragHandle</code> elements as you want:</p>
-<div material-docs-example="cdk-drag-drop-handle"></div>
+</div><div material-docs-example="cdk-drag-drop-handle"></div><div class="docs-markdown">
 
 
         <h3 id="customizing-the-drag-preview" class="docs-header-link">
@@ -180,7 +180,7 @@ <h3 id="customizing-the-drag-preview" class="docs-header-link">
 <p>Note that the cloned element will remove its <code>id</code> attribute in order to avoid having multiple
 elements with the same <code>id</code> on the page. This will cause any CSS that targets that <code>id</code> not
 to be applied.</p>
-<div material-docs-example="cdk-drag-drop-custom-preview"></div>
+</div><div material-docs-example="cdk-drag-drop-custom-preview"></div><div class="docs-markdown">
 
 
         <h3 id="drag-preview-insertion-point" class="docs-header-link">
@@ -228,7 +228,7 @@ <h3 id="customizing-the-drag-placeholder" class="docs-header-link">
 show where it will be placed when it&#39;s dropped. By default the placeholder is a clone of the element
 that is being dragged, however you can replace it with a custom one using the <code>*cdkDragPlaceholder</code>
 directive:</p>
-<div material-docs-example="cdk-drag-drop-custom-placeholder"></div>
+</div><div material-docs-example="cdk-drag-drop-custom-placeholder"></div><div class="docs-markdown">
 
 
         <h3 id="list-orientation" class="docs-header-link">
@@ -237,7 +237,7 @@ <h3 id="list-orientation" class="docs-header-link">
         </h3>
       <p>The <code>cdkDropList</code> directive assumes that lists are vertical by default. This can be
 changed by setting the <code>cdkDropListOrientation</code> property to <code>horizontal</code>.</p>
-<div material-docs-example="cdk-drag-drop-horizontal-sorting"></div>
+</div><div material-docs-example="cdk-drag-drop-horizontal-sorting"></div><div class="docs-markdown">
 
 
         <h3 id="list-wrapping" class="docs-header-link">
@@ -251,7 +251,7 @@ <h3 id="list-wrapping" class="docs-header-link">
 will use a different strategy of sorting the elements that works by moving them in the DOM. It has
 the advantage of allowing the items to wrap to the next line, but it <strong>cannot</strong> animate the
 sorting action.</p>
-<div material-docs-example="cdk-drag-drop-mixed-sorting"></div>
+</div><div material-docs-example="cdk-drag-drop-mixed-sorting"></div><div class="docs-markdown">
 
 
         <h3 id="copying-items-from-one-list-to-another" class="docs-header-link">
@@ -270,7 +270,7 @@ <h3 id="copying-items-from-one-list-to-another" class="docs-header-link">
 <p>Combining <code>cdkDropListHasAnchor</code> and <code>cdkDropListSortingDisabled</code> makes it possible to construct a
 list that user copies items from, but doesn&#39;t necessarily transfer out of (e.g. a product list and
 a shopping cart).</p>
-<div material-docs-example="cdk-drag-drop-copy-list"></div>
+</div><div material-docs-example="cdk-drag-drop-copy-list"></div><div class="docs-markdown">
 
 
         <h3 id="restricting-movement-within-an-element" class="docs-header-link">
@@ -282,7 +282,7 @@ <h3 id="restricting-movement-within-an-element" class="docs-header-link">
 selector and looking up the DOM until it finds an element that matches it. If a match is found,
 it&#39;ll be used as the boundary outside of which the element can&#39;t be dragged. <code>cdkDragBoundary</code> can
 also be used when <code>cdkDrag</code> is placed inside a <code>cdkDropList</code>.</p>
-<div material-docs-example="cdk-drag-drop-boundary"></div>
+</div><div material-docs-example="cdk-drag-drop-boundary"></div><div class="docs-markdown">
 
 
         <h3 id="restricting-movement-along-an-axis" class="docs-header-link">
@@ -292,7 +292,7 @@ <h3 id="restricting-movement-along-an-axis" class="docs-header-link">
       <p>By default, <code>cdkDrag</code> allows free movement in all directions. To restrict dragging to a
 specific axis, you can set <code>cdkDragLockAxis</code> on <code>cdkDrag</code> or <code>cdkDropListLockAxis</code> on <code>cdkDropList</code>
 to either <code>&quot;x&quot;</code> or <code>&quot;y&quot;</code>.</p>
-<div material-docs-example="cdk-drag-drop-axis-lock"></div>
+</div><div material-docs-example="cdk-drag-drop-axis-lock"></div><div class="docs-markdown">
 
 
         <h3 id="alternate-drag-root-element" class="docs-header-link">
@@ -304,7 +304,7 @@ <h3 id="alternate-drag-root-element" class="docs-header-link">
 up the DOM until it finds an element that matches the selector. If an element is found, it&#39;ll become
 the element that is moved as the user is dragging. This is useful for cases like making a dialog
 draggable.</p>
-<div material-docs-example="cdk-drag-drop-root-element"></div>
+</div><div material-docs-example="cdk-drag-drop-root-element"></div><div class="docs-markdown">
 
 
         <h3 id="controlling-which-items-can-be-moved-into-a-container" class="docs-header-link">
@@ -316,7 +316,7 @@ <h3 id="controlling-which-items-can-be-moved-into-a-container" class="docs-heade
 <code>cdkDropListEnterPredicate</code> which will be called whenever an item is about to enter a
 new container. Depending on whether the predicate returns <code>true</code> or <code>false</code>, the item may or may not
 be allowed into the new container.</p>
-<div material-docs-example="cdk-drag-drop-enter-predicate"></div>
+</div><div material-docs-example="cdk-drag-drop-enter-predicate"></div><div class="docs-markdown">
 
 
         <h3 id="disabled-dragging" class="docs-header-link">
@@ -327,7 +327,7 @@ <h3 id="disabled-dragging" class="docs-header-link">
 <code>cdkDragDisabled</code> input on a <code>cdkDrag</code> item. Furthermore, you can disable an entire list
 using the <code>cdkDropListDisabled</code> input on a <code>cdkDropList</code> or a particular handle via
 <code>cdkDragHandleDisabled</code> on <code>cdkDragHandle</code>.</p>
-<div material-docs-example="cdk-drag-drop-disabled"></div>
+</div><div material-docs-example="cdk-drag-drop-disabled"></div><div class="docs-markdown">
 
 
         <h3 id="disabled-sorting" class="docs-header-link">
@@ -339,7 +339,7 @@ <h3 id="disabled-sorting" class="docs-header-link">
 <code>cdkDropListSortingDisabled</code> input which will prevent the items in a <code>cdkDropList</code> from sorting,
 in addition to preserving the dragged item&#39;s initial position in the source list, if the user
 decides to return the item.</p>
-<div material-docs-example="cdk-drag-drop-disabled-sorting"></div>
+</div><div material-docs-example="cdk-drag-drop-disabled-sorting"></div><div class="docs-markdown">
 
 
         <h3 id="delayed-dragging" class="docs-header-link">
@@ -352,7 +352,7 @@ <h3 id="delayed-dragging" class="docs-header-link">
 cases like these you can delay the dragging sequence using the <code>cdkDragStartDelay</code> input which
 will wait for the user to hold down their pointer for the specified number of milliseconds before
 moving the element.</p>
-<div material-docs-example="cdk-drag-drop-delay"></div>
+</div><div material-docs-example="cdk-drag-drop-delay"></div><div class="docs-markdown">
 
 
         <h3 id="changing-the-standalone-drag-position" class="docs-header-link">
@@ -363,7 +363,7 @@ <h3 id="changing-the-standalone-drag-position" class="docs-header-link">
 moved by a user. The element&#39;s position can be explicitly set, however, via the
 <code>cdkDragFreeDragPosition</code> input. Applications commonly use this, for example, to restore a
 draggable&#39;s position after a user has navigated away and then returned.</p>
-<div material-docs-example="cdk-drag-drop-free-drag-position"></div>
+</div><div material-docs-example="cdk-drag-drop-free-drag-position"></div><div class="docs-markdown">
 
 
         <h3 id="controlling-whether-an-item-can-be-sorted-into-a-particular-index" class="docs-header-link">
@@ -374,7 +374,7 @@ <h3 id="controlling-whether-an-item-can-be-sorted-into-a-particular-index" class
 this behavior by setting a <code>cdkDropListSortPredicate</code>. The predicate function will be called
 whenever an item is about to be moved into a new index. If the predicate returns <code>true</code>, the
 item will be moved into the new index, otherwise it will keep its current position.</p>
-<div material-docs-example="cdk-drag-drop-sort-predicate"></div>
+</div><div material-docs-example="cdk-drag-drop-sort-predicate"></div><div class="docs-markdown">
 
 
         <h3 id="integrations-with-angular-material" class="docs-header-link">
@@ -388,13 +388,13 @@ <h4 id="sortable-table" class="docs-header-link">
           Sortable table
         </h4>
       <p>This example shows how you can set up a table which supports re-ordering of tabs.</p>
-<div material-docs-example="cdk-drag-drop-table"></div>
+</div><div material-docs-example="cdk-drag-drop-table"></div><div class="docs-markdown">
 
 
         <h4 id="sortable-tabs" class="docs-header-link">
           <span header-link="sortable-tabs"></span>
           Sortable tabs
         </h4>
       <p>Example of how to add sorting support to a <code>mat-tab-group</code>.</p>
-<div material-docs-example="cdk-drag-drop-tabs"></div>
+</div><div material-docs-example="cdk-drag-drop-tabs"></div><div class="docs-markdown">
 </div>

docs-content/overviews/cdk/layout/layout.md.html

@@ -8,7 +8,7 @@ <h3 id="breakpointobserver" class="docs-header-link">
 size ranges between breakpoints correspond to different standard screen sizes. </p>
 <p><code>BreakpointObserver</code> lets you evaluate media queries to determine the current screen size and
 react to changes when the viewport size crosses a breakpoint.</p>
-<div material-docs-example="breakpoint-observer-overview"></div>
+</div><div material-docs-example="breakpoint-observer-overview"></div><div class="docs-markdown">
 
 
         <h4 id="check-the-current-viewport-size" class="docs-header-link">