amfarrell / docusaurus-theme-github-codeblock

A Docusaurus v2 plugin that supports referencing code examples from public GitHub repositories.

Docusaurus Theme GitHub Codeblock

A Docusaurus v2 plugin that supports referencing code examples from public GitHub repositories.

Note: this theme plugin requires Docusaurus v2

Install

First, add the theme plugin to your dependencies as well as @babel/plugin-transform-modules-commonjs:

npm install @saucelabs/theme-github-codeblock @babel/plugin-transform-modules-commonjs

Usage

Add the theme plugin to your list of themes in the docusaurus.config.js:

    // ...
    themes: [
        '@saucelabs/theme-github-codeblock'
    ],
    // ...

in your babel.config.js please add @babel/plugin-transform-modules-commonjs to the plugins, e.g.:

module.exports = {
  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
  plugins: [
    '@babel/plugin-transform-modules-commonjs'
  ]
};

In order to reference GitHub snippets in your markdown, create code blocks with a reference attached to the language meta string and put the link to your GitHub reference in the code block, e.g.:

```js reference
https://github.com/saucelabs/docusaurus-theme-github-codeblock/blob/main/src/theme/ReferenceCodeBlock/index.tsx#L105-L108
```

The plugin will download the code and display the desired lines:

---

If you are interested contributing to this project, see CONTRIBUTING.md.