docusaurus-remark-plugin-codetabs-snippets

Docusaurus v2 Remark utility plugin to allow sourcing code from files in codetabs using docusaurus-remark-plugin-codetabs and remark-plugin-code-snippets.

Installation

# npm
npm install docusaurus-remark-plugin-codetabs remark-plugin-code-snippets docusaurus-remark-plugin-codetabs-snippets

# yarn
yarn add docusaurus-remark-plugin-codetabs remark-plugin-code-snippets docusaurus-remark-plugin-codetabs-snippets

Usage

Add the plugin to the Remark plugins array for each instance using it in docusaurus.config.js.

docusaurus-remark-plugin-codetabs-snippets should come before docusaurus-remark-plugin-codetabs, which should come before remark-plugin-code-snippets

module.exports = {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          remarkPlugins: [
+           [require('docusaurus-remark-plugin-codetabs-snippets'), {
+             // options             
+           }],
+           [require('docusaurus-remark-plugin-codetabs'), {
+             // options             
+           }],
+           [require('remark-plugin-code-snippets'), {
+             // options             
+           }],
          ],
        },
        blog: {
          remarkPlugins: [
+           [require('docusaurus-remark-plugin-codetabs-snippets'), {
+             // options             
+           }],
+           [require('docusaurus-remark-plugin-codetabs'), {
+             // options             
+           }],
+           [require('remark-plugin-code-snippets'), {
+             // options             
+           }],
          ],
        },
      },
    ],
  ],
};

Options

Option	Type	Default	Description
extensions	{ [ext: string]: string }	{}	maps file extensions to the language syntax highlighting to use for that language extension

extensions

Map of file extensions to the desired language for syntax highlighting. Only the final extension is captured, ie a.b.c -> c

You can configure the extension mapping with the extensions field in options. For instance, { mdx: md } would make sourced files with the .mdx extension result in a codeblock with language md.

Example

```md codetabs

```file="helloworld.js":1

```file="HelloWorld.jsx":2-
import React from 'react';
{{ FILE }}

```

produces

```md codetabs

```js file="helloworld.js"

```jsx file="HelloWorld.jsx":2-
import React from 'react';
{{ FILE }}

```