Update README.md

Author: mlejva

README.md

@@ -4,11 +4,16 @@ The Devbook Docusaurus code video plugin allows you to [add a video to a code bl
 ## Supported video sources
 - YouTube
 
-## Usage
-Install plugin:
+## Installation
+
+Install the package:
 ```sh
 npm install @devbookhq/docusaurus-code-video-plugin
 ```
+or
+```sh
+yarn add @devbookhq/docusaurus-code-video-plugin
+```
 
 Add plugin to `docusaurus.config.js`:
 ```js
@@ -17,8 +22,8 @@ module.exports = {
 }
 ```
 
-### Add video to a code snippet
-In **Markdown** add `youtubeID` attribute to the code block:
+## Usage with markdown (`.md`)
+Add `youtubeID` attribute to a code block:
 
     ```js youtubeID=4HGNqFdaD34
     function main() {
@@ -27,7 +32,10 @@ In **Markdown** add `youtubeID` attribute to the code block:
     }
     ```
 
-If you are using **MDX/JSX/TSX** [`CodeBlock`](https://docusaurus.io/docs/markdown-features/code-blocks) add the `youtubeID` prop:
+
+## Usage with [`CodeBlock`](https://docusaurus.io/docs/markdown-features/code-blocks) (`.mdx`, `.tsx`, `.jsx`)
+
+Add the `youtubeID` prop to the component:
 
 ```jsx
 import CodeBlock from '@theme/CodeBlock';
@@ -41,13 +49,12 @@ import MyComponentSource from '!!raw-loader!./myComponent';
 </CodeBlock>
 ```
 
-> You need to pass just the YouTube video ID, not the whole URL. You can get the `youtubeID` from the regular Youtube video URL - `https://www.youtube.com/watch?v=[youtubeID]`, or from the embed URL - `https://www.youtube.com/embed/[youtubeID]`.
+## Youtube video ID
 
-### Highlight code lines as the video plays
-The code line highlights are in the format `videoStartTime-videoEndTime=(codeLinesRange)`.
-The start and the end timestamps are in the `H:M:S` format. Hours are optional (`M:S`).
+Pass the YouTube video ID, not the full URL. The `youtubeID` is part of the regular Youtube video URL - `https://www.youtube.com/watch?v=[youtubeID]`, or the embed video URL - `https://www.youtube.com/embed/[youtubeID]`.
 
-> The highlight range format is the same as in the [Docusaurus code blocks]( https://docusaurus.io/docs/markdown-features/code-blocks#highlighting-with-metadata-string), just with the `()` parentheses instead of the `{}` parentheses.
+## How to highlighting code lines as the video plays
+The plugin allows you to highlight different code lines (and ranges of code lines) as the video plays.
 
 Add the highlight attributes to the code block in **Markdown**:
 
@@ -60,6 +67,11 @@ Add the highlight attributes to the code block in **Markdown**:
 
 The example above will highlight a code line number `1` from the time `0:10` until `1:00`. Then highlights code lines `1`, `2`, `3`, and `4` from the time `1:10` to the time `1:20`.
 
+The code line highlights are in the format `videoStartTime-videoEndTime=(codeLinesRange)`. 
+The start and the end timestamps are in the `H:M:S` format. Hours are optional (`M:S`).
+
+> The highlight range format is the same as in the [Docusaurus code blocks]( https://docusaurus.io/docs/markdown-features/code-blocks#highlighting-with-metadata-string), just with the `()` parentheses instead of the `{}` parentheses.
+
 If you are using **MDX/JSX/TSX** [`CodeBlock`](https://docusaurus.io/docs/markdown-features/code-blocks) add the highlight attributes as props:
 
 ```jsx
@@ -76,5 +88,4 @@ import MyComponentSource from '!!raw-loader!./myComponent';
 ```
 
 ## Styling
-### Style highlighted code lines
 You can change the code lines' highlight style by customizing the `docusaurus-highlight-code-line` class - the same way you would change the [default Docusaurus highlight style](https://docusaurus.io/docs/markdown-features/code-blocks#line-highlighting).