Rehype-clipboard-prep-code NPM

rehype-clipboard-prep-code

rehype plugin designed to facilitate the attachment of raw code strings to a server-side parent container elements, allowing users to easily copy the entire code snippet to their clipboard.

Primary Use Case

Imagine you have an MDX-based documentation or blog platform where you frequently share code snippets. Often, readers would want to copy the presented code for their use. With rehype-clipboard-prep-code, your code containers can carry the raw string version of the code, making the copy-to-clipboard action seamless.

Installation

Follow these steps to get started:

Install the package via npm:

npm install rehype-clipboard-prep-code

Example Configuration (`contentlayer.config.ts`)

The following is a sample configuration illustrating how you might set up your content layer along with the integration of rehype-clipboard-prep-code:

import { defineDocumentType, makeSource } from 'contentlayer/source-files';
import rehypePrettyCode from 'rehype-pretty-code';
import remarkCodeTitles from 'remark-flexible-code-titles';
import {
  rehypeAttachRawStringsToCodeContainer,
  rehypeEnrichCodeContainerMetadata,
} from './plugins/mdxPlugins';

export default makeSource({
  contentDirPath: 'content',
  contentDirExclude: ['drafts'],
  documentTypes: [Blog],
  mdx: {
    remarkPlugins: [
      [
        remarkCodeTitles,
        {
          titleTagName: 'CodeBlockTitle',
          titleClassName: 'custom-code-title',
          titleProperties: (language, title) => ({
            ['data-language']: language,
            title,
          }),
        },
      ],
    ],
    rehypePlugins: [
      rehypeAttachRawStringsToCodeContainer,
      [
        rehypePrettyCode,
        {
          theme: 'github-dark',
          },
        },
      ],
      rehypeEnrichCodeContainerMetadata,
    ],
  },
});

MDX Configuration: The MDX setup incorporates various plugins to refine the handling of markdown and HTML transformations:
- remark-flexible-code-titles (a required plugin) enables flexible naming for code blocks.
- rehypePrettyCode, for code styling and beautification.
- Content Layer is the framework for which these plugins are integrated.

Example MDX with Rendered Output:

Example with a title:

  ```ts:state.ts
  export interface State {
  // Define your shared state structure here
  }
  ```

Example without titles:

  ```ts
  export interface State {
  // Define your shared state structure here
  }
  ```

Options:

Example usage with custom Title MDX component. This defaults to CodeBlockTitle.

remarkPlugins: [
     [
       remarkCodeTitles,
       {
         titleTagName: 'CodeBlockTitle',
         titleClassName: 'custom-code-title',
         titleProperties: (language, title) => ({
           ['data-language']: language,
           title,
         }),
       },
     ],
   ],
   rehypePlugins: [
     [
       rehypeEnrichCodeContainerMetadata,
       {
         codeBlockTitle: 'Title',
       },
     ],
   ]