Buy Now

Manage Content

We've prepared special guide for content management. Let's learn how to add syntax highlighting, examples, callouts and much more.

Add content

Content should be in Markdown format and you shouldn’t remove .yml comments on top of the .md files, errors may occur if you remove them.

Homepage

In main index.md file you add your homepage documentation content. Don’t forget to setup variables on top of the file. We’ve already added all variables, all you have to do is to update them.

Documentation

All documentation files (documents) have to be placed inside _documentation folder in order to be properly displayed in documentation archive.

On the other hand, documentation archive should be placed in root folder of your project.

Basically, we did initial setup for you, all you have to do is to update documentation.md and add new documents in _documentation folder.

Pages

To add new page just create new .md file with proper .yml comments on top of the file. Pages use default layout template. Basic example of default layout template can be found in default.md.

404 error page

Dox have custom 404 error page template. You can edit its content in 404.md. If you’re hosting your site on Apache Web Servers, we’ve already added custom .htaccess file to update path to your 404 error page.

Full 404 error page setup guide. You can find full 404 error page setup guide here.

All links on your website should link to internal pages. There’s few exception to this rule:

  • In content you can use an external links.
  • On all buttons site-wide you can use an external links but you have to set external_url to true.

Relative URLs

If you link internal pages in your content you have to add baseurl prefix to your links. This applies only to sites which will not be deployed in root directory of your server.

Relative URLs configuration. In configuration section you can read more about relative URLs configuration.

Syntax Highlighting

You can call out code or a command within a sentence with single backticks. The text within the backticks will not be formatted. To format code or text into its own distinct block, use triple backticks. Best example of this can be found here.

Furthermore, you can add an optional language identifier to enable syntax highlighting in your fenced code block. Best example of this can be found here.

Examples

To add example bar add following html above your code block:

<div class="example">
    <a href="#" target="_blank">Preview</a>
</div>

or you can use it without “Preview” link:

<div class="example"></div>

Callouts

To add callout to your documentation simply add following html code. Choose between few variations:

Name Color Class
Info Blue callout--info
Warning Yellow callout--warning
Danger Red callout--danger
Success Green callout--success
<div class="callout callout--info">
    <p><strong>This is info callout!</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div class="callout callout--warning">
    <p><strong>This is warning callout!</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div class="callout callout--danger">
    <p><strong>This is danger callout!</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div class="callout callout--success">
    <p><strong>This is success callout!</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

This is info callout! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is warning callout! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is danger callout! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is success callout! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.