Use mdx-code-block escape hatch for Crowdin

Author: ltm

docs/developing/hardware-back-button.md

@@ -27,6 +27,7 @@ For complete hardware back button support, we recommend using Capacitor or Cordo
 
 ## Basic Usage
 
+````mdx-code-block
 <Tabs
   defaultValue="javascript"
   values={[
@@ -89,6 +90,7 @@ export default {
 ```
 </TabItem>
 </Tabs>
+````
 
 In this example, we are registering a handler to be called when the hardware back button is pressed. We have set the priority to be 10, and we have not indicated to the framework that we want the next handler to be called. As a result, any handlers with a priority less than 10 will not be called. A handler that has a priority greater than 10 will be called first.
 
@@ -98,6 +100,7 @@ In the event that there are handlers with the same priority value, the handler t
 
 Each hardware back button callback has a `processNextHandler` parameter. Calling this function allows you to continue calling hardware back button handlers.
 
+````mdx-code-block
 <Tabs
   defaultValue="javascript"
   values={[
@@ -184,6 +187,7 @@ export default {
 ```
 </TabItem>
 </Tabs>
+````
 
 This example shows how to indicate to Ionic Framework that you want the next handler to be fired. All callbacks are provided with a `processNextHandler` function as a parameter. Calling this will cause the next handler, if any exists, to be fired.
 
@@ -216,6 +220,7 @@ In the example above, both handlers A and B have a priority of 10. Since handler
 
 In some scenarios, it may be desirable to quit the app when pressing the hardware back button. This can be achieved through the use of the `ionBackButton` event combined with methods that Capacitor/Cordova provide.
 
+````mdx-code-block
 <Tabs
   defaultValue="javascript"
   values={[
@@ -308,6 +313,7 @@ export default {
 ```
 </TabItem>
 </Tabs>
+````
 
 This example shows the application exiting when the user presses the hardware back button and there is nothing left in the navigation stack. It is also possible to display a confirmation dialog before quitting the app.
 

docs/developing/keyboard.md

@@ -18,6 +18,8 @@ Inputs that _require_ a certain data type should use the `type` attribute instea
 For a list of accepted values, see the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode" target="_blank" rel="noreferrer">inputmode Documentation</a>.
 
 ### Usage
+
+````mdx-code-block
 <Tabs
   defaultValue="javascript"
   values={[
@@ -84,6 +86,7 @@ For a list of accepted values, see the <a href="https://developer.mozilla.org/en
 ```
 </TabItem>
 </Tabs>
+````
 
 import Codepen from '@site/src/components/Codepen';
 

docs/native/community.md

@@ -26,6 +26,7 @@ Cordova plugins are also wrapped in a `Promise` or `Observable` in order to prov
 
 Using the [Camera plugin](/docs/native/camera) as an example, first install it:
 
+````mdx-code-block
 <Tabs
   defaultValue="cordova"
   values={[
@@ -64,6 +65,7 @@ $ ionic cap sync
 
 </TabItem>
 </Tabs>
+````
 
 Next, begin using the plugin, following the various framework usage options below. For FAQ, see [here](/docs/native/faq).
 

docs/reference/migration.md

@@ -80,6 +80,7 @@ For example, if an app is using Angular, that project structure will be exactly
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
+````mdx-code-block
 <Tabs
   defaultValue="v4"
   values={[
@@ -146,6 +147,7 @@ tslint.json
 
 </TabItem>
 </Tabs>
+````
 
 The above comparison is an example of a v4 app's project structure. For developers with experience in a vanilla Angular project, this should feel really familiar.
 

docs/techniques/security.md

@@ -72,6 +72,7 @@ Developers can also choose to eject from the sanitizer in certain scenarios. Ion
 
 #### Usage
 
+````mdx-code-block
 <Tabs
   defaultValue="angular"
   values={[
@@ -141,3 +142,4 @@ export const ToastExample: React.FC = () => {
 ```
 </TabItem>
 </Tabs>
+````

docs/utilities/animations.md

@@ -15,6 +15,7 @@ Ionic Animations uses the [Web Animations API](https://developer.mozilla.org/en-
 
 ## Installation
 
+````mdx-code-block
 <Tabs
   defaultValue="javascript"
   values={[
@@ -123,11 +124,13 @@ const animation = createAnimation()
 ```
 </TabItem>
 </Tabs>
+````
 
 ## Basic Animations
 
 ### Usage
 
+````mdx-code-block
 <Tabs
   defaultValue="javascript"
   values={[
@@ -195,6 +198,7 @@ createAnimation()
 ```
 </TabItem>
 </Tabs>
+````
 
 In the example above, an animation that changes the opacity on the `.square` element and moves it from left to right along the X axis has been created. This animation will run an infinite number of times, and each iteration of the animation will last 1500ms.
 
@@ -212,6 +216,7 @@ Hyphenated CSS properties should be written using camel case when writing keyfra
 
 ### Usage
 
+````mdx-code-block
 <Tabs
   defaultValue="javascript"
   values={[
@@ -289,6 +294,7 @@ createAnimation()
 ```
 </TabItem>
 </Tabs>
+````
 
 In the example above, the `.square` element will transition from a red background color, to a background color defined by the `--background` variable, and then transition on to a green background color.
 
@@ -302,6 +308,7 @@ Multiple elements can be animated at the same time and controlled via a single p
 
 ### Usage
 
+````mdx-code-block
 <Tabs
   defaultValue="javascript"
   values={[
@@ -495,6 +502,7 @@ const parent = createAnimation()
 
 </TabItem>
 </Tabs>
+````
 
 This example shows 3 child animations controlled by a single parent animation. Animations `squareA` and `squareB` inherit the parent animation's duration of 2000ms, but animation `squareC` has a duration of 5000ms since it was explicitly set.
 
@@ -506,6 +514,7 @@ Ionic Animations provides hooks that let you alter an element before an animatio
 
 ### Usage
 
+````mdx-code-block
 <Tabs
   defaultValue="javascript"
   values={[
@@ -607,6 +616,7 @@ createAnimation()
 ```
 </TabItem>
 </Tabs>
+````
 
 In this example, an inline opacity of 0.2 is set on the `.square` element prior to the animation starting. Once the animation finishes, the background color of the element is set to `rgba(0, 255, 0, 0.5)`, and the inline opacity is cleared.
 
@@ -620,6 +630,7 @@ Animations can be chained to run one after the other. The `play` method returns
 
 ### Usage
 
+````mdx-code-block
 <Tabs
   defaultValue="javascript"
   values={[
@@ -820,6 +831,7 @@ await squareC.play();
 ```
 </TabItem>
 </Tabs>
+````
 
 <Codepen user="ionic" slug="MWgGrwX" height="460"></Codepen>
 
@@ -829,6 +841,7 @@ Ionic Animations gives developers the ability to create powerful gesture-based a
 
 ### Usage
 
+````mdx-code-block
 <Tabs
   defaultValue="javascript"
   values={[
@@ -1137,6 +1150,7 @@ const getStep = (ev): {
 ```
 </TabItem>
 </Tabs>
+````
 
 In this example we are creating a track along which we can drag the `.square` element. Our `animation` object will take care of moving the `.square` element either left or right, and our `gesture` object will instruct the `animation` object which direction to move in.
 
@@ -1166,6 +1180,7 @@ Developers can also tailor their animations to user preferences such as `prefers
 }
 ```
 
+````mdx-code-block
 <Tabs
   defaultValue="javascript"
   values={[
@@ -1235,6 +1250,7 @@ createAnimation()
 ```
 </TabItem>
 </Tabs>
+````
 
 This method works in all supported browsers when creating animations for the first time. Most browsers are also capable of dynamically updating keyframe animations as the CSS Variables change.
 
@@ -1248,6 +1264,7 @@ Certain Ionic components allow developers to provide custom animations. All anim
 
 ### Modals
 
+````mdx-code-block
 <Tabs
   defaultValue="javascript"
   values={[
@@ -1465,6 +1482,7 @@ export default defineComponent({
 ```
 </TabItem>
 </Tabs>
+````
 
 <Codepen user="ionic" slug="ExapZBZ"></Codepen>
 

docs/utilities/gestures.md

@@ -13,6 +13,7 @@ Building complex gestures can be time consuming. Other libraries that provide cu
 
 ## Installation
 
+````mdx-code-block
 <Tabs
   defaultValue="javascript"
   values={[
@@ -122,12 +123,14 @@ const gesture = createGesture({
 ```
 </TabItem>
 </Tabs>
+````
 
 
 ## Basic Gestures
 
 ### Usage
 
+````mdx-code-block
 <Tabs
   defaultValue="javascript"
   values={[
@@ -251,6 +254,7 @@ const onMove = (detail) => {
 ```
 </TabItem>
 </Tabs>
+````
 
 In this example, our app listens for gestures on the `.rectangle` element. When a gesture movement is detected, the `onMove` function is called, and our app logs the current gesture information.
 
@@ -262,6 +266,7 @@ import Codepen from '@site/src/components/Codepen';
 
 ### Usage
 
+````mdx-code-block
 <Tabs
   defaultValue="javascript"
   values={[
@@ -424,6 +429,7 @@ const getRandomBackground = () => {
 ```
 </TabItem>
 </Tabs>
+````
 
 In the example above, we want to be able to detect double clicks on an element. By setting our `threshold` to `0`, we can ensure our gesture object can detect clicks. Additionally, we define a click threshold so that only 2 clicks that occur in quick succession count as a double click.