Writing Codewars Docs

The Codewars Docs is built with Docusaurus, and the docs are written in Markdown. Each page has "Edit this page" link that allows you to contribute on GitHub.

Plain Markdown is great for writing, but sometimes we need extra features to make the docs more helpful. Docusaurus provides some Markdown extensions, and has support for MDX to extend Markdown with React components.

This page summarizes the features we use, and is also used to test the styling. See Docusaurus docs for more details.

Admonitions

Use the following syntax to add admonitions:

:::type title?

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

:::

:::type title?

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

:::

type is required. title is optional and defaults to uppercased type.

Types

note

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

tip

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

info

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

warning

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

caution

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Anchored

Use Anchored component to add a link to a specific section within a page other than the headings. This can be useful when you'd like to point users to a specific section within a doc.

Example

import A from "@components/Anchored";

> <A id="learn-by-doing">The best kind of learning is learning by doing.</A>
>
> &mdash;Peter Norvig  
> [Teach Yourself Programming in Ten Years](https://norvig.com/21-days.html)

import A from "@components/Anchored";

> <A id="learn-by-doing">The best kind of learning is learning by doing.</A>
>
> &mdash;Peter Norvig  
> [Teach Yourself Programming in Ten Years](https://norvig.com/21-days.html)

The best kind of learning is learning by doing.

—Peter Norvig
Teach Yourself Programming in Ten Years

Hovering over the quote shows a small asterisk (*) on the left, which you can use to get the link to this quote. The sentence is styled differently when targeted.