Code formatting

guides/m1x/install/installer-privileges_after.html

@@ -64,7 +64,7 @@ <h2 id="terms">Terminology</h2>
     <h2 id="privs-after">Setting Privileges and Ownership After You Install Magento</h2>
     <p>If you have installed Magento, you can set file system privileges and ownership as follows:</p>
     <ul><li>For a dedicated Magento server, you set ownership of files and directory as the web server user. You set privileges as 500 (directories) and 400 (files).</li>
-        <li>For a hosted Magento server on which the web server runs as the logged-in username, you set privileges as as 500 (directories) and 400 (files).</li></ul>
+        <li>For a hosted Magento server on which the web server runs as the logged-in username, you set privileges as 500 (directories) and 400 (files).</li></ul>
     <div class="msg-box important"><img src="{{ site.baseurl }}/common/images/m1x/icon-note.png" alt="note" align="left" width="40"><span><strong>Note</strong>: In both hosted and dedicated systems, you set the privileges for the <code>media/</code> and <code>var/</code> directories at 700/600 because they must be writable.</div>
 
     <p>Following is an explanation of the privileges:</p>

guides/m1x/magefordev/mage-for-dev-5.html

@@ -286,7 +286,7 @@ <h3>The Global Config and Resources</h3>
 
 <pre>Warning: include(Magentotutorial/Weblog/Model/Resource/Blogpost.php) [function.include]: failed to open stream: No such file ....</pre>
 
-<p>As you've likely intuited, we need to add a resource class for our Model. <strong>Every</strong> Model has its own resource class. Add the following class at at the following location</p>
+<p>As you've likely intuited, we need to add a resource class for our Model. <strong>Every</strong> Model has its own resource class. Add the following class at the following location</p>
 
 <pre>File: app/code/local/Magentotutorial/Weblog/Model/Resource/Blogpost.php</pre>
 <pre>

guides/v2.0/config-guide/varnish/config-varnish-configure.md

@@ -199,7 +199,7 @@ A long list of response headers display in your command prompt window. Look for
 	-   VCL_call       BACKEND_FETCH
 	-   VCL_return     fetch
 	-   BackendOpen    17 default(10.249.151.10,,8080) 10.249.151.10 60914
-	-   Backend        17 default default(10.249.151.10,,8080)
+	-   Backend        17 default(10.249.151.10,,8080)
 	-   Timestamp      Bereq: 1440449534.261791 0.000618 0.000618
 	-   ReqHeader      Host: 10.249.151.10
 	-   ReqHeader      Connection: keep-alive

guides/v2.1/config-guide/cli/config-cli-subcommands-index.md

@@ -51,14 +51,22 @@ A sample follows:
 
 Sample result:
 
-	Category Products:                                 Reindex required
-	Product Categories:                                Reindex required
-	Product Price:                                     Reindex required
-	Product EAV:                                       Reindex required
-	Stock:                                             Reindex required
-	Catalog Rule Product:                              Reindex required
-	Catalog Product Rule:                              Reindex required
-	Catalog Search:                                    Reindex required
+```
++----------------------+------------------+-----------+---------------------+---------------------+
+| Title                | Status           | Update On | Schedule Status     | Schedule Updated    |
++----------------------+------------------+-----------+---------------------+---------------------+
+| Catalog Product Rule | Reindex required | Save      |                     |                     |
+| Catalog Rule Product | Reindex required | Save      |                     |                     |
+| Catalog Search       | Ready            | Save      |                     |                     |
+| Category Products    | Reindex required | Schedule  | idle (0 in backlog) | 2018-06-28 09:45:53 |
+| Customer Grid        | Ready            | Schedule  | idle (0 in backlog) | 2018-06-28 09:45:52 |
+| Design Config Grid   | Ready            | Schedule  | idle (0 in backlog) | 2018-06-28 09:45:52 |
+| Product Categories   | Reindex required | Schedule  | idle (0 in backlog) | 2018-06-28 09:45:53 |
+| Product EAV          | Reindex required | Save      |                     |                     |
+| Product Price        | Reindex required | Save      |                     |                     |
+| Stock                | Reindex required | Save      |                     |                     |
++----------------------+------------------+-----------+---------------------+---------------------+
+```
 
 ## Reindex {#config-cli-subcommands-index-reindex}
 Use this command to reindex all or selected indexers one time only.

guides/v2.1/config-guide/varnish/config-varnish-configure.md

@@ -199,7 +199,7 @@ A long list of response headers display in your command prompt window. Look for
 	-   VCL_call       BACKEND_FETCH
 	-   VCL_return     fetch
 	-   BackendOpen    17 default(10.249.151.10,,8080) 10.249.151.10 60914
-	-   Backend        17 default default(10.249.151.10,,8080)
+	-   Backend        17 default(10.249.151.10,,8080)
 	-   Timestamp      Bereq: 1440449534.261791 0.000618 0.000618
 	-   ReqHeader      Host: 10.249.151.10
 	-   ReqHeader      Connection: keep-alive

guides/v2.1/extension-dev-guide/extension_attributes/adding-attributes.md

@@ -98,7 +98,7 @@ public function afterSave
 }
 {% endhighlight %}
 
-But if some entity doesn't have implementation to fetch extension attributes, we will always retrieve `null` and each time when we fetch extension atrributes we need to check if they are `null` - need to create them. To avoid such code duplication, we need to create `afterGet` plugin for our entity with extension attributes.
+But if some entity doesn't have implementation to fetch extension attributes, we will always retrieve `null` and each time when we fetch extension attributes we need to check if they are `null` - need to create them. To avoid such code duplication, we need to create `afterGet` plugin for our entity with extension attributes.
 
 Let's assume the product entity doesn't have any implementation of extension attributes, so our plugin might looks like this:
 

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

@@ -40,20 +40,22 @@ In the Blank theme, the buttons of the `.action.primary` class, so called *prima
 <div style="border: 1px solid #ABABAB">
 <img src="{{ site.baseurl }}/common/images/css_over1.png" alt="The default view of a product page, with the orange Add to Cart button">
 </div>
-
+<br />
 OrangeCo wants to change the color of the primary buttons to orange. To achieve this, they do the following:
-
-1. Create a new Orange theme, which inherits from the Blank {% glossarytooltip d2093e4a-2b71-48a3-99b7-b32af7158019 %}theme{% endglossarytooltip %}.
-2. In the Orange theme directory add the overriding <code>app/design/frontend/OrangeCo/orange/web/css/source/_theme.less</code> file with the following code:
-<pre>
+<ol>
+<li>Create a new Orange theme, which inherits from the Blank {% glossarytooltip d2093e4a-2b71-48a3-99b7-b32af7158019 %}theme{% endglossarytooltip %}.</li>
+<li>In the Orange theme directory add the overriding <code>app/design/frontend/OrangeCo/orange/web/css/source/_theme.less</code> file with the following code:
+{% highlight css%}
 //  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;
-</pre>
+{% endhighlight css%}
+</li>
+</ol> 
 
 When OrangeCo <a href="{{ page.baseurl }}/frontend-dev-guide/themes/theme-apply.html" target="_blank">applies their theme</a>, the primary buttons will look like on the following image:
 

guides/v2.1/frontend-dev-guide/css-topics/css-practice.md

@@ -23,15 +23,15 @@ The following image illustrates how store pages look when the Blank theme is app
 <div style="border: 1px solid #ABABAB">
 <img src="{{ site.baseurl }}/common/images/practice_blank.png" alt="product page when Blank applied">
 </div>
-
+<br />
 
 In their Grey theme, OrangeCo wants to change the color scheme from white to grey.
 
 The Grey theme directory is <code>app/design/frontend/OrangeCo/grey</code>.
 
 OrangeCo decided to use the Magento UI library, so to change the color scheme, they need to define new values for certain default LESS variables.
 To do this, they added an overriding <code>_theme.less</code> file in the <code>app/design/frontend/OrangeCo/grey/web/css/source</code> directory, with the following content:
-<pre>
+{% highlight css%}
 //  Color nesting
 @page__background-color: @color-gray20;
 @sidebar__background-color: @color-gray40;
@@ -73,8 +73,7 @@ To do this, they added an overriding <code>_theme.less</code> file in the <code>
 //  Header icons
 @header-icons-color: @color-gray89;
 @header-icons-color-hover: @color-gray60;
-
-</pre>
+{% endhighlight css%}
 
 After the Grey theme is applied (and [static files cache cleared]({{ page.baseurl }}/frontend-dev-guide/cache_for_frontdevs.html#clean_static_cache)), store pages will look like following:
 

guides/v2.1/frontend-dev-guide/css-topics/css-preprocess.md

@@ -33,13 +33,13 @@ Description
 
 For example, in one of the <a href="https://github.com/magento/magento2/blob/2.0/app/design/frontend/Magento/blank/Magento_Theme/layout/default_head_blocks.xml" target="_blank">layout files of the Magento Blank theme</a>, the following <code>.css</code> files are included:
 
-<pre>
+{% highlight HTML%}
     &lt;head&gt;
         &lt;css src=&quot;css/styles-m.css&quot; /&gt;
         &lt;css src=&quot;css/styles-l.css&quot; media=&quot;screen and (min-width: 768px)&quot;/&gt;
         &lt;css src=&quot;css/print.css&quot; media=&quot;print&quot; /&gt;
     &lt;/head&gt;
-</pre>
+{% endhighlight HTML%}
 
 The root source files for the Blank theme are:
 
@@ -159,7 +159,7 @@ To include a `.less` file using the `@magento_import` directive:
 <ol>
 <li><p>To avoid any conflicts with the original LESS syntax, <code>@magento_import</code> must be commented out with two slashes. Otherwise, the LESS preprocessor ignores it.</p>
 <p><b>Example:</b></p>
-<pre>
+{% highlight css%}
 //  Comment in a LESS document
 
 //  Standard LESS import directive
@@ -175,7 +175,7 @@ To include a `.less` file using the `@magento_import` directive:
 //@magento_import 'source/_module.less'; // Theme modules
 //@magento_import 'source/_widgets.less'; // Theme widgets
 //@magento_import 'source/_extend.less'; // Extend for minor customization
-</pre>
+{% endhighlight css%}
 </li>
 <li><p><code>@magento_import</code> must contain the file path. The path is specified relatively to the file, where the directive is called and put in either single ('') or double quotes (""). </p>
 
@@ -201,19 +201,20 @@ In the scope of static resources preprocessing, the built-in LESS preprocessor:
       </tr>
       <tr class="even">
          <td> In <code>&lt;Magento_Blank_theme_dir&gt;/web/css/styles-l.less</code> there's a following directive:
-            <pre> ..
+            {% highlight css%} 
+            ..
 //@magento_import 'source/_widgets.less'; // Theme widgets
 ..
-</pre>
+{% endhighlight css%}
          </td>
          <td> In the processed file, this results in the following:
-            <pre>
+            {% highlight css%}
 @import '../Magento_Catalog/css/source/_widgets.less';
 @import '../Magento_Cms/css/source/_widgets.less';
 @import '../Magento_Reports/css/source/_widgets.less';
 @import '../Magento_Sales/css/source/_widgets.less';
  // Theme widgets
-</pre>
+{% endhighlight css%}
          </td>
       </tr>
    </tbody>

guides/v2.1/frontend-dev-guide/css-topics/css_debug.md

@@ -28,9 +28,9 @@ Magento has built-in Grunt tasks configured, but there are still several prerequ
 Install <a href="https://github.com/joyent/node/wiki/installing-node.js-via-package-manager)" target="_blank">node.js</a> to any location on your machine.
 </li>
 <li>Install Grunt CLI tool globally. To do this, run the following command in a command prompt:<br>
-<pre>
+{% highlight HTML%}
 npm install -g grunt-cli
-</pre>
+{% endhighlight HTML%}
 </li>
 <li>
 Rename the following files in your Magento root directory:
@@ -43,16 +43,16 @@ Rename the following files in your Magento root directory:
 
 Install (or refresh) the <code>node.js</code> project dependency, including Grunt, for your Magento instance. To do this, run the following commands in a command prompt:<br>
 
-<pre>
+{% highlight HTML%}
 cd &lt;your_Magento_instance_directory&gt;
 npm install
 npm update
-</pre>
+{% endhighlight HTML%}
 </li>
 
 <li>
 Add your {% glossarytooltip d2093e4a-2b71-48a3-99b7-b32af7158019 %}theme{% endglossarytooltip %} to Grunt configuration. To do this, in the <code>dev/tools/grunt/configs/themes.js</code> file, add your theme to <code>module.exports</code> like following:
-<pre>
+{% highlight js%}
 {% glossarytooltip c1e4242b-1f1a-44c3-9d72-1d5b1435e142 %}module{% endglossarytooltip %}.exports = {
     ...
     &lt;theme&gt;: {
@@ -66,7 +66,7 @@ Add your {% glossarytooltip d2093e4a-2b71-48a3-99b7-b32af7158019 %}theme{% endgl
         dsl: 'less'
     ...
     },
-</pre>
+{% endhighlight js%}
 
 Where the following notation is used:
 <ul>
@@ -85,7 +85,6 @@ Where the following notation is used:
 </li>
 <li id="livereload">
 (Optional) If you want to use Grunt for "watching" changes automatically, without reloading pages in a browser each time, install the <a href="http://livereload.com/extensions/" target="_blank">LiveReload extension</a> in your browser.
-
 </li>
 </ol>
 

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

@@ -20,6 +20,7 @@ In their Orange theme, OrangeCo wants to transform the header links block to a d
 <img src="{{ site.baseurl }}/common/images/layout_transform21.png">
 </div>
 
+
 To do this, they need to wrap the list of header links with a container and add a greeting with a drop-down arrow before the list.
 
 The Orange theme [inherits]({{ page.baseurl }}/frontend-dev-guide/themes/theme-inherit.html) from Blank, so by default the rendered header links look like following:
@@ -232,12 +233,13 @@ Now the customer links look like following:
 <img src="{{ site.baseurl }}/common/images/layout_screen221.png">
 </div>
 
+
 Clicking the **Change** button toggles the `active` CSS class:
 
 To add quick basic styling and visual behavior to the "dropdown" menu, OrangeCo added  [_extend.less]({{ page.baseurl }}/frontend-dev-guide/css-guide/css_quick_guide_approach.html#simple_extend) to their theme with the following customizations:
 
-* redundant elements are hidden with CSS
-* the `.lib-dropdown()` mixin from [Magento UI library]({{ page.baseurl }}/frontend-dev-guide/css-topics/theme-ui-lib.html) was applied to the corresponding element
+* Redundant elements are hidden with CSS
+* The `.lib-dropdown()` mixin from [Magento UI library]({{ page.baseurl }}/frontend-dev-guide/css-topics/theme-ui-lib.html) was applied to the corresponding element
 
 `app/design/frontend/OrangeCo/orange/web/css/source/_extend.less`
 

guides/v2.1/frontend-dev-guide/themes/theme-uninstall.md

@@ -17,8 +17,8 @@ This topic describes how to uninstall a {% glossarytooltip 1a70d3ac-6bd9-475a-89
 
 The way a theme should be uninstalled is defined by two factors:
 
-* the way the theme was added: manually added (installed or created), installed as {% glossarytooltip d85e2d0a-221f-4d03-aa43-0cda9f50809e %}composer{% endglossarytooltip %} package or as an {% glossarytooltip 55774db9-bf9d-40f3-83db-b10cc5ae3b68 %}extension{% endglossarytooltip %}.
-* the way Magento was installed: [using the source files from Github]({{ page.baseurl }}/install-gde/install/cli/install-cli-sample-data-clone.html) or [using Composer]({{ page.baseurl }}/install-gde/install/cli/install-cli-sample-data-composer.html). 
+* The way the theme was added: manually added (installed or created), installed as {% glossarytooltip d85e2d0a-221f-4d03-aa43-0cda9f50809e %}composer{% endglossarytooltip %} package or as an {% glossarytooltip 55774db9-bf9d-40f3-83db-b10cc5ae3b68 %}extension{% endglossarytooltip %}.
+* The way Magento was installed: [using the source files from Github]({{ page.baseurl }}/install-gde/install/cli/install-cli-sample-data-clone.html) or [using Composer]({{ page.baseurl }}/install-gde/install/cli/install-cli-sample-data-composer.html). 
 
 The following sections describe the flow for uninstalling themes in each case.
 
@@ -61,7 +61,6 @@ If both the theme and the Magento instance were installed using Composer, you ca
 To uninstall a theme Composer package if your Magento instance was installed by cloning the git repository, you can also uninstall it using a CLI command. However, you must first remove it from the list of dependencies.
 
 Take the following steps:
-
 1. Open the `<Magento root dir>/composer.json` file.
 2. Find a line with a reference to theme package and delete it. The reference would look like following:
 
@@ -74,10 +73,10 @@ Take the following steps:
    ...
    {%endhighlight%}
 
-3. To update the project dependencies, run:  
- 
-    composer update
-
+3. To update the project dependencies, run:
+{% highlight HTML%}
+composer update
+{% endhighlight HTML%}
 4. Use the `magento theme:uninstall` CLI command as described in the [Uninstall themes Composer package]({{ page.baseurl }}/install-gde/install/cli/install-cli-theme-uninstall.html) topic.
 
 <div class="bs-callout bs-callout-info" id="info" markdown="1">
@@ -88,8 +87,8 @@ You can use the Composer remove command to remove the dependency, but in that ca
 
 If the theme was installed as an extension, you can uninstall it using one of the following flows:
 
-* the same way as theme Composer packages are uninstalled, see the [Uninstall a theme package](#uninstall_theme_pack) section for details.
-* using the Component Manager.     
+* The same way as theme Composer packages are uninstalled, see the [Uninstall a theme package](#uninstall_theme_pack) section for details.
+* Using the Component Manager.     
 
 To uninstall a theme extension using the Component Manager:
 

guides/v2.1/frontend-dev-guide/translations/translate_practice.md

@@ -36,36 +36,34 @@ The following image shows a page where the strings meant to be changed are used:
 <div style="border: 1px solid #ABABAB">
 <img width="700px" src="{{ site.baseurl }}/common/images/fdg_trans_bag.png" alt="Product page where the Add to Compare string is displayed">
 </div>
-
+<br />
 To override the strings, OrangeCo plan to use the en_US dictionary file. 
 
 So OrangeCo take the following steps:
 
 <ol>
-
 <li>
 Run the <a href="{{ page.baseurl }}/config-guide/cli/config-cli-subcommands-i18n.html#config-cli-subcommands-xlate-dict">i18n (internationalization) tool</a> to generate the en_US dictionary for the <code>orange</code> theme:
-<pre>
+{% highlight html+php %}
 {% glossarytooltip bf703ab1-ca4b-48f9-b2b7-16a81fd46e02 %}php{% endglossarytooltip %} magento2/bin/magento i18n:collect-phrases --output="magento2/app/design/frontend/OrangeCo/orange/i18n/en_US.csv" magento2/app/design/frontend/OrangeCo/orange
-</pre>
+{% endhighlight html+php %}
 </li>
 <li>
-
 Open the newly generated <code>magento2/app/design/frontend/OrangeCo/orange/i18n/en_US.csv</code> file and add the following rows:
 
-<pre>
+{% highlight HTML%}
 "Add to Cart", "Purchase"
 "Add to Compare", "Compare"
 "Add to Wish List", "Wishlist"
-</pre>
+{% endhighlight HTML%}
 </li>
 
 </ol>
 
 Now you can run deploy command to get changes of localization,
-<pre>
+{% highlight HTML%}
 php bin/magento setup:static-content:deploy
-</pre>
+{% endhighlight HTML%}
 
 When the OrangeCo apply the orange theme, the custom strings are used instead default ones.