Search code examples
markdowndocfx

DOCFX format tables using markdown without changing the template

Is it possible to change the layour of a table using markdown under docfx?

For example, the following table is not very good readable, because of the spacing between the columns. Event there is no alternating row color:

| Property | Description |
|---|---|
| URL | `/api/<version>/auth/login` |
| Method | `post` |
| Success | Http status *200* |
| Failure | Http-status *400/500* |
| Content/Media-Type | `application/json` |
| Authorization | *no* |
| Roles | - |

That is how it is looking in doxfx:

MD-Table

Some kind of expected behaviour:

Expected

Solution

  • We will extend the default template:

    Create a file: (Project Folder)\template\styles\main.js

    The default DocFX template uses Bootstrap and JQuery, so in main.js put the following:

    $(document).ready(function ()
{
   $("table").addClass("table table-bordered table-striped table-condensed");
})

    This makes the markdown tables identical to those in Api documentation. To play with Bootstrap table styles, see http://www.w3schools.com/bootstrap/bootstrap_tables.asp

    Now, we add this template to docfx.json:
    In docfx.json, Replace "template": ["default"] with "template": ["default", "template"].