Skip to content

[Markdown] [ Web/API] Fix usages of <div class="hidden"> containing code blocks #7901

@wbamberg

Description

@wbamberg

Part of #7898.

In preparing Web/API docs for Markdown conversion we'd like to remove occurrences of <div class="hidden">. There are two main usages of this pattern:

  1. to include comments for editors, like the comments attached to interactive examples
  2. to hide code blocks that the author wants to participate in live samples, but doesn't want the reader to see

This issue to about removing instances of the second category. The fix in this case is to:

  • move the hidden class from the <div> and attach it directly to the <pre> blocks that the <div> contains
  • delete any other stuff in the <div>, having checked that it's not important*
  • remove the <div> tags

This will work in Markdown because we support info strings on code blocks, and we will support hidden as a value in there: https://developer.mozilla.org/en-US/docs/MDN/Contribute/Markdown_in_MDN#example_code_blocks.

For example, given this (from https://developer.mozilla.org/en-US/docs/Web/CSS/align-content#examples):

<h2 id="Examples">Examples</h2>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">
...CSS content skipped for brevity...
</pre>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">
...HTML content skipped for brevity...
</pre>

<div class="hidden">
<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js">
...JS content skipped for brevity...
</pre>
</div>

<h3 id="Result">Result</h3>

<p>{{EmbedLiveSample("Examples", 260, 290)}}</p>

...we would instead do:

<h2 id="Examples">Examples</h2>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">
...CSS content skipped for brevity...
</pre>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">
...HTML content skipped for brevity...
</pre>

<pre class="brush: js hidden">
...JS content skipped for brevity...
</pre>

<h3 id="Result">Result</h3>

<p>{{EmbedLiveSample("Examples", 260, 290)}}</p>
  • Note "delete any other stuff in the <div>, having checked that it's not important". The only case I can think of here is where the other stuff, such as headings, is providing an ID that the live sample can reference. Then deleting the heading will break the live sample.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions