-
Install dependencies.
$ yarn install
-
Run the dev server.
$ yarn dev
Note: Optionally, you can use yarn dev --port <PORT> to run your development
environment on a different port.
- Go to
http://localhost:3000
All documentation is written using Markdown and stored in the /docs directory.
The /docs directory is read by /pages/[...path_params].jsx which utilizes
react-markdown to render the Markdown files.
In addition to Markdown syntax, this repository can also do the following with
Markdown (with the help of react-markdown and Prism.js):
- Syntax highlighting
- Diff highlighting in specific languages
- Tabbed example code blocks
When writing documentation, you can use the additional features as outlined below.
To add syntax highlighting to a fenced code block, add the language you want to highlight by starting a fenced code block with the following:
```{language-goes-here}
The above will cause react-markdown to add a language-{language-goes-here}
class name to the code block and call Prism.js to highlight the code.
As an example, using typescript to start a fenced code block ...
```typescript import * as something from "./something.ts"; ```
... renders as ...
To add diff and syntax highlighting to a fenced code block, use the following:
```diff-{language-goes-here}
The above will cause react-markdown to add a
language-diff-{language-goes-here} class name to the code block and call
Prism.js to highlight the code.
As an example, using diff-typescript to start a fenced code block ...
```diff-typescript
+ import { Rhum } from "...";
- import * as asserts from "https://deno.land/std@/testing/asserts.ts";
+ Rhum.asserts.assertEquals( ... );
- asserts.assertEquals( ... );
```
... renders as ...
To turn a fenced code block into a tabbed code block, separate the code in the
code block with // @Tab {name of tab goes here}.
The below fenced code block (with // @Tab {name of tabe goes here} separators)
...
// @Tab Deno
import { Mock } from "./deps.ts";
// Some cool code goes here
// ...
// ...
// @Tab Node (ESM)
import { Mock } from "@drashland/rhum";
// Some cool code goes here
// ...
// ...
// @Tab Node (CJS)
const { Mock } = require("@drashland/rhum");
// Some cool code goes here
// ...
// ...... renders as ...
- Jest - Testing framework
- Next.js - Web framework
- Prism.js - Syntax highlighting for code blocks
- react-markdown - Used to render
React components from Markdown files in
/docsdirectory - styled-components - Used to quickly style React components