Skip to main content

Create a Document

Documents are pages with a sidebar, a previous/next navigation and many other useful features.

Create a Document​

Create a markdown file at docs/my-doc.md:

docs/hello.md
---
title: Hello, World!
---

## Hello, World!

This is your first document in **Docusaurus**, Congratulations!

A new document is now available at http://localhost:3000/docs/hello.

Add your document to the sidebar​

Add hello to the sidebars.js file:

sidebars.js
module.exports = {
  docs: [
    {
      type: 'category',
      label: 'Docusaurus Tutorial',
-     items: ['getting-started', 'create-a-doc', ...],
+     items: ['getting-started', 'create-a-doc', 'hello', ...],
    },
  ],
};

Emphasize your statement​

In your article, you can use this approach:

<div className="highlightedText">Your Statement</div>

For example:

Your Statement

In the custom.css file, please add the following styles:

custom.css
/* Highlighted text block shared across blog/docs */
.highlightedText {
  margin: 3rem auto 2rem;
  padding: 1.75rem 2rem;
  text-align: center;
  font-size: 1.75rem;
  line-height: 1.9;
  font-weight: 300;
  font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #8a8a8a;
  background: none;
  border: none;
  max-width: 720px;
  letter-spacing: 0.08em;
}

.highlightedText small {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.95rem;
  font-weight: 400;
  font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.08em;
  color: var(--ifm-font-color-secondary);
}

@media (max-width: 768px) {
  .highlightedText {
    font-size: 1.25rem;
    padding: 1.5rem;
    margin: 2.5rem auto 1.5rem;
  }
}