diff --git a/README.md b/README.md index cd7f30e..34e263d 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,5 @@ # Devbook Docusaurus Video Plugin -The Devbook Docusaurus plugin allows you to attach videos to code blocks in your [Docusaurus](https://docusaurus.io/) docs. - -## Demo -Check the [demo](./example/) here. +The Devbook Docusaurus video plugin allows you to attach videos to code blocks in your [Docusaurus](https://docusaurus.io/) docs. ## Usage Install plugin: @@ -18,7 +15,7 @@ module.exports = { ``` ### Add video to a code snippet -In the **Markdown** add `youtubeID` attribute to the code block: +In **Markdown** add `youtubeID` attribute to the code block: ```js youtubeID=4HGNqFdaD34 function main() { @@ -26,7 +23,7 @@ In the **Markdown** add `youtubeID` attribute to the code block: } ``` -If you are using **MDX/JSX/TSX** `CodeBlock` add the `youtubeID` prop: +If you are using **MDX/JSX/TSX** [`CodeBlock`](https://docusaurus.io/docs/markdown-features/code-blocks) add the `youtubeID` prop: ```jsx import CodeBlock from '@theme/CodeBlock'; @@ -35,13 +32,13 @@ import MyComponentSource from '!!raw-loader!./myComponent'; {MyComponentSource} ``` -> You need to pass just the YouTube video ID, not the whole URL. You can get the ID from the normal URL - `https://www.youtube.com/watch?v=`**`[youtubeID]`**, or from the embed URL - `https://www.youtube.com/embed/`**`[youtubeID]`**. +> You need to pass just the YouTube video ID, not the whole URL. You can get the ID from the normal video URL - `https://www.youtube.com/watch?v=`**`[youtubeID]`**, or from the embed URL - `https://www.youtube.com/embed/`**`[youtubeID]`**. -### Add code highlights at set video timestamps -The highlight attribute is in the format `start-end=(range)`. +### Add code highlights at video timestamps +The video highlights are in the format `start-end=(range)`. The start and the end timestamps are in the `H:M:S` format and the hours are optional (`M:S`). -In the **Markdown** add highlight attributes to the code block: +In **Markdown** add highlight attributes to the code block: ```js youtubeID=4HGNqFdaD34 0:10-1:00=(1) 1:10-1:20=(1,2-3) function main() { @@ -49,7 +46,7 @@ In the **Markdown** add highlight attributes to the code block: } ``` -If you are using **MDX/JSX/TSX** `CodeBlock` add the attributes as props: +If you are using **MDX/JSX/TSX** [`CodeBlock`](https://docusaurus.io/docs/markdown-features/code-blocks) add the highlight attributes as props: ```jsx import CodeBlock from '@theme/CodeBlock'; @@ -58,9 +55,9 @@ import MyComponentSource from '!!raw-loader!./myComponent'; {MyComponentSource} ``` -> 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. +> 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. -> You can change the video line highlight style by customizing the `docusaurus-highlight-code-line` class - the same way you would change the default Docusaurus highlight style. +> You can change the video line 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). ## Supported video sources - YouTube diff --git a/src/theme/CodeBlock/VideoPlayer/styles.module.css b/src/theme/CodeBlock/VideoPlayer/styles.module.css index 78b9d5f..ea3a7b7 100644 --- a/src/theme/CodeBlock/VideoPlayer/styles.module.css +++ b/src/theme/CodeBlock/VideoPlayer/styles.module.css @@ -47,7 +47,7 @@ -ms-user-select: none; height: 100%; - filter: brightness(0.8) blur(3px); + filter: brightness(0.9) blur(2px); } .play {