[Doc] Improve readability of ReferenceInput examples

docs/Fields.md

@@ -988,7 +988,7 @@ Also, you can filter the query used to populate the possible values. Use the `fi
 
 This [Enterprise Edition](https://marmelab.com/ra-enterprise)<img class="icon" src="./img/premium.svg" /> component fetches a list of referenced records by lookup in an associative table, and passes the records down to its child component, which must be an iterator component.
 
-For instance, here is how to fetch the authors related to a book record by matching book.id to book_authors.post_id, then matching book_authors.author_id to authors.id, and then display the author last_name for each, in a <ChipField>:
+For instance, here is how to fetch the authors related to a book record by matching book.id to book_authors.post_id, then matching book_authors.author_id to authors.id, and then display the author last_name for each, in a `<ChipField>`:
 
 ```jsx
 import * as React from 'react';

docs/Inputs.md

@@ -1939,27 +1939,30 @@ You can tweak how this component fetches the possible values using the `perPage`
 // by default, fetches only the first 25 values. You can extend this limit
 // by setting the `perPage` prop.
 <ReferenceArrayInput
-     source="tag_ids"
-     reference="tags"
-     perPage={100}>
+    source="tag_ids"
+    reference="tags"
+    perPage={100}
+>
     <SelectArrayInput optionText="name" />
 </ReferenceArrayInput>
 
 // by default, orders the possible values by id desc. You can change this order
 // by setting the `sort` prop (an object with `field` and `order` properties).
 <ReferenceArrayInput
-     source="tag_ids"
-     reference="tags"
-     sort={{ field: 'title', order: 'ASC' }}>
+    source="tag_ids"
+    reference="tags"
+    sort={{ field: 'title', order: 'ASC' }}
+>
     <SelectArrayInput optionText="name" />
 </ReferenceArrayInput>
 
 // you can filter the query used to populate the possible values. Use the
 // `filter` prop for that.
 <ReferenceArrayInput
-     source="tag_ids"
-     reference="tags"
-     filter={{ is_published: true }}>
+    source="tag_ids"
+    reference="tags"
+    filter={{ is_published: true }}
+>
     <SelectArrayInput optionText="name" />
 </ReferenceArrayInput>
 ```
@@ -2061,27 +2064,30 @@ You can tweak how this component fetches the possible values using the `perPage`
 // by default, fetches only the first 25 values. You can extend this limit
 // by setting the `perPage` prop.
 <ReferenceInput
-     source="post_id"
-     reference="posts"
-     perPage={100}>
+    source="post_id"
+    reference="posts"
+    perPage={100}
+>
     <SelectInput optionText="title" />
 </ReferenceInput>
 
 // by default, orders the possible values by id desc. You can change this order
 // by setting the `sort` prop (an object with `field` and `order` properties).
 <ReferenceInput
-     source="post_id"
-     reference="posts"
-     sort={{ field: 'title', order: 'ASC' }}>
+    source="post_id"
+    reference="posts"
+    sort={{ field: 'title', order: 'ASC' }}
+>
     <SelectInput optionText="title" />
 </ReferenceInput>
 
 // you can filter the query used to populate the possible values. Use the
 // `filter` prop for that.
 <ReferenceInput
-     source="post_id"
-     reference="posts"
-     filter={{ is_published: true }}>
+    source="post_id"
+    reference="posts"
+    filter={{ is_published: true }}
+>
     <SelectInput optionText="title" />
 </ReferenceInput>
 ```
@@ -2092,9 +2098,10 @@ The child component may further filter results (that's the case, for instance, f
 
 ```jsx
 <ReferenceInput
-     source="post_id"
-     reference="posts"
-     filterToQuery={searchText => ({ title: searchText })}>
+    source="post_id"
+    reference="posts"
+    filterToQuery={searchText => ({ title: searchText })}
+>
     <AutocompleteInput optionText="title" />
 </ReferenceInput>
 ```