Skip to content

A plugin for Docusaurus that lets you πŸ“ write guides on larger chunks of code and highlights 🌟 the relevant parts.

License

Notifications You must be signed in to change notification settings

Elfsquad/docusaurus-plugin-codedoc

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

18 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸ¦– Docusaurus Codedoc Plugin πŸ“š

A plugin for Docusaurus that lets you πŸ“ write guides on larger chunks of code and highlights 🌟 the relevant parts.

example

πŸ’Ύ Installation

npm install --save @elfsquad/docusaurus-plugin-codedoc

πŸ› οΈ Usage

The codedoc plugin exports 2 components:

  • CodeDoc: Parent container element πŸ“¦

  • CodeDocSection: Documentation section that highlights πŸ–οΈ chunks of code

The CodeDocSection component has a property highlight which indicates which lines of code to highlight when the section is active. The input for the highlight✨ is a CodeBlock metadatastring.

Example:

import { CodeDoc, CodeDocSection } from '@elfsquad/docusaurus-plugin-codedoc';
import CodeBlock from '@theme/CodeBlock';

<CodeDoc>
  <CodeDocSection highlight="{1-4}">
      ## Lorem ipsum dolor sit amet πŸ“œ
      consectetur adipiscing elit. Nunc consectetur nisl nec nunc condimentum pellentesque. Morbi ut mauris vel tellus laoreet cursus id eget purus.
  </CodeDocSection>

  <CodeDocSection highlight="{1,8-10,13-16}">
      ## Lorem ipsum dolor sit amet πŸ“œ
      consectetur adipiscing elit. Nunc consectetur nisl nec nunc condimentum pellentesque. Morbi ut mauris vel tellus laoreet cursus id eget purus.
  </CodeDocSection>

  <CodeBlock language="js">
  {`function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
}
function adipiscing(...elit) {
  if (!elit.sit) {
    return [];
  }
  const sed = elit[0];
  return eiusmod.tempor(sed) ? sed : [sed];
}
function incididunt(ipsum, ut = 1) {
  ut = labore.et(amet(ut), 0);
  const sit = ipsum == null ? 0 : ipsum.sit;
  if (!sit || ut < 1) {
    return [];
  }
  let dolore = 0;
  let magna = 0;
  const aliqua = new eiusmod(labore.ut(sit / ut));
  while (dolore < sit) {
    aliqua[magna++] = consectetur(ipsum, dolore, (dolore += ut));
  }
  return aliqua;
}`}
  </CodeBlock>

</CodeDoc>

🀝 Contributing

We welcome contributions! Please feel free to fork the repository, make your changes, and submit a pull request.

βš–οΈ License

Licensed under MIT. See the LICENSE file in the repository for full details.

✨ Acknowledgements

A big thank you to everyone who contributes to the ongoing development and maintenance of this action.

About

A plugin for Docusaurus that lets you πŸ“ write guides on larger chunks of code and highlights 🌟 the relevant parts.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 3

  •  
  •  
  •