fix(docs): syntax highlighting (#4857)

* fix: syntax highlighting for ripple effect section

* fix: tabulation in Appbar docs examples

* fix: table docs code snippets tabulation

* fix: drawer docs code snippets tabulation

* fix: modal docs example snippet formatting

* fix: ToggleButtonGroup docs example snippet formatting

Author: azizbecha

docs/docs/guides/11-ripple-effect.md

@@ -14,7 +14,7 @@ The ripple effect on the iOS platform is replaced by a highlight effect.
 
 The `rippleColor` prop is available for every pressable component which allows you to set the color of the ripple effect. For the instance, to make the `Button` component's ripple effect transparent, simply pass the desired color value to the prop:
 
-```
+```typescript
 <Button
   rippleColor="#FF000020"
   icon="camera"
@@ -28,7 +28,7 @@ The `rippleColor` prop is available for every pressable component which allows y
 
 To disable the ripple effect in **all** of Paper's components set `rippleEffectEnabled: false` on the `settings` prop of `PaperProvider`.
 
-```
+```typescript
 import { Provider as PaperProvider } from 'react-native-paper';
 // ...
 

src/components/Appbar/AppbarAction.tsx

@@ -71,11 +71,11 @@ export type Props = React.ComponentPropsWithoutRef<typeof IconButton> & {
  * const MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';
  *
  * const MyComponent = () => (
- *     <Appbar.Header>
- *        <Appbar.Content title="Title" subtitle={'Subtitle'} />
- *         <Appbar.Action icon="magnify" onPress={() => {}} />
- *         <Appbar.Action icon={MORE_ICON} onPress={() => {}} />
- *     </Appbar.Header>
+ *   <Appbar.Header>
+ *      <Appbar.Content title="Title" subtitle={'Subtitle'} />
+ *       <Appbar.Action icon="magnify" onPress={() => {}} />
+ *       <Appbar.Action icon={MORE_ICON} onPress={() => {}} />
+ *   </Appbar.Header>
  * );
  *
  * export default MyComponent;

src/components/Appbar/AppbarBackAction.tsx

@@ -49,9 +49,9 @@ export type Props = $Omit<
  * import { Appbar } from 'react-native-paper';
  *
  * const MyComponent = () => (
- *     <Appbar.Header>
- *       <Appbar.BackAction onPress={() => {}} />
- *     </Appbar.Header>
+ *   <Appbar.Header>
+ *     <Appbar.BackAction onPress={() => {}} />
+ *   </Appbar.Header>
  * );
  *
  * export default MyComponent;

src/components/Appbar/AppbarContent.tsx

@@ -92,9 +92,9 @@ export type Props = $RemoveChildren<typeof View> & {
  * import { Appbar } from 'react-native-paper';
  *
  * const MyComponent = () => (
- *     <Appbar.Header>
- *        <Appbar.Content title="Title" />
- *     </Appbar.Header>
+ *   <Appbar.Header>
+ *      <Appbar.Content title="Title" />
+ *   </Appbar.Header>
  * );
  *
  * export default MyComponent;

src/components/DataTable/DataTableCell.tsx

@@ -48,12 +48,12 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
  * import { DataTable } from 'react-native-paper';
  *
  * const MyComponent = () => (
- *      <DataTable.Row>
- *        <DataTable.Cell numeric>1</DataTable.Cell>
- *        <DataTable.Cell numeric>2</DataTable.Cell>
- *        <DataTable.Cell numeric>3</DataTable.Cell>
- *        <DataTable.Cell numeric>4</DataTable.Cell>
- *      </DataTable.Row>
+ *   <DataTable.Row>
+ *     <DataTable.Cell numeric>1</DataTable.Cell>
+ *     <DataTable.Cell numeric>2</DataTable.Cell>
+ *     <DataTable.Cell numeric>3</DataTable.Cell>
+ *     <DataTable.Cell numeric>4</DataTable.Cell>
+ *   </DataTable.Row>
  * );
  *
  * export default MyComponent;

src/components/DataTable/DataTableHeader.tsx

@@ -28,17 +28,17 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
  * import { DataTable } from 'react-native-paper';
  *
  * const MyComponent = () => (
- *       <DataTable>
- *         <DataTable.Header>
- *           <DataTable.Title
- *             sortDirection='descending'
- *           >
- *             Dessert
- *           </DataTable.Title>
- *           <DataTable.Title numeric>Calories</DataTable.Title>
- *           <DataTable.Title numeric>Fat (g)</DataTable.Title>
- *         </DataTable.Header>
- *       </DataTable>
+ *   <DataTable>
+ *     <DataTable.Header>
+ *       <DataTable.Title
+ *         sortDirection='descending'
+ *       >
+ *         Dessert
+ *       </DataTable.Title>
+ *       <DataTable.Title numeric>Calories</DataTable.Title>
+ *       <DataTable.Title numeric>Fat (g)</DataTable.Title>
+ *     </DataTable.Header>
+ *   </DataTable>
  * );
  *
  * export default MyComponent;

src/components/DataTable/DataTableRow.tsx

@@ -44,12 +44,12 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
  * import { DataTable } from 'react-native-paper';
  *
  * const MyComponent = () => (
- *      <DataTable.Row>
- *        <DataTable.Cell numeric>1</DataTable.Cell>
- *        <DataTable.Cell numeric>2</DataTable.Cell>
- *        <DataTable.Cell numeric>3</DataTable.Cell>
- *        <DataTable.Cell numeric>4</DataTable.Cell>
- *      </DataTable.Row>
+ *  <DataTable.Row>
+ *    <DataTable.Cell numeric>1</DataTable.Cell>
+ *    <DataTable.Cell numeric>2</DataTable.Cell>
+ *    <DataTable.Cell numeric>3</DataTable.Cell>
+ *    <DataTable.Cell numeric>4</DataTable.Cell>
+ *  </DataTable.Row>
  * );
  *
  * export default MyComponent;

src/components/DataTable/DataTableTitle.tsx

@@ -63,17 +63,17 @@ export type Props = React.ComponentPropsWithRef<typeof Pressable> & {
  * import { DataTable } from 'react-native-paper';
  *
  * const MyComponent = () => (
- *       <DataTable>
- *         <DataTable.Header>
- *           <DataTable.Title
- *             sortDirection='descending'
- *           >
- *             Dessert
- *           </DataTable.Title>
- *           <DataTable.Title numeric>Calories</DataTable.Title>
- *           <DataTable.Title numeric>Fat (g)</DataTable.Title>
- *         </DataTable.Header>
- *       </DataTable>
+ *   <DataTable>
+ *     <DataTable.Header>
+ *       <DataTable.Title
+ *         sortDirection='descending'
+ *       >
+ *         Dessert
+ *       </DataTable.Title>
+ *       <DataTable.Title numeric>Calories</DataTable.Title>
+ *       <DataTable.Title numeric>Fat (g)</DataTable.Title>
+ *     </DataTable.Header>
+ *   </DataTable>
  * );
  *
  * export default MyComponent;

src/components/Drawer/DrawerCollapsedItem.tsx

@@ -85,11 +85,11 @@ const outlineHeight = 32;
  * import { Drawer } from 'react-native-paper';
  *
  * const MyComponent = () => (
- *    <Drawer.CollapsedItem
- *      focusedIcon="inbox"
- *      unfocusedIcon="inbox-outline"
- *      label="Inbox"
- *    />
+ *   <Drawer.CollapsedItem
+ *     focusedIcon="inbox"
+ *     unfocusedIcon="inbox-outline"
+ *     label="Inbox"
+ *   />
  * );
  *
  * export default MyComponent;

src/components/Drawer/DrawerItem.tsx

@@ -81,11 +81,11 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
  * import { Drawer } from 'react-native-paper';
  *
  * const MyComponent = () => (
- *    <Drawer.Item
- *      style={{ backgroundColor: '#64ffda' }}
- *      icon="star"
- *      label="First Item"
- *    />
+ *   <Drawer.Item
+ *     style={{ backgroundColor: '#64ffda' }}
+ *     icon="star"
+ *     label="First Item"
+ *   />
  * );
  *
  * export default MyComponent;