docmodel show menu hide menu

The Default Theme

String Elements

The following string elements are defined for the default theme:

"en": {
  "site_title"       : "Documentation",
  "meta_title"       : "Documentation",
  "footer"           : "<a href='https://docmodel.com/'>generated by docmodel</a>",
  "code_theme"       : "agate", 
  "outdated_warning" : "This document is for an older version. The latest version is:", 
  "previous_document": "&laquo; Previous",
  "next_document"    : "Next &raquo;"   
}

You can override any of these from your project's configuration file:

"theme"    : {
  "strings": {
    "en"   : {
      "site_title": "My Project!"
    }
  }
}

You can also provide alternatives for other languages (if you don't, any documents baked in another language will fall back to the en strings):

"theme"    : {
  "strings": {
    "nl"   : {
      "site_title": "Documentatie"
    }
  }
}

The default theme supports previous and next links. See the section on Configuration for details.

The default theme supports site links. See the section on Configuration for details.

Code Highlighting

The docmodel default theme uses highlight.js for code highlighting. There are 77 highlight themes to choose from, and there's support for 169 languages (as of January 2017). However, to keep the size of the code base down, highlight in divided into parts.

Change Highlight Theme

The default docmodel theme uses the Agate highlight theme, but there are many more to choose from, and you can migrate your project to another by simply changing the code_theme string value. First, find the name of a highlight theme you would like to use, convert it all to lower case, and replace any spaces with dashes. As example, if you want to use the Arduino Light theme, you need to use arduino-light. Finally, override the code_style string element in your project's configuration file (docmodel.json):

"theme"    : {
  "strings": {
    "en"   : {
      "code_style": "arduino-light"
    }
  }
}

Bake. Serve. Refresh.

We've added this value to the en strings collection because English is the default language for the default theme, so this will be inherited by string sets for other languages. If you have overridden the default theme's default language, you should set this value in that language's strings.

Supported Languages

The default docmodel theme bundles highlight support for the following 23 languages (the common package, and TypeScript):

Add More Languages

If the language you need isn't supported, you'll have to directly modify the default theme. However, this is fairly simple to do. First, make a local copy of the default theme. From your project directory, run:

docmodel --local

This will create a theme directory in your project. Within this directory, open the page.html file and look for the highlight.js script tags at the end of the document. There's a TypeScript include which you can copy. You can find a full list of supported languages on the highlight.js download page:

<!-- Already in file -->
<script src='https://cdn.jsdelivr.net/highlight.js/9.9.0/languages/typescript.min.js'></script>

<!-- Add Go support -->
<script src='https://cdn.jsdelivr.net/highlight.js/9.9.0/languages/go.min.js'></script>

Finally, to activate the local theme, modify the theme.name property in your project's configuration file (docmodel.json) and set its value to local:

"theme": {
    "name": "local",
    ...
  }

Bake. Serve. Refresh.

Table of contents

docmodel always assumes the first H1 element in a document is a page's title, and therefore omits it from the TOC

In-page

To include an in-page Table of Contents for a document, add the following HTML snippet.

<div class='page-toc'></div>

Which (for this page) will produce:

The default theme automatically injects a page's table of contents into the sidebar of each page (this is done dynamically, client side). To disable this feature, edit the theme setting, as shown below, in your project's configuration file (docmodel.json):

"theme": {
  "client_options": {
    "sidebar_toc" : false
  }
}

Alert Boxes

To add styled alert boxes to a document, add any of the following HTML snippets:

<div class='alert'>A simple alert box</div>
<div class='alert error'>An error alert box</div>
<div class='alert warn'>A warning alert box</div>
<div class='alert info'>An info alert box</div>
<div class='alert success'>A success alert box</div>

which will produce:

A simple alert box
An error alert box
A warning alert box
An info alert box
A success alert box
« PreviousNext »