[ADF-2526] Fixed interpolation marker issue in doc files (#3098)

* [ADF-2526] Test commit of a file with escape tags

* [ADF-2526] Fixed interpolation marker issue in doc code samples

docs/user-guide/internationalization.md

@@ -101,10 +101,14 @@ export class HomeComponent implements OnInit {
 
 ...with very simple corresponding HTML:
 
+<!-- {% raw %} -->
+
 ```html
 {{translatedText}}
 ```
 
+<!-- {% endraw %} -->
+
 In the browser, this is displayed as:
 
 ![English translation text](../docassets/images/TransExEn.png)
@@ -139,8 +143,12 @@ corresponding text. For example, the following will display the
 "Start Form" text as above but without any code or variables in the
 component's `.ts` file:
 
+<!-- {% raw %} -->
+
     {{ "FORM.START_FORM.TITLE" | translate }}
 
+<!-- {% endraw %} -->
+
 ## Adding your own messages
 
 The built-in translations certainly won't cover everything you will need for
@@ -156,6 +164,8 @@ string at a specified position within a message). This is very useful for
 messages whose content can change at runtime. For example, in the built-in
 `en.json` there is the `CORE.PAGINATION.ITEMS_RANGE` key:
 
+<!-- {% raw %} -->
+
 ```json
   ...
 "CORE": {
@@ -168,6 +178,8 @@ messages whose content can change at runtime. For example, in the built-in
     ...
 ```
 
+<!-- {% endraw %} -->
+
 The sections in curly braces are _interpolation variables_ that you supply
 at runtime. You can specify them by passing an extra parameter to
 `TranslationService.get`; this is an object whose properties have the same
@@ -187,8 +199,12 @@ this.trans.get(
 
 You can use interpolations with the `translate` pipe in a similar way:
 
+<!-- {% raw %} -->
+
     {{ "CORE.PAGINATION.ITEMS_RANGE" | translate: { range: "1..10", total: "122"} }}
 
+<!-- {% endraw %} -->
+
 ## Selecting the display language
 
 ADF provides a [Language Menu component](../core/language-menu.component.md) that

docs/user-guide/metadata-indicators.md

@@ -72,6 +72,8 @@ So once rendered our component will automatically have access to entire set of n
 
 For demonstration purposes we are going to display several icons if underlying node has version `2.0`, and just a plain text version value for all other versions.
 
+<!-- {% raw %} -->
+
 ```html
 <div *ngIf="metadata">
     <ng-container *ngIf="metadata['cm:versionLabel'] === '2.0'">
@@ -85,6 +87,8 @@ For demonstration purposes we are going to display several icons if underlying n
 </div>
 ```
 
+<!-- {% endraw %} -->
+
 Note: For a list of the icons that can be used with `<mat-icon>` component please refer to this resource: [material.io/icons](https://material.io/icons/)
 
 ## Testing component
@@ -106,6 +110,8 @@ You can see on the screenshot above that only files with version `2.0` got extra
 
 The full source code of the component can be found below:
 
+<!-- {% raw %} -->
+
 ```ts
 import { Component, Input } from '@angular/core';
 
@@ -132,4 +138,6 @@ export class MetadataIconsComponent {
 }
 ```
 
+<!-- {% endraw %} -->
+
 You can use this idea to build more complex indication experience based on the actual metadata state. 

docs/user-guide/stencils.md

@@ -40,6 +40,8 @@ This value will be used as field type when form gets rendered.
 
 This should be a valid Angular component template that you want to render in `<activiti-form>` component:
 
+<!-- {% raw %} -->
+
 ```html
 <div>
     <div>Angular Component</div>
@@ -47,6 +49,8 @@ This should be a valid Angular component template that you want to render in `<a
 </div>
 ```
 
+<!-- {% endraw %} -->
+
 ## Form editor template
 
 This can be any html layout to be rendered as a component placeholder in Activiti Form Designer.