{"id":24976163,"url":"https://github.com/devbookhq/docusaurus-code-video-plugin","last_synced_at":"2025-04-11T13:08:26.881Z","repository":{"id":45838547,"uuid":"514533766","full_name":"devbookhq/docusaurus-code-video-plugin","owner":"devbookhq","description":"Add a video to a Docusaurus code block and highlight code lines as the video plays","archived":false,"fork":false,"pushed_at":"2023-01-18T10:28:50.000Z","size":4068,"stargazers_count":23,"open_issues_count":3,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-25T09:21:24.813Z","etag":null,"topics":["code","devbook","docs","documentation","docusaurus","docusaurus2","feedback","interactive","javascript","markdown","plugin","snippets","tutorial","typescript","video","youtube"],"latest_commit_sha":null,"homepage":"https://usedevbook.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devbookhq.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-16T09:27:08.000Z","updated_at":"2024-07-04T14:54:01.000Z","dependencies_parsed_at":"2023-02-10T14:31:11.722Z","dependency_job_id":null,"html_url":"https://github.com/devbookhq/docusaurus-code-video-plugin","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devbookhq%2Fdocusaurus-code-video-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devbookhq%2Fdocusaurus-code-video-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devbookhq%2Fdocusaurus-code-video-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devbookhq%2Fdocusaurus-code-video-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devbookhq","download_url":"https://codeload.github.com/devbookhq/docusaurus-code-video-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248404663,"owners_count":21097792,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code","devbook","docs","documentation","docusaurus","docusaurus2","feedback","interactive","javascript","markdown","plugin","snippets","tutorial","typescript","video","youtube"],"created_at":"2025-02-03T21:59:43.842Z","updated_at":"2025-04-11T13:08:26.856Z","avatar_url":"https://github.com/devbookhq.png","language":"TypeScript","readme":"# Devbook Docusaurus Code Video Plugin\nThe Devbook Docusaurus code video plugin allows you to [add a video to a code block](#add-video-to-a-code-snippet) in your docs and [highlight code lines](#highlight-code-lines-as-the-video-plays) as the video plays.\n\n\n![](./preview.gif)\n\n## Supported video sources\n- YouTube\n\nDo you want more video sources? Please open an issue!\n\n## Installation\n\nInstall the package:\n```sh\nnpm install @devbookhq/docusaurus-code-video-plugin\n```\nor\n```sh\nyarn add @devbookhq/docusaurus-code-video-plugin\n```\n\nAdd plugin to `docusaurus.config.js`:\n```js\nmodule.exports = {\n  plugins: ['@devbookhq/docusaurus-code-video-plugin'],\n}\n```\n\n## Usage with markdown (`.md`)\nAdd `youtubeID` attribute to a code block:\n\n    ```js youtubeID=MnrJzXM7a6o\n    function main() {\n      console.log(1);\n      console.log(2);\n    }\n    ```\n\n\n## Usage with [`CodeBlock`](https://docusaurus.io/docs/markdown-features/code-blocks) (`.mdx`, `.tsx`, `.jsx`)\n\nAdd the `youtubeID` prop to the component:\n\n```jsx\nimport CodeBlock from '@theme/CodeBlock';\nimport MyComponentSource from '!!raw-loader!./myComponent';\n\n\u003cCodeBlock\n  youtubeID=\"MnrJzXM7a6o\"\n  language=\"jsx\"\n\u003e\n  {MyComponentSource}\n\u003c/CodeBlock\u003e\n```\n\n## Youtube video ID\n\nPass 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]`.\n\n## How to highlighting code lines as the video plays\nThe plugin allows you to highlight different code lines (and ranges of code lines) at different timestamps.\n\nAdd the highlight attributes to the code block in **Markdown**:\n\n    ```js youtubeID=MnrJzXM7a6o 0:10-1:00=(1) 1:10-1:20=(1,2-4)\n    function main() {\n      console.log(1);\n      console.log(2);\n    }\n    ```\n\nOr if you are using the [`CodeBlock`](https://docusaurus.io/docs/markdown-features/code-blocks) component add the highlight attributes as props:\n\n```jsx\nimport CodeBlock from '@theme/CodeBlock';\nimport MyComponentSource from '!!raw-loader!./myComponent';\n\n\u003cCodeBlock\n  language=\"jsx\"\n  youtubeID=\"MnrJzXM7a6o\"\n  {...{ [\"0:10-1:00\"]: \"(1)\", [\"1:10-1:20\"]: \"(1,2-4)\" }}\n\u003e\n  {MyComponentSource}\n\u003c/CodeBlock\u003e\n```\n\nBoth examples 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`.\n\nThe code line highlights are in the format `videoStartTime-videoEndTime=(codeLinesRange)`.\nThe start and the end timestamps are in the `H:M:S` format. Hours are optional (`M:S`).\n\n\u003e 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.\n\n\n## Styling\nYou 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).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevbookhq%2Fdocusaurus-code-video-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevbookhq%2Fdocusaurus-code-video-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevbookhq%2Fdocusaurus-code-video-plugin/lists"}