fix(ci/markdownlint): add a search-replace rule to put some html tags in code spans

.markdownlint.jsonc

@@ -231,6 +231,13 @@
         "searchPattern": "/^ *> !?\\[!?((?!NOTE)[Nn][Oo][Tt][Ee]|(?!WARNING)[Ww][Aa][Rr][Nn][Ii][Nn][Gg]|(?!CALLOUT)[Cc][Aa][Ll][Ll][Oo][Uu][Tt])\\]\\n|^ *> (?!\\[!)!?\\[!?(NOTE|WARNING|CALLOUT)\\]\\n/gm",
         "searchScope": "text",
       },
+      {
+        "name": "inline-html",
+        "message": "Put inline HTML tags in code spans",
+        "searchPattern": "/(?<!`)\\\\?(<(audio|button|canvas|input|select|video)>)/g",
+        "replace": "`$1`",
+        "searchScope": "text",
+      },
     ],
   },
 }

files/en-us/learn/forms/index.md

@@ -65,6 +65,6 @@ The following articles aren't essential to the learning pathway, but they'll pro
 ## See also
 
 - [HTML forms element reference](/en-US/docs/Web/HTML/Element#forms)
-- [HTML \<input> types reference](/en-US/docs/Web/HTML/Element/input)
+- [HTML `<input>` types reference](/en-US/docs/Web/HTML/Element/input)
 - [HTML attribute reference](/en-US/docs/Web/HTML/Attributes)
 - [User input methods and controls](/en-US/docs/Learn/Forms/User_input_methods)

files/en-us/learn/forms/styling_web_forms/index.md

@@ -64,7 +64,7 @@ The article [Advanced form styling](/en-US/docs/Learn/Forms/Advanced_form_stylin
 - Elements involved in creating dropdown widgets, including {{HTMLElement("select")}}, {{HTMLElement("option")}}, {{HTMLElement("optgroup")}} and {{HTMLElement("datalist")}}.
 - {{HTMLElement("progress")}} and {{HTMLElement("meter")}}
 
-For example, the date picker calendar, and the button on \<select> that displays an options list when clicked, can't be styled using CSS alone.
+For example, the date picker calendar, and the button on `<select>` that displays an options list when clicked, can't be styled using CSS alone.
 
 The articles [Advanced form styling](/en-US/docs/Learn/Forms/Advanced_form_styling) and [How to build custom form controls](/en-US/docs/Learn/Forms/How_to_build_custom_form_controls) describe how to style these.
 

files/en-us/learn/html/multimedia_and_embedding/video_and_audio_content/index.md

@@ -48,7 +48,7 @@ We won't be teaching you how to produce audio and video files — that requires
 > [!NOTE]
 > Before you begin here, you should also know that there are quite a few OVPs (online video providers) like [YouTube](https://www.youtube.com/), [Dailymotion](https://www.dailymotion.com/), and [Vimeo](https://vimeo.com/), and online audio providers like [Soundcloud](https://soundcloud.com/). Such companies offer a convenient, easy way to host and consume videos, so you don't have to worry about the enormous bandwidth consumption. OVPs even usually offer ready-made code for embedding video/audio in your webpages; if you use that route, you can avoid some of the difficulties we discuss in this article. We'll be discussing this kind of service a bit more in the next article.
 
-### The \<video> element
+### The `<video>` element
 
 The {{htmlelement("video")}} element allows you to embed a video very easily. A really simple example looks like this:
 
@@ -136,7 +136,7 @@ Each `<source>` element also has a [`type`](/en-US/docs/Web/HTML/Element/source#
 
 Refer to our [guide to media types and formats](/en-US/docs/Web/Media/Formats) for help selecting the best containers and codecs for your needs, as well as to look up the right MIME types to specify for each.
 
-### Other \<video> features
+### Other `<video>` features
 
 There are a number of other features you can include when displaying an HTML video. Take a look at our next example:
 
@@ -185,7 +185,7 @@ Features include:
 
 You can find the above example available to [play live on GitHub](https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html) (also [see the source code](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html).) Note that we haven't included the `autoplay` attribute in the live version — if the video starts to play as soon as the page loads, you don't get to see the poster!
 
-### The \<audio> element
+### The `<audio>` element
 
 The {{htmlelement("audio")}} element works just like the {{htmlelement("video")}} element, with a few small differences as outlined below. A typical example might look like so:
 

files/en-us/learn/javascript/client-side_web_apis/drawing_graphics/index.md

@@ -53,7 +53,7 @@ Around 2006–2007, Mozilla started work on an experimental 3D canvas implementa
 
 This article will focus mainly on 2D canvas, as raw WebGL code is very complex. We will however show how to use a WebGL library to create a 3D scene more easily, and you can find a tutorial covering raw WebGL elsewhere — see [Getting started with WebGL](/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL).
 
-## Active learning: Getting started with a \<canvas>
+## Active learning: Getting started with a `<canvas>`
 
 If you want to create a 2D _or_ 3D scene on a web page, you need to start with an HTML {{htmlelement("canvas")}} element. This element is used to define the area on the page into which the image will be drawn. This is as simple as including the element on the page:
 

files/en-us/learn/learning_and_getting_help/index.md

@@ -227,7 +227,7 @@ It is often fairly obvious what to search for. For example:
 
 - If you want to find out more about responsive web design, you could search for "responsive web design".
 - If you want to find out more about a specific technology feature, such as the HTML `<video>` element, or the CSS `background-color` or `opacity` properties, or the JavaScript `Date.setTime()` method, you should just search for the feature's name.
-- If you are looking for some more specific information, you can add other keywords as modifiers, for example "\<video> element autoplay attribute", or "Date.setTime parameters".
+- If you are looking for some more specific information, you can add other keywords as modifiers, for example "`<video>` element autoplay attribute", or "Date.setTime parameters".
 
 If you want to search for something that has less obvious buzzwords, you need to think about what is most likely to return what you want.
 
@@ -245,7 +245,7 @@ If you are having a problem with some code and a specific error message is comin
 
 It is often a good idea to see if your problem is affecting all browsers, or whether it only occurs in one or a small number of browsers. If it is only affecting one browser, for example, you can use that browser to narrow down the search. Example searches might look like:
 
-- \<video> playback doesn't work in the iOS browser.
+- `<video>` playback doesn't work in the iOS browser.
 - Firefox doesn't seem to support the Beetlejuice API.
 
 ### Using MDN

files/en-us/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md

@@ -167,7 +167,7 @@ Common patterns for detectable features include:
 
 - Retention of assigned property value by an element
 
-  - : Create an element in memory using {{domxref("Document.createElement()")}}, set a property to a specific value, then check to see if the value is retained. See the feature test in [Dive into HTML \<input> type detection](https://diveinto.html5doctor.com/detect.html#input-types) for an example of this pattern.
+  - : Create an element in memory using {{domxref("Document.createElement()")}}, set a property to a specific value, then check to see if the value is retained. See the feature test in [Dive into HTML `<input>` type detection](https://diveinto.html5doctor.com/detect.html#input-types) for an example of this pattern.
 
 Bear in mind that some features are, however, known to be undetectable. In these cases, you'll need to use a different approach, such as using a {{Glossary("Polyfill", "polyfill")}}.
 

files/en-us/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md

@@ -268,7 +268,7 @@ Among the best sources of support information are the Mozilla Developer Network
 
 To use the Mozilla Developer Network (MDN), most people do a search engine search of the technology they are trying to find information on, plus the term "mdn", for example, "mdn HTML video". MDN contains several useful types of content:
 
-- Reference material with browser support information for client-side web technologies, e.g. the [\<video> reference page](/en-US/docs/Web/HTML/Element/video).
+- Reference material with browser support information for client-side web technologies, e.g. the [`<video>` reference page](/en-US/docs/Web/HTML/Element/video).
 - Other supporting reference material, e.g. the [Guide to media types and formats on the web](/en-US/docs/Web/Media/Formats),
 - Useful tutorials that solve specific problems, for example, [Creating a cross-browser video player](/en-US/docs/Web/Media/Audio_and_video_delivery/cross_browser_video_player).
 

files/en-us/mdn/writing_guidelines/page_structures/page_types/html_element_page_template/index.md

@@ -31,7 +31,7 @@ page-type: mdn-writing-guide
 > - **title**
 >   - : Title heading displayed at the top of the page.
 >     Format as `'<NameOfTheElement>: Description of element's purpose'`.
->     For example, the [`<video>`](/en-US/docs/Web/HTML/Element/video) element has a _title_ of: **'\<video>: The Video Embed element'**.
+>     For example, the [`<video>`](/en-US/docs/Web/HTML/Element/video) element has a _title_ of: **'`<video>`: The Video Embed element'**.
 > - **slug**
 >   - : The end of the URL path after `https://developer.mozilla.org/en-US/docs/`.
 >     This will be formatted like `Web/HTML/Element/NameOfTheElement`, where the element name is in _lower case_.

files/en-us/web/api/htmlelement/change_event/index.md

@@ -35,7 +35,7 @@ A generic {{domxref("Event")}}.
 
 ## Examples
 
-### \<select> element
+### `<select>` element
 
 #### HTML
 

files/en-us/web/api/htmlmediaelement/index.md

@@ -157,7 +157,7 @@ Listen to these events using {{domxref("EventTarget.addEventListener", "addEvent
 - {{domxref("HTMLMediaElement.encrypted_event", 'encrypted')}}
   - : Fired when initialization data is found in the media, indicating that it is encrypted.
 - {{domxref("HTMLMediaElement.ended_event", 'ended')}}
-  - : Fired when playback stops when end of the media (\<audio> or \<video>) is reached or because no further data is available.
+  - : Fired when playback stops when end of the media (`<audio>` or `<video>`) is reached or because no further data is available.
 - {{domxref("HTMLMediaElement.error_event", 'error')}}
   - : Fired when the resource could not be loaded due to an error.
 - {{domxref("HTMLMediaElement.loadeddata_event", 'loadeddata')}}

files/en-us/web/html/constraint_validation/index.md

@@ -436,7 +436,7 @@ See {{cssxref(':placeholder-shown')}}.
 
 #### :valid :invalid CSS pseudo-classes
 
-The {{cssxref(':valid')}} and {{cssxref(':invalid')}} [pseudo-classes](/en-US/docs/Web/CSS/Pseudo-classes) are used to represent \<input> elements whose content validates and fails to validate respectively according to the input's type setting. These classes allow the user to style valid or invalid form elements to make it easier to identify elements that are either formatted correctly or incorrectly.
+The {{cssxref(':valid')}} and {{cssxref(':invalid')}} [pseudo-classes](/en-US/docs/Web/CSS/Pseudo-classes) are used to represent `<input>` elements whose content validates and fails to validate respectively according to the input's type setting. These classes allow the user to style valid or invalid form elements to make it easier to identify elements that are either formatted correctly or incorrectly.
 
 ### Controlling the text of constraint violation
 

files/en-us/web/html/element/a/index.md

@@ -373,7 +373,7 @@ For details about `mailto:` URLs, such as including a subject or body, see [Emai
 
 See {{RFC(3966)}} for syntax, additional features, and other details about the `tel:` URL scheme.
 
-### Using the download attribute to save a \<canvas> as a PNG
+### Using the download attribute to save a `<canvas>` as a PNG
 
 To save a {{HTMLElement("canvas")}} element's contents as an image, you can create a link where the `href` is the canvas data as a `data:` URL created with JavaScript and the `download` attribute provides the file name for the downloaded PNG file:
 

files/en-us/web/html/element/audio/index.md

@@ -367,7 +367,7 @@ The following example shows simple usage of the `<audio>` element to play an OGG
 
 For details on when autoplay works, how to get permission to use autoplay, and how and when it's appropriate to use autoplay, see our [autoplay guide](/en-US/docs/Web/Media/Autoplay_guide).
 
-### \<audio> element with \<source> element
+### `<audio>` element with \<source> element
 
 This example specifies which audio track to embed using the `src` attribute on a nested `<source>` element rather than directly on the `<audio>` element. It is always useful to include the file's MIME type inside the `type` attribute, as the browser is able to instantly tell if it can play that file, and not waste time on it if not.
 
@@ -378,7 +378,7 @@ This example specifies which audio track to embed using the `src` attribute on a
 </audio>
 ```
 
-### \<audio> with multiple \<source> elements
+### `<audio>` with multiple \<source> elements
 
 This example includes multiple `<source>` elements. The browser tries to load the first source element (Opus) if it is able to play it; if not it falls back to the second (Vorbis) and finally back to MP3:
 

files/en-us/web/html/element/input/index.md

@@ -11,7 +11,7 @@ The **`<input>`** [HTML](/en-US/docs/Web/HTML) element is used to create interac
 
 {{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}
 
-## \<input> types
+## `<input>` types
 
 How an `<input>` works varies considerably depending on the value of its [`type`](#type) attribute, hence the different types are covered in their own separate reference pages. If this attribute is not specified, the default type adopted is `text`.
 

files/en-us/web/media/audio_and_video_delivery/index.md

@@ -73,7 +73,7 @@ The code above creates a video player of dimensions 640x480 pixels, displaying a
 > [!NOTE]
 > The `autoplay` attribute may be ignored by some mobile browsers. Also, the autoplay feature can be controversial when misused. It's strongly recommended that you read the [Autoplay guide for media and Web Audio APIs](/en-US/docs/Web/Media/Autoplay_guide) to learn how to use autoplay wisely.
 
-For further info see [\<video> element](/en-US/docs/Web/HTML/Element/video) and [Creating a cross-browser video player](/en-US/docs/Web/Media/Audio_and_video_delivery/cross_browser_video_player).
+For further info see [`<video>` element](/en-US/docs/Web/HTML/Element/video) and [Creating a cross-browser video player](/en-US/docs/Web/Media/Audio_and_video_delivery/cross_browser_video_player).
 
 ### JavaScript Audio
 

files/en-us/web/performance/animation_performance_and_frame_rate/index.md

@@ -8,7 +8,7 @@ page-type: guide
 
 Animation on the web can be done via {{domxref('SVGAnimationElement', 'SVG')}}, {{domxref('window.requestAnimationFrame','JavaScript')}}, including {{htmlelement('canvas')}} and {{domxref('WebGL_API', 'WebGL')}}, CSS {{cssxref('animation')}}, {{htmlelement('video')}}, animated gifs and even animated PNGs and other image types. The performance cost of animating a CSS property can vary from one property to another, and animating expensive CSS properties can result in {{glossary('jank')}} as the browser struggles to hit a smooth {{glossary("FPS", "frame rate")}}.
 
-For animated media, such as video and animated gifs, the main performance concern is file size - downloading the file fast enough to not negatively impact performance is the greatest issue. Code based animations, be it CSS, SVG, \<canvas>, webGL or other JavaScript animations, can cause performance issues even if the bandwidth footprint is small. These animations can consume CPU and/or cause jank.
+For animated media, such as video and animated gifs, the main performance concern is file size - downloading the file fast enough to not negatively impact performance is the greatest issue. Code based animations, be it CSS, SVG, `<canvas>`, webGL or other JavaScript animations, can cause performance issues even if the bandwidth footprint is small. These animations can consume CPU and/or cause jank.
 
 Users expect all interface interactions to be smooth and all user interfaces to be responsive. Animation can help make a site feel faster and responsive, but animations can also make a site feel slower and janky if not done correctly. Responsive user interfaces have a frame rate of 60 frames per second (fps). While it is not always possible to maintain 60fps, it is important to maintain a high and steady frame rate for all animations.
 

package.json

@@ -25,7 +25,7 @@
     "fix:fm": "node scripts/front-matter_linter.js --fix true",
     "fix:js": "prettier -w \"**/*.(m)?js\"",
     "fix:json": "prettier -w \"**/*.json(c)?\"",
-    "fix:md": "markdownlint-cli2 --fix \"**/*.md\" && prettier -w \"**/*.md\"",
+    "fix:md": "markdownlint-cli2 --fix \"**/*.md\"",
     "fix:yml": "prettier -w \"**/*.yml\"",
     "lint:fm": "node scripts/front-matter_linter.js",
     "lint:js": "prettier -c \"**/*.(m)?js\"",