fix onboarding lines contributing docs (#13475)

Author: a-hariti

docs/contributing/pages/components.mdx

@@ -131,9 +131,7 @@ Render an expandable section to provide additional information to users on deman
 </Expandable>
 
 <Expandable title="Expandable with a code block">
-  ```js
-  const foo = 'bar';
-  ```
+  ```js const foo = 'bar'; ```
 </Expandable>
 
 ```markdown {tabTitle:Example}
@@ -380,11 +378,17 @@ Attributes:
 
 If you're writing product feature specific docs, you can specify markers within code blocks that enable or disable certain parts of snippets:
 
+<Alert title="warning">
+  Do not copy the following code snippet, the `___PRODUCT_OPTION_START___` and
+  `___PRODUCT_OPTION_END___` markers have an extra character (zero width space)
+  as a workaround to make them show up correctly in the example.
+</Alert>
+
 ````markdown
 ```go
-  // ___PRODUCT_OPTION_START___ performance
+  // _​__PRODUCT_OPTION_START___ performance
   // your code here
-  // ___PRODUCT_OPTION_END___ performance
+  // _​__PRODUCT_OPTION_END___ performance
 ```
 ````
 
@@ -395,7 +399,6 @@ the syntax uses the standard comment style of the programming language you're do
 
 where `feature` is the feature id (e.g. `performance`, `profiling` or `session-replay`).
 
-
 The range visibility will be controlled by the `OnboardingOptionButtons` component:
 
 ```jsx diff