A plugin for Docusaurus that lets you 📝 write guides on larger chunks of code and highlights 🌟 the relevant parts.
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';importCodeBlockfrom'@theme/CodeBlock';<CodeDoc><CodeDocSectionhighlight="{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><CodeDocSectionhighlight="{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><CodeBlocklanguage="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>We welcome contributions! Please feel free to fork the repository, make your changes, and submit a pull request.