chore(v2): upgrade example projects (#4399)

examples/bootstrap/docs/doc1.md

@@ -43,9 +43,11 @@ Strikethrough uses two tildes. ~~Scratch this.~~
 
 1. First ordered list item
 1. Another item
-   - Unordered sub-list.
+
+- Unordered sub-list.
+
 1. Actual numbers don't matter, just that it's a number
-   1. Ordered sub-list
+1. Ordered sub-list
 1. And another item.
 
 - Unordered list can use asterisks
@@ -88,9 +90,9 @@ Reference-style: ![alt text][logo]
 
 [logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png 'Logo Title Text 2'
 
-Images from any folder can be used by providing path to file. Path should be relative to markdown file.
+Images from any folder can be used by providing path to file. Path should be relative to the original markdown file or absolute to the `/static` folder.
 
-![img](../static/img/logo.svg)
+![img](/img/logo.svg)
 
 ---
 

examples/bootstrap/docs/interactiveDoc.mdx

@@ -5,13 +5,23 @@ title: Powered by MDX
 
 You can write JSX and use React components within your Markdown thanks to [MDX](https://mdxjs.com/).
 
-export const Highlight = ({children, color}) => ( <span style={{
+The `.mdx` extension is not required, but will enable better support from tooling (IDE, Prettier...).
+
+export const Highlight = ({children, color}) => (
+  <span
+    style={{
       backgroundColor: color,
       borderRadius: '2px',
       color: '#fff',
       padding: '0.2rem',
-    }}>{children}</span> );
+    }}
+    onClick={() => alert('Highlight pressed!')}>
+    {children}
+  </span>
+);
 
-<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.
+<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">
+  Facebook blue
+</Highlight> are my favorite colors.
 
 I can write **Markdown** alongside my _JSX_!