From c01ce99db7ad48630831b7c284f4e376bc3464d8 Mon Sep 17 00:00:00 2001
From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com>
Date: Mon, 30 Sep 2024 11:54:09 +0530
Subject: [PATCH] fix(ci/markdownlint): add a search-replace rule to put some
 html tags in code spans

---
 .markdownlint.jsonc                                        | 7 +++++++
 files/en-us/learn/forms/index.md                           | 2 +-
 files/en-us/learn/forms/styling_web_forms/index.md         | 2 +-
 .../video_and_audio_content/index.md                       | 6 +++---
 .../client-side_web_apis/drawing_graphics/index.md         | 2 +-
 files/en-us/learn/learning_and_getting_help/index.md       | 4 ++--
 .../cross_browser_testing/feature_detection/index.md       | 2 +-
 .../cross_browser_testing/html_and_css/index.md            | 2 +-
 .../page_types/html_element_page_template/index.md         | 2 +-
 files/en-us/web/api/htmlelement/change_event/index.md      | 2 +-
 files/en-us/web/api/htmlmediaelement/index.md              | 2 +-
 files/en-us/web/html/constraint_validation/index.md        | 2 +-
 files/en-us/web/html/element/a/index.md                    | 2 +-
 files/en-us/web/html/element/audio/index.md                | 4 ++--
 files/en-us/web/html/element/input/index.md                | 2 +-
 files/en-us/web/media/audio_and_video_delivery/index.md    | 2 +-
 .../animation_performance_and_frame_rate/index.md          | 2 +-
 package.json                                               | 2 +-
 18 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/.markdownlint.jsonc b/.markdownlint.jsonc
index 9d25f924cbc63f8..336c04696420dc0 100644
--- a/.markdownlint.jsonc
+++ b/.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",
+      },
     ],
   },
 }
diff --git a/files/en-us/learn/forms/index.md b/files/en-us/learn/forms/index.md
index d6e0009007f79ef..4785bae1f41d7e7 100644
--- a/files/en-us/learn/forms/index.md
+++ b/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)
diff --git a/files/en-us/learn/forms/styling_web_forms/index.md b/files/en-us/learn/forms/styling_web_forms/index.md
index 9c6c006855492cd..29577d77e9bead5 100644
--- a/files/en-us/learn/forms/styling_web_forms/index.md
+++ b/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.
 
diff --git a/files/en-us/learn/html/multimedia_and_embedding/video_and_audio_content/index.md b/files/en-us/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
index bb01b8d7b00d3f9..d88cd90f1b07386 100644
--- a/files/en-us/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
+++ b/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:
 
diff --git a/files/en-us/learn/javascript/client-side_web_apis/drawing_graphics/index.md b/files/en-us/learn/javascript/client-side_web_apis/drawing_graphics/index.md
index ba4b789aa5e992b..ca3800fc1cee2f4 100644
--- a/files/en-us/learn/javascript/client-side_web_apis/drawing_graphics/index.md
+++ b/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:
 
diff --git a/files/en-us/learn/learning_and_getting_help/index.md b/files/en-us/learn/learning_and_getting_help/index.md
index 277a2224e4cb9d7..72d190a5534d2d3 100644
--- a/files/en-us/learn/learning_and_getting_help/index.md
+++ b/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
diff --git a/files/en-us/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md b/files/en-us/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md
index 63e19744803af89..59a381396791c2b 100644
--- a/files/en-us/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md
+++ b/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")}}.
 
diff --git a/files/en-us/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md b/files/en-us/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md
index bb1f0eb7be347d6..865cb4ef799a701 100644
--- a/files/en-us/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md
+++ b/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).
 
diff --git a/files/en-us/mdn/writing_guidelines/page_structures/page_types/html_element_page_template/index.md b/files/en-us/mdn/writing_guidelines/page_structures/page_types/html_element_page_template/index.md
index 7c1e5643ba20174..e53d2e51119c992 100644
--- a/files/en-us/mdn/writing_guidelines/page_structures/page_types/html_element_page_template/index.md
+++ b/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_.
diff --git a/files/en-us/web/api/htmlelement/change_event/index.md b/files/en-us/web/api/htmlelement/change_event/index.md
index e9c9c8a773744fa..e8d45fa7d11c59e 100644
--- a/files/en-us/web/api/htmlelement/change_event/index.md
+++ b/files/en-us/web/api/htmlelement/change_event/index.md
@@ -35,7 +35,7 @@ A generic {{domxref("Event")}}.
 
 ## Examples
 
-### \<select> element
+### `<select>` element
 
 #### HTML
 
diff --git a/files/en-us/web/api/htmlmediaelement/index.md b/files/en-us/web/api/htmlmediaelement/index.md
index d4c9a2688b42ef6..103f2d107c6bae3 100644
--- a/files/en-us/web/api/htmlmediaelement/index.md
+++ b/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')}}
diff --git a/files/en-us/web/html/constraint_validation/index.md b/files/en-us/web/html/constraint_validation/index.md
index 0f878d6fd399127..d27e2480403ff9b 100644
--- a/files/en-us/web/html/constraint_validation/index.md
+++ b/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
 
diff --git a/files/en-us/web/html/element/a/index.md b/files/en-us/web/html/element/a/index.md
index ee56d24c8b9bac4..f72c385a634c9e5 100644
--- a/files/en-us/web/html/element/a/index.md
+++ b/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:
 
diff --git a/files/en-us/web/html/element/audio/index.md b/files/en-us/web/html/element/audio/index.md
index 6347685ed8b2062..c21a1a2231cadac 100644
--- a/files/en-us/web/html/element/audio/index.md
+++ b/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:
 
diff --git a/files/en-us/web/html/element/input/index.md b/files/en-us/web/html/element/input/index.md
index 992dbcf18a66a41..16142ebdc57b883 100644
--- a/files/en-us/web/html/element/input/index.md
+++ b/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`.
 
diff --git a/files/en-us/web/media/audio_and_video_delivery/index.md b/files/en-us/web/media/audio_and_video_delivery/index.md
index eb32aacdee74204..f4a2904d84a083c 100644
--- a/files/en-us/web/media/audio_and_video_delivery/index.md
+++ b/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
 
diff --git a/files/en-us/web/performance/animation_performance_and_frame_rate/index.md b/files/en-us/web/performance/animation_performance_and_frame_rate/index.md
index ba88e222e3b724a..8ea1af0f83da890 100644
--- a/files/en-us/web/performance/animation_performance_and_frame_rate/index.md
+++ b/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.
 
diff --git a/package.json b/package.json
index 185aae3d6fb0a6e..082f64ddc65e3ad 100644
--- a/package.json
+++ b/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\"",