Fixing MD046 errors part 2

src/guides/v2.3/frontend-dev-guide/css-guide/css_quick_guide_approach.md

@@ -15,14 +15,14 @@ To extend the parent theme's styles in your theme:
 1. In your theme directory, create a `web/css/source` sub-directory.
 1. Create a `_extend.less` file there. The path to it looks like following:
 
-    ```tree
-    <theme_dir>/
-    │  ├── web/
-    │  │   ├── css/
-    │  │   │   ├── source/
-    │  │   │      ├──_extend.less
-    ...
-    ```
+   ```tree
+   <theme_dir>/
+   │  ├── web/
+   │  │   ├── css/
+   │  │   │   ├── source/
+   │  │   │      ├──_extend.less
+   ...
+   ```
 
 1. Add your Less code in this file.
 
@@ -112,6 +112,7 @@ To extend a Module's styles in your theme:
                ├──_extend.less
    ...
    ```
+
 1. Add additional styles in the `_extend.less` file.
 
 For example, to extend the Magento_Review module's style, the directory path should be `<your_theme_dir>/Magento_Review/web/css/source/_extend.less`.
@@ -132,6 +133,7 @@ To override module styles in your theme:
                ├──_module.less
    ...
    ```
+
    This file overrides the `_module.less` file of the specific module.
 
 1. Add your styles in the `_module.less` file.

src/guides/v2.3/frontend-dev-guide/css-topics/css-overview.md

@@ -48,15 +48,15 @@ OrangeCo wants to change the color of the primary buttons to orange. To achieve
 1. Create a new Orange theme, which inherits from the Blank [theme](https://glossary.magento.com/theme).
 1. In the Orange theme directory add the overriding `app/design/frontend/OrangeCo/orange/web/css/source/_theme.less` file with the following code:
 
-    ```less
-    //  Primary button
-    @button-primary__color: @color-white;
-    @button-primary__hover__color: @color-white;
-    @button-primary__background: @color-orange-red1;
-    @button-primary__hover__background: @color-orange-red4;
-    @button-primary__border: 1px solid @color-orange-red2;
-    @button-primary__hover__border: 1px solid @color-orange-red2;
-    ```
+   ```less
+   //  Primary button
+   @button-primary__color: @color-white;
+   @button-primary__hover__color: @color-white;
+   @button-primary__background: @color-orange-red1;
+   @button-primary__hover__background: @color-orange-red4;
+   @button-primary__border: 1px solid @color-orange-red2;
+   @button-primary__hover__border: 1px solid @color-orange-red2;
+   ```
 
 When OrangeCo [applies their theme]({{ page.baseurl }}/frontend-dev-guide/themes/theme-apply.html), the primary buttons will look like on the following image:
 

src/guides/v2.3/frontend-dev-guide/css-topics/using-fonts.md

@@ -19,37 +19,37 @@ To ensure the stability of your customizations and prevent upgrades from overwri
 
 1. If you build a theme using the Magento UI library, declare the font by adding the `.lib-font-face` [mixin](https://glossary.magento.com/mixin) to the `app/design/frontend/<your_vendor_name>/<your_theme_name>/web/css/source/_typography.less` file:
 
-    ```css
-    .lib-font-face(
-        @family-name:'<any_font_name>',
-        @font-path: '@{baseDir}fonts/<path_to_font_file>',
-        @font-weight: <font_weight>,
-        @font-style: <font_style>
-        @font-display: <auto|block|fallback|option|swap>
-    );
-    ```
-
-    Where:
-
-    *  `@{baseDir}` stands for the `app/design/frontend/<you_vendor_name>/<your_theme_name>/web` directory.
-    *  `<path_to_font_file>` includes the font file name, but without the extension. For example, `@font-path: '@{baseDir}fonts/Luma-Icons'` for the font stored in `web/fonts/Luma-Icons.woff`.
-
-    The mixin generates the CSS, which includes the font. The following example shows how to generate CSS for the Open Sans font in the Blank theme:
-
-    ```css
-    @font-face {
-        font-family: 'Open Sans';
-        src: url('../fonts/opensans/light/opensans-300.eot');
-        src: url('../fonts/opensans/light/opensans-300.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans/light/opensans-300.woff2') format('woff2'), url('../fonts/opensans/light/opensans-300.woff') format('woff'), url('../fonts/opensans/light/opensans-300.ttf') format('truetype'), url('../fonts/opensans/light/opensans-300.svg#Open Sans') format('svg');
-        font-weight: 300;
-        font-style: normal
-        font-display: swap;
-    }
-    ```
-
-    `@font-display: swap` is declared by default for Magento Blank theme in `app/design/frontend/Magento/blank/web/css/source/_typography.less`.
-
-    Fallback web fonts that are used by default in Magento are located in `lib/web/css/source/lib/variables/_typography.less`.
+   ```css
+   .lib-font-face(
+       @family-name:'<any_font_name>',
+       @font-path: '@{baseDir}fonts/<path_to_font_file>',
+       @font-weight: <font_weight>,
+       @font-style: <font_style>
+       @font-display: <auto|block|fallback|option|swap>
+   );
+   ```
+
+   Where:
+
+      *  `@{baseDir}` stands for the `app/design/frontend/<you_vendor_name>/<your_theme_name>/web` directory.
+      *  `<path_to_font_file>` includes the font file name, but without the extension. For example, `@font-path: '@{baseDir}fonts/Luma-Icons'` for the font stored in `web/fonts/Luma-Icons.woff`.
+
+   The mixin generates the CSS, which includes the font. The following example shows how to generate CSS for the Open Sans font in the Blank theme:
+
+   ```css
+   @font-face {
+       font-family: 'Open Sans';
+       src: url('../fonts/opensans/light/opensans-300.eot');
+       src: url('../fonts/opensans/light/opensans-300.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans/light/opensans-300.woff2') format('woff2'), url('../fonts/opensans/light/opensans-300.woff') format('woff'), url('../fonts/opensans/light/opensans-300.ttf') format('truetype'), url('../fonts/opensans/light/opensans-300.svg#Open Sans') format('svg');
+       font-weight: 300;
+       font-style: normal
+       font-display: swap;
+   }
+   ```
+
+   `@font-display: swap` is declared by default for Magento Blank theme in `app/design/frontend/Magento/blank/web/css/source/_typography.less`.
+
+   Fallback web fonts that are used by default in Magento are located in `lib/web/css/source/lib/variables/_typography.less`.
 
 ## `<font>` head type
 

src/guides/v2.3/frontend-dev-guide/layouts/layout-practice.md

@@ -93,7 +93,7 @@ Other modules use this block to add their specific links to the header using the
 
 The Luma theme [moves]({{ page.baseurl }}/frontend-dev-guide/layouts/xml-instructions.html#fedg_layout_xml-instruc_ex_mv) the `top.links` block to the new `customer` block in the extending layout file.
 
-    <Magento_luma_theme_dir>/Magento_Customer/layout/default.xml
+`<Magento_luma_theme_dir>/Magento_Customer/layout/default.xml`
 
 ```xml
 <referenceBlock name="header.links">
@@ -170,7 +170,7 @@ OrangeCo needs to create a new block, say, `header.links`, in the `header.panel`
 
 So the following [extending]({{ page.baseurl }}/frontend-dev-guide/layouts/layout-extend.html) layout is added in the Orange theme:
 
-    app/design/frontend/OrangeCo/orange/Magento_Theme/layout/default.xml
+`app/design/frontend/OrangeCo/orange/Magento_Theme/layout/default.xml`
 
 ```xml
 <?xml version="1.0"?>

src/guides/v2.3/frontend-dev-guide/templates/template-email.md

@@ -97,7 +97,9 @@ Some email clients (for example, Gmail) support only CSS styles that have been a
 
 The `<Magento_Email_module_dir>/view/frontend/email/header.html` file contains an `inlinecss` directive:
 
-    {% raw %}{{inlinecss file="css/email-inline.css"}}{% endraw %}
+```html
+{% raw %}{{inlinecss file="css/email-inline.css"}}{% endraw %}
+```
 
 The `inlinecss` directive tells Magento which files to apply as inline styles on the email template.
 
@@ -352,10 +354,12 @@ To set those values:
 
 The sales emails are configured to display all of the above values, if they're configured in the admin. If you want to add those values to other email templates, you can use the following variables:
 
-    {% raw %}{{var store.getFrontendName()}}{% endraw %}
-    {% raw %}{{var store_email}}{% endraw %}
-    {% raw %}{{var store_phone}}{% endraw %}
-    {% raw %}{{var store_hours}}{% endraw %}
+```text
+{% raw %}{{var store.getFrontendName()}}{% endraw %}
+{% raw %}{{var store_email}}{% endraw %}
+{% raw %}{{var store_phone}}{% endraw %}
+{% raw %}{{var store_hours}}{% endraw %}
+```
 
 ## Localization {#localization}
 

src/guides/v2.3/frontend-dev-guide/themes/js-bundling.md

@@ -15,35 +15,35 @@ JavaScript bundling does not work unless Magento is in [production mode][product
 
 1. From the Magento root directory, switch to production mode:
 
-    ```bash
-    bin/magento deploy:mode:set production
-    ```
+   ```bash
+   bin/magento deploy:mode:set production
+   ```
 
 1. Enable JavaScript bundling:
 
-    ```bash
-    bin/magento config:set dev/js/enable_js_bundling 1
-    ```
+   ```bash
+   bin/magento config:set dev/js/enable_js_bundling 1
+   ```
 
 1. Optimize bundling by minifying JavaScript files:
 
-    ```bash
-    bin/magento config:set dev/js/minify_files 1
-    ```
+   ```bash
+   bin/magento config:set dev/js/minify_files 1
+   ```
 
 1. Enable cache busting on static file URLs. This ensures users get the latest version of the assets anytime they update:
 
-    ```bash
-    bin/magento config:set dev/static/sign 1
-    ```
+   ```bash
+   bin/magento config:set dev/static/sign 1
+   ```
 
 1. To configure JavaScript bundling, you must disable Javascript file merging. Bundling will not work as the merging of files excludes bundling:
 
-    ```bash
-    bin/magento config:set dev/js/merge_files 0
-    ```
+   ```bash
+   bin/magento config:set dev/js/merge_files 0
+   ```
 
-    For example, when `Sign Static Files` is disabled (which is the default: `config:set dev/static/sign 0`), the URL to a static file might look like this: `/static/frontend/Magento/luma/en_US/mage/dataPost.js`. But when you enable the setting (`config:set dev/static/sign 1`), the same URL might look something like this: `static/version40s2f9ef/frontend/Magento/luma/en_US/mage/dataPost.js`, with a version number added as shown. The next time this file is updated (with `bin/magento setup:static-content:deploy`), a new version will be generated, causing the browser to download a new file from the server, thus busting the browser's cache.
+   For example, when `Sign Static Files` is disabled (which is the default: `config:set dev/static/sign 0`), the URL to a static file might look like this: `/static/frontend/Magento/luma/en_US/mage/dataPost.js`. But when you enable the setting (`config:set dev/static/sign 1`), the same URL might look something like this: `static/version40s2f9ef/frontend/Magento/luma/en_US/mage/dataPost.js`, with a version number added as shown. The next time this file is updated (with `bin/magento setup:static-content:deploy`), a new version will be generated, causing the browser to download a new file from the server, thus busting the browser's cache.
 
 ## How bundling works in Magento
 

src/guides/v2.3/frontend-dev-guide/tools/using_grunt.md

@@ -24,9 +24,9 @@ Magento has built-in Grunt tasks configured, but there are still several steps y
 
 1. Install Grunt CLI tool globally. To do this, run the following command in a command prompt:
 
-    ```bash
-    npm install -g grunt-cli
-    ```
+   ```bash
+   npm install -g grunt-cli
+   ```
 
 1. From the `<Magento_root>` directory, copy and paste the contents of the following files:
 
@@ -36,11 +36,17 @@ Magento has built-in Grunt tasks configured, but there are still several steps y
 
 1. Install (or refresh) the `node.js` project dependency, including Grunt, for your Magento instance. To do this, run the following commands in a command prompt:
 
-    ```bash
-    cd your_Magento_instance_directory
-    npm install
-    npm update
-    ```
+   ```bash
+   cd your_Magento_instance_directory
+   ```
+
+   ```bash
+   npm install
+   ```
+
+   ```bash
+   npm update
+   ```
 
 1. (Optional) If you want to use Grunt for "watching" changes automatically, without reloading pages in a browser each time, install the [LiveReload extension](http://livereload.com/extensions/) in your browser.
 
@@ -88,7 +94,7 @@ To use a custom file for Grunt configuration:
    Example:
    If your custom configuration file `local-themes.js` is located in the `<magento_root>/dev/tools/grunt/configs` directory, the following is already set in your `grunt-config.json`:
 
-   ```config
+   ```json
    {
        "themes": "dev/tools/grunt/configs/local-themes"
    }
@@ -102,7 +108,7 @@ You can also use the other way to declare a custom config file:
 
 1. In your Grunt related scripts, in the file router set the alias and path to the default configuration file. For example, for the `themes.js` configuration file this would look like following:
 
-   ```config
+   ```js
    filesRouter.set('themes', 'dev/tools/grunt/configs/themes');
    ```
 
@@ -116,12 +122,12 @@ To tell Grunt to use a custom configuration file, instead of the default one, ad
 
 1. Require file-router:
 
-   ```config
+   ```js
    var fileRouter = require('/files-router');
    ```
 
 1. Call the `get(%file_alias%)` method to get the configuration file.
 
-   ```config
+   ```js
    var themes = fileRouter.get('themes');
    ```

src/guides/v2.3/frontend-dev-guide/translations/translate_practice.md

@@ -25,21 +25,23 @@ To override the strings, OrangeCo plans to use the `en_US.csv` dictionary file.
 
 1. Run the [i18n (internationalization) tool] to generate the en_US dictionary for the `orange` theme:
 
-    ```bash
-    php magento2/bin/magento i18n:collect-phrases --output="magento2/app/design/frontend/OrangeCo/orange/i18n/en_US.csv" magento2/app/design/frontend/OrangeCo/orange
-    ```
+   ```bash
+   php magento2/bin/magento i18n:collect-phrases --output="magento2/app/design/frontend/OrangeCo/orange/i18n/en_US.csv" magento2/app/design/frontend/OrangeCo/orange
+   ```
 
 1. Open the newly generated `magento2/app/design/frontend/OrangeCo/orange/i18n/en_US.csv` file and add the following rows:
-    ```text
-    "Add to Cart", "Purchase"
-    "Add to Compare", "Compare"
-    "Add to Wish List", "Wishlist"
-    ```
+
+   ```text
+   "Add to Cart", "Purchase"
+   "Add to Compare", "Compare"
+   "Add to Wish List", "Wishlist"
+   ```
+
 1. Run the `deploy` command to get localization changes:
 
-    ```bash
-     bin/magento setup:static-content:deploy
-    ```
+   ```bash
+   bin/magento setup:static-content:deploy
+   ```
 
 ## Results
 

src/guides/v2.3/frontend-dev-guide/translations/translate_theory.md

@@ -60,29 +60,29 @@ To ensure that the text you add in `.html` templates of UI components is added t
 
 -  When a string is added in the scope of an HTML element, both of the following examples result in the same output:
 
-    ```html
-    <span data-bind="i18n: 'Sign In'"></span>
-    ```
+   ```html
+   <span data-bind="i18n: 'Sign In'"></span>
+   ```
 
-    ```html
-    <span translate="'Sign In'"></span>
-    ```
+   ```html
+   <span translate="'Sign In'"></span>
+   ```
 
 -  When a string is added with no binding to an HTML element, both of the following examples result in the same output:
 
-    ```html
-    <!-- ko i18n: 'You have no items in your shopping cart.' --><!-- /ko -->
-    ```
+   ```html
+   <!-- ko i18n: 'You have no items in your shopping cart.' --><!-- /ko -->
+   ```
 
-    ```html
-    <translate args="'You have no items in your shopping cart.'"/>
-    ```
+   ```html
+   <translate args="'You have no items in your shopping cart.'"/>
+   ```
 
 -  When a string is added as an attribute of an HTML element:
 
-    ```html
-    <input type="text" data-bind="attr: {placeholder: $t('First Name')}" />
-    ```
+   ```html
+   <input type="text" data-bind="attr: {placeholder: $t('First Name')}" />
+   ```
 
 ## Strings added in UI components configuration files {#add_strings_ui_xml}