Merge branch 'main' into markers

files/en-us/learn/getting_started_with_the_web/css_basics/index.md

@@ -169,7 +169,8 @@ Now that we've explored some CSS fundamentals, let's improve the appearance of t
    }
    ```
 
-   > **Note:** Anything in CSS between `/*` and `*/` is a **CSS comment**. The browser ignores comments as it renders the code. CSS comments are a way for you to write helpful notes about your code or logic.
+   > [!NOTE]
+   > Anything in CSS between `/*` and `*/` is a **CSS comment**. The browser ignores comments as it renders the code. CSS comments are a way for you to write helpful notes about your code or logic.
 
 4. Now let's set font sizes for elements that will have text inside the HTML body ({{htmlelement("Heading_Elements", "<h1>")}}, {{htmlelement("li")}}, and {{htmlelement("p")}}). We'll also center the heading. Finally, let's expand the second ruleset (below) with settings for line height and letter spacing to make body content more readable.
 

files/en-us/learn/getting_started_with_the_web/publishing_your_website/index.md

@@ -64,11 +64,13 @@ Now let's examine how to easily publish your site via GitHub Pages.
    Check the "_Initialize this repository with a README"_ box. Then click _Create repository_.![A sample of a GitHub repository page](github-create-repo.png)
 4. Drag and drop the content of your website folder into your repository. Then click _Commit changes_.
 
-   > **Note:** Make sure your folder has an `index.html` file.
+   > [!NOTE]
+   > Make sure your folder has an `index.html` file.
 
 5. Navigate your browser to _username_.github.io to see your website online. For example, for the username _chrisdavidmills_, go to [_chrisdavidmills_.github.io](https://chrisdavidmills.github.io/).
 
-   > **Note:** It may take a few minutes for your website to go live. If your website does not display immediately, wait a few minutes. Try again.
+   > [!NOTE]
+   > It may take a few minutes for your website to go live. If your website does not display immediately, wait a few minutes. Try again.
 
 To learn more, see [GitHub Pages Help](https://docs.github.com/en/pages/getting-started-with-github-pages).
 

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

@@ -286,7 +286,8 @@ Now let's look at how to draw a circle in canvas. This is accomplished using the
 
    `arc()` takes six parameters. The first two specify the position of the arc's center (X and Y, respectively). The third is the circle's radius, the fourth and fifth are the start and end angles at which to draw the circle (so specifying 0 and 360 degrees gives us a full circle), and the sixth parameter defines whether the circle should be drawn counterclockwise (anticlockwise) or clockwise (`false` is clockwise).
 
-   > **Note:** 0 degrees is horizontally to the right.
+   > [!NOTE]
+   > 0 degrees is horizontally to the right.
 
 2. Let's try adding another arc:
 

files/en-us/learn/javascript/first_steps/arrays/index.md

@@ -84,7 +84,8 @@ Items in an array are numbered, starting from zero. This number is called the it
    // shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ]
    ```
 
-   > **Note:** We've said it before, but just as a reminder — JavaScript starts indexing arrays at zero!
+   > [!NOTE]
+   > We've said it before, but just as a reminder — JavaScript starts indexing arrays at zero!
 
 3. Note that an array inside an array is called a multidimensional array. You can access an item inside an array that is itself inside another array by chaining two sets of square brackets together. For example, to access one of the items inside the array that is the third item inside the `random` array (see previous section), we could do something like this:
 

files/en-us/learn/javascript/first_steps/what_went_wrong/index.md

@@ -65,7 +65,8 @@ Earlier on in the course we got you to type some simple JavaScript commands into
 
 3. If we look at line 86 in our code editor, we'll find this line:
 
-   > **Warning:** Error message may not be on line 86.
+   > [!WARNING]
+   > Error message may not be on line 86.
    >
    > If you are using any code editor with an extension that launches a live server on your local machine, this will cause extra code to be injected. Because of this, the developer tools will list the error as occurring on a line that is not 86.
 
@@ -97,7 +98,8 @@ Earlier on in the course we got you to type some simple JavaScript commands into
 
    It's the same error, but different browsers describe it in a different way.
 
-   > **Note:** This error didn't come up as soon as the page was loaded because this error occurred inside a function (inside the `checkGuess() { }` block). As you'll learn in more detail in our later [functions article](/en-US/docs/Learn/JavaScript/Building_blocks/Functions), code inside functions runs in a separate scope than code outside functions. In this case, the code was not run and the error was not thrown until the `checkGuess()` function was run by line 86.
+   > [!NOTE]
+   > This error didn't come up as soon as the page was loaded because this error occurred inside a function (inside the `checkGuess() { }` block). As you'll learn in more detail in our later [functions article](/en-US/docs/Learn/JavaScript/Building_blocks/Functions), code inside functions runs in a separate scope than code outside functions. In this case, the code was not run and the error was not thrown until the `checkGuess()` function was run by line 86.
 
 4. The line number given in the error is 80. Have a look at line 80, and you'll see the following code:
 

files/en-us/learn/performance/multimedia/index.md

@@ -80,7 +80,8 @@ Other formats improve on JPEG's capabilities regarding compression, but are not
 
 - [WebP](/en-US/docs/Web/Media/Formats/Image_types#webp_image) — Excellent choice for both images and animated images. WebP offers much better compression than PNG or JPEG with support for higher color depths, animated frames, transparency, etc. (but not progressive display.). Supported by all major browsers except Safari 14 on macOS desktop Big Sur or earlier.
 
-  > **Note:** Despite Apple [announcing support for WebP in Safari 14](https://developer.apple.com/videos/play/wwdc2020/10663/?time=1174), Safari versions earlier than 16.0 don't display `.webp` images successfully on macOS desktop versions earlier than 11/Big Sur. Safari for iOS 14 _does_ display `.webp` images successfully.
+  > [!NOTE]
+  > Despite Apple [announcing support for WebP in Safari 14](https://developer.apple.com/videos/play/wwdc2020/10663/?time=1174), Safari versions earlier than 16.0 don't display `.webp` images successfully on macOS desktop versions earlier than 11/Big Sur. Safari for iOS 14 _does_ display `.webp` images successfully.
 
 - [AVIF](/en-US/docs/Web/Media/Formats/Image_types#avif_image) — Good choice for both images and animated images due to high performance and royalty-free image format (even more efficient than WebP, but not as widely supported). It is now supported on Chrome, Edge, Opera, and Firefox. [Squoosh](https://squoosh.app) is a good online tool for converting previous image formats to AVIF.
 - **JPEG2000** — once to be the successor to JPEG but only supported in Safari. Doesn't support progressive display either.

files/en-us/learn/server-side/django/deployment/index.md

@@ -398,7 +398,8 @@ We are choosing to use PythonAnywhere for several reasons:
 - PythonAnywhere has a [free beginner plan](https://www.pythonanywhere.com/pricing/) that is _really_ free, albeit with some limitations.
   The fact that it is affordable for all developers is really important to MDN!
 
-  > **Note:** This tutorial has been hosted on Heroku, Railway, and now PythonAnywhere, migrating when the previously free plans were discontinued.
+  > [!NOTE]
+  > This tutorial has been hosted on Heroku, Railway, and now PythonAnywhere, migrating when the previously free plans were discontinued.
   > We've chosen PythonAnywhere because we think this plan is likely to remain free.
   > We've kept the Railway example too, which is not free, for comparison, and because it allows us to more easily demonstrate features such as integration with a Postgres databases running on a different service.
 
@@ -471,7 +472,8 @@ We'll also configure the default database and collect static files so that they
 4. Next get the library sources from GitHub.
    PythonAnywhere expects you to install applications in a folder named after your site URL.
 
-   > **Note:** Because we're using the free account you can only name your account `<your_pythonaware_username>.pythonanywhere.com` (for example, if your username is "Odtsetseg" you will have to put the local library source into a folder named `odtsetseg.pythonanywhere.com`).
+   > [!NOTE]
+   > Because we're using the free account you can only name your account `<your_pythonaware_username>.pythonanywhere.com` (for example, if your username is "Odtsetseg" you will have to put the local library source into a folder named `odtsetseg.pythonanywhere.com`).
 
    Enter the following command to clone your library sources into an appropriately named folder (you will need to replace the username values with your own name):
 
@@ -494,7 +496,8 @@ We'll also configure the default database and collect static files so that they
    python manage.py migrate
    ```
 
-   > **Note:** For the Railway example we will [Configure a Postgres database](#provision_and_connect_a_postgres_sql_database), and connect to it by setting the `DATABASE_URL` environment variable.
+   > [!NOTE]
+   > For the Railway example we will [Configure a Postgres database](#provision_and_connect_a_postgres_sql_database), and connect to it by setting the `DATABASE_URL` environment variable.
    > It is important that `migrate` is called _after_ configuring what database to use database.
 
 7. Collect all the static files into a location where they can be [served in production](#serving_static_files_in_production):

files/en-us/learn/server-side/django/development_environment/index.md

@@ -441,7 +441,8 @@ The steps are:
    - Enter a new repository description: "Local Library website written in Django".
    - Select "Public" for the repository (the default).
 
-     > **Warning:** This will make _all_ source code visible.
+     > [!WARNING]
+     > This will make _all_ source code visible.
      > Remember not to store credentials or other sensitive material in your repo unless it is private.
 
    - Choose **Python** in the _Add .gitignore_ selection list.
@@ -483,7 +484,8 @@ This is a useful change to make, but mostly we're doing it to show you how to pu
 
 1. In the command prompt/terminal we first "fetch" (get) and then pull (get and merge into the current branch) the latest version of the source from GitHub:
 
-   > **Note:** This step isn't strictly necessary as we have just cloned the source and know it is up to date.
+   > [!NOTE]
+   > This step isn't strictly necessary as we have just cloned the source and know it is up to date.
    > However in general you should update your sources from GitHub before making changes.
 
    ```bash

files/en-us/learn/server-side/django/home_page/index.md

@@ -404,7 +404,8 @@ Here are a couple of tasks to test your familiarity with model queries, views, a
 
 1. The LocalLibrary [base template](#the_locallibrary_base_template) includes a `title` block. Override this block in the [index template](#the_index_template) and create a new title for the page.
 
-   > **Note:** The section [Extending templates](#extending_templates) explains how to create blocks and extend a block in another template.
+   > [!NOTE]
+   > The section [Extending templates](#extending_templates) explains how to create blocks and extend a block in another template.
 
 2. Modify the [view](#view_function-based) to generate counts for _genres_ and _books_ that contain a particular word (case insensitive), and pass the results to the `context`. You accomplish this in a similar way to creating and using `num_books` and `num_instances_available`. Then update the [index template](#the_index_template) to include these variables.
 

files/en-us/learn/server-side/django/models/index.md

@@ -129,7 +129,8 @@ The following common arguments can be used when declaring many/most of the diffe
   If no field is specified as the primary key, Django will automatically add a field for this purpose.
   The type of auto-created primary key fields can be specified for each app in [`AppConfig.default_auto_field`](https://docs.djangoproject.com/en/5.0/ref/applications/#django.apps.AppConfig.default_auto_field) or globally in the [`DEFAULT_AUTO_FIELD`](https://docs.djangoproject.com/en/5.0/ref/settings/#std:setting-DEFAULT_AUTO_FIELD) setting.
 
-  > **Note:** Apps created using **manage.py** set the type of the primary key to a [BigAutoField](https://docs.djangoproject.com/en/5.0/ref/models/fields/#bigautofield).
+  > [!NOTE]
+  > Apps created using **manage.py** set the type of the primary key to a [BigAutoField](https://docs.djangoproject.com/en/5.0/ref/models/fields/#bigautofield).
   > You can see this in the local library **catalog/apps.py** file:
   >
   > ```py

files/en-us/learn/server-side/django/skeleton_website/index.md

@@ -35,7 +35,8 @@ To get started:
 1. Use the `django-admin` tool to generate a project folder, the basic file templates, and **manage.py**, which serves as your project management script.
 2. Use **manage.py** to create one or more _applications_.
 
-   > **Note:** A website may consist of one or more sections. For example, main site, blog, wiki, downloads area, etc. Django encourages you to develop these components as separate _applications_, which could then be re-used in different projects if desired.
+   > [!NOTE]
+   > A website may consist of one or more sections. For example, main site, blog, wiki, downloads area, etc. Django encourages you to develop these components as separate _applications_, which could then be re-used in different projects if desired.
 
 3. Register the new applications to include them in the project.
 4. Hook up the **url/path** mapper for each application.

files/en-us/learn/server-side/django/web_application_security/index.md

@@ -52,7 +52,8 @@ Django's template system protects you against the majority of XSS attacks by [es
    `<script>alert('Test alert');</script>`.
    ![Author Form XSS test](author_create_form_alert_xss.png)
 
-   > **Note:** This is a harmless script that, if executed, will display an alert box in your browser. If the alert is displayed when you submit the record then the site is vulnerable to XSS threats.
+   > [!NOTE]
+   > This is a harmless script that, if executed, will display an alert box in your browser. If the alert is displayed when you submit the record then the site is vulnerable to XSS threats.
 
 5. Press **Submit** to save the record.
 6. When you save the author it will be displayed as shown below. Because of the XSS protections the `alert()` should not be run. Instead the script is displayed as plain text.

files/en-us/learn/server-side/express_nodejs/deployment/index.md

@@ -364,7 +364,8 @@ The steps are:
    - Choose your preferred license in the _Add license_ selection list.
    - Check **Initialize this repository with a README**.
 
-   > **Warning:** The default "Public" access will make _all_ source code — including your database username and password — visible to anyone on the internet! Make sure the source code reads credentials _only_ from environment variables and does not have any credentials hard-coded.
+   > [!WARNING]
+   > The default "Public" access will make _all_ source code — including your database username and password — visible to anyone on the internet! Make sure the source code reads credentials _only_ from environment variables and does not have any credentials hard-coded.
    >
    > Otherwise, select the "Private" option to allow only selected people to see the source code.
 

files/en-us/learn/server-side/express_nodejs/development_environment/index.md

@@ -157,7 +157,8 @@ As a slightly more exciting test let's create a very basic "pure node" server th
 
    The code imports the "http" module and uses it to create a server (`createServer()`) that listens for HTTP requests on port 3000. The script then prints a message to the console about what browser URL you can use to test the server. The `createServer()` function takes as an argument a callback function that will be invoked when an HTTP request is received — this returns a response with an HTTP status code of 200 ("OK") and the plain text "Hello World".
 
-   > **Note:** Don't worry if you don't understand exactly what this code is doing yet! We'll explain our code in greater detail once we start using Express!
+   > [!NOTE]
+   > Don't worry if you don't understand exactly what this code is doing yet! We'll explain our code in greater detail once we start using Express!
 
 2. Start the server by navigating into the same directory as your `hellonode.js` file in your command prompt, and calling `node` along with the script name, like so:
 
@@ -265,7 +266,8 @@ The following steps show how you can use npm to download a package, save it into
    This imports the "express" module using `require()` and uses it to create a server (`app`) that listens for HTTP requests on port 3000 and prints a message to the console explaining what browser URL you can use to test the server.
    The `app.get()` function only responds to HTTP `GET` requests with the specified URL path ('/'), in this case by calling a function to send our _Hello World!_ message.
 
-   > **Note:** The backticks in the `` `Example app listening on port ${port}!` `` let us interpolate the value of `$port` into the string.
+   > [!NOTE]
+   > The backticks in the `` `Example app listening on port ${port}!` `` let us interpolate the value of `$port` into the string.
 
 5. You can start the server by calling node with the script in your command prompt:
 

files/en-us/learn/server-side/express_nodejs/mongoose/index.md

@@ -607,11 +607,13 @@ After logging in, you'll be taken to the [home](https://cloud.mongodb.com/v2) sc
 
    - Enter a username and password. Remember to copy and store the credentials safely as we will need them later on. Click the **Create User** button.
 
-     > **Note:** Avoid using special characters in your MongoDB user password as mongoose may not parse the connection string properly.
+     > [!NOTE]
+     > Avoid using special characters in your MongoDB user password as mongoose may not parse the connection string properly.
 
    - Enter `0.0.0.0/0` in the IP Address field. This tells MongoDB that we want to allow access from anywhere. Click the **Add Entry** button.
 
-     > **Note:** It is a best practice to limit the IP addresses that can connect to your database and other resources. Here we allow a connection from anywhere because we don't know where the request will come from after deployment.
+     > [!NOTE]
+     > It is a best practice to limit the IP addresses that can connect to your database and other resources. Here we allow a connection from anywhere because we don't know where the request will come from after deployment.
 
    - Click the **Finish and Close** button.
 
@@ -843,20 +845,23 @@ In order to test the models (and to create some example books and other items th
 
 1. Download (or otherwise create) the file [populatedb.js](https://raw.githubusercontent.com/mdn/express-locallibrary-tutorial/main/populatedb.js) inside your _express-locallibrary-tutorial_ directory (in the same level as `package.json`).
 
-   > **Note:** The code in `populatedb.js` may be useful in learning JavaScript, but understanding it is not necessary for this tutorial.
+   > [!NOTE]
+   > The code in `populatedb.js` may be useful in learning JavaScript, but understanding it is not necessary for this tutorial.
 
 2. Run the script using node in your command prompt, passing in the URL of your _MongoDB_ database (the same one you replaced the _insert_your_database_url_here_ placeholder with, inside `app.js` earlier):
 
    ```bash
    node populatedb <your MongoDB url>
    ```
 
-   > **Note:** On Windows you need to wrap the database URL inside double (").
+   > [!NOTE]
+   > On Windows you need to wrap the database URL inside double (").
    > On other operating systems you may need single (') quotation marks.
 
 3. The script should run through to completion, displaying items as it creates them in the terminal.
 
-> **Note:** Go to your database on MongoDB Atlas (in the _Collections_ tab).
+> [!NOTE]
+> Go to your database on MongoDB Atlas (in the _Collections_ tab).
 > You should now be able to drill down into individual collections of Books, Authors, Genres and BookInstances, and check out individual documents.
 
 ## Summary

files/en-us/learn/server-side/express_nodejs/skeleton_website/index.md

@@ -204,7 +204,8 @@ At this point, we have a complete skeleton project. The website doesn't actually
      ENV:DEBUG = "express-locallibrary-tutorial:*"; npm start
      ```
 
-     > **Note:** Powershell commands are not covered in this tutorial (The provided "Windows" commands assume you're using the Windows CMD prompt.)
+     > [!NOTE]
+     > Powershell commands are not covered in this tutorial (The provided "Windows" commands assume you're using the Windows CMD prompt.)
 
    - On macOS or Linux, use this command: