Skip to main content

Documentation Tools

Markdown​

Docusaurus​

  • initialize docusaurus project
terminal
npx @docusaurus/init@latest init my-website classic
  • delete blog/ folder
  • enable "docs-only" mode
  • Guide
docusaurus.config
docs: {
  routeBasePath: "/", // docs-only mode
}
  • use the frontmatter slug: / on the document that should be the index page
  • delete the existing homepage at ./src/pages/index.js
  • add site details
docusaurus.config.js
module.exports={

  // add site details
  title: 'dev-handbook',
  tagline: 'Handbook for developers',
  url: 'https://dev-handbook.now.sh',
  baseUrl: '/',

  // remove footer
  // footer:{
    ..
  // }

  // github edit link
  editUrl:
    'https://github.com/Pranay-Tej/dev-handbook/edit/master/',
}
  • Sidebar Configuration
sidebar.js
{
  type: "category",
  label: "Frontend",
  items: [
      {
          type: "doc",
          id: "frontend/frontend",
      },
      {
          type: "category",
          label: "React",
          items: ["frontend/react/react"],
      },
      {
          type: "category",
          label: "Angular",
          items: ["frontend/angular/angular"],
      },
  ],
  }
Resulting Sidebar
Frontend
|
+--Frontend
+--React
| +--React
+--Angular
| +--Angular
project_folder
npm i docusaurus-lunr-search  --save
npm run swizzle docusaurus-lunr-search SearchBar
docusaurus.config.js
module.exports = {
  // ...
  plugins: ["docusaurus-lunr-search"],
};
project_folder
npm run build
npx http-server ./build
note

NOTE: Docusaurus search information can only be generated from a production build. Local development is currently not supported.

Syntax Highlighting for Languages​

docusaurus.config.js
module.exports = {
  // ...
  themeConfig: {
    prism: {
      additionalLanguages: ["csharp"],
    },
    // ...
  },
};

Syntax Highlight Theme​

docusaurus.config.js
module.exports = {
  // ...
  themeConfig: {
    prism: {
      theme: require("prism-react-renderer/themes/oceanicNext"),
    },
    // ...
  },
};

Syntax Highlighting​

  • Use word in single quote backtick for inline highlighting: example
`word`
  • Use triple backtick, specify language and title for code-syntax highlighting
```js title="example.js"
example.js
console.log("test");
  • For normal text
```text title="example"
  • For Note highlight
:::note
:::
**NOTE:** Some important info
note

NOTE: Some important info

Deployment​

Vercel​

  • Create account
  • Connect Git repository from GitHub, GitLab or BitBucket

Netlify​

docusaurus.config.js
module.exports = {
  url: "https://docusaurus-2.netlify.com", // url to your site with no trailing slash
  baseUrl: "/", // base directory of your site relative to your repo
};
  • build command: npm run build
  • build directory: build